Создание индивидуального дизайна для vBulletin

Установив форум, русифицировав его и понаставив необходимых хаков, все админы рано или поздно задумываются о дизайне. Я пока ещё только начинаю вникать в особенности шаблонов vBulletin, но по мере возможности буду выкладывать в эту тему все советы по созданию своего стиля на vBulletin на основе существующих. По мере пополнения темы в первый пост буду добавлять ссылки на нижележащие посты, чтобы не приходилось искать по всей теме.

Вопросы мне задавать пока рано, я сама только осваиваю этот движок, но думаю, что мой опыт верстки поможет мне успешно справиться с этой задачей.

Итак, приступаем к дизайну.

Совет №1.
Не трогайте исходный стиль!

Для того, чтобы создать его копию, над которой можно будет вдоволь поэкспериментировать, достаточно зайти в админ-панель, в левом столбце найти группу ссылок "стили и шаблоны", выбрать пункт "Управление стилями". Под таблицей с имеющимися стилями появится ссылка "создать новый стиль". Создаем.

Теперь мы можем выбрать меню "Все опции стиля" и попробовать создать основу будущего индивидуального стиля.

Примечание: изображения будут использованы те же, что и на основном стиле до тех пор, пока вы не измените пути к ним.

Однако, о настройках стиля - позднее.

Повторюсь:
Правило №1: Не трогайте исходный стиль! Создайте новый! Не думаю, что найдутся те, кто спросит "почему", но я всё же отвечу: испортив дубликат, вам нужно будет всего лишь удалить его и создать ещё один.

А ошибки случаются даже у самых опытных профи, так что не лучше ли подстраховаться?



Примечание 2: Если у вас несколько стилей, и вы хотите один из них использовать как основу, сначала создайте дочерний стиль именно этого стиля (всё в тех же выпадающих меню есть такая опция), а потом, зайдя в редактирование настроек нового дочернего стиля, просто выбираете пункт "Нет родительского стиля". И ваш клон совершенно отделен и готов к экспериментам.

Аркадий:

Очень актуальная тема, спасибо.

Теперь главное найти время и написать всего нужного побольше Итак, стиль для экспериментов создан. Как сделать так, чтобы создателю в любой момент можно было его просмотреть, но все остальные посетители его бы не видели? Легко. Идем в админ-панель, Основные настройки-настройки стиля и языка

и проверяем следующие два пункта:

Стиль по умолчанию - ставим какой-то из уже готовых или обычный.

Разрешить пользователям выбирать стиль? - Да.

В опциях экспериментального стиля выбираем пункт "редактировать настройки" и ставим "Нет" в пункте "Разрешить выбор пользователей".

Внизу форума появится возможность одним щелчком менять стиль отображения форума, при этом недоделанные стили обычным пользователям видны не будут.

Вуаля! *** И ещё один момент.

Раз уж вы взялись за дизайн, неплохо было бы включить функцию отображения в коде страниц названий шаблонов vBulletin.

Делается просто: Основные настройки-основные настройки (не опечатка, а подраздел основных настроек) и пункт "добавление названий шаблонов в комментарии HTML..." Для новичков незаменимое удобство.

Как правильно воспользоваться, расскажу в следующий раз.

Fiesta:

Разрешить пользователям выбирать стиль? - Да.

Fiesta, а вот это необязательно Если ты в админке кликнешь на свой экспериментальный стиль (ну это где в стилях и шаблонах список стилей ) то на новой вкладке он и откроется. Ты его будешь видеть, а все остальные нет

Boss, я и это уже нашла, ага, знаю.

Только если дополнительных стилей больше, чем один, эта функция становится довольно важной.

Вдруг пользователи захотят оставить стандартный стиль, а эксперименты дизайнера им не понравятся? Да и просто в любой момент и на любой страничке переключиться и посмотреть, как это смотрится в свежем/старом стиле, бывает удобно.

Fiesta:

Вдруг пользователи захотят оставить стандартный стиль

А юзерам не хрен в стилях ковыряццо Есть один общий и хорош
Fiesta, кста. Есть куча хаков которые требуют изменения шаблона. И? Ты будешь десять шабов ковырять чтоб хак поставить? Вот эсли это форум разработчиков стиля на воблу, то да. Для демок самое оно. Хочешь шаблон, выбрал - посмотрел. Да и вааще. В плане узнаваемости форум должен иметь лицо :gent:

Boss:

Fiesta, кста. Есть куча хаков которые требуют изменения шаблона. И? Ты будешь десять шабов ковырять чтоб хак поставить?

Я сначала поставила все необходимые хаки, если вы обратили внимание, а потом уже взялась за дизайн.

А клонируя измененные шаблоны, автоматически для этих стилей подключаются и хаки.

По крайней мере у меня всё работает.

Да, если потом надумаю ставить ещё что-нибудь, буду вручную, куда деваться.

Boss:

В плане узнаваемости форум должен иметь лицо

Он и будет иметь, просто пользователи могут выбрать и другой стиль, если захотят.

К Новому году я их буду радовать снежным, а летом.

хотела сказать "солнечным" но передумала - лучше прохладным.

Но вернусь к теме. Цвета своего экспериментального стиля все и без моих подсказок найдут, где изменить (Админ-панель --> стили и шаблоны --> Управление стилями --> Все опции стиля.) Вообще там очень много интересного можно задать.

Например, отдельные директории для изображений стиля, это пригодится, если вы надумаете менять иконки.

Чтобы у разных стилей они не дублировали друг-друга, смените в опциях стиля директории, не забыв создать нужные папки на хостинге и залить в них нужные изображения.

Кстати, об иконках сегодня и хотела немного рассказать.

С иконками на разделы очень просто - есть куча хаков, предлагающих индивидуальные иконки каждому разделу и даже категориям.

Гораздо хуже с иконками тем.

Нет, не с теми, что можно поменять через Админ-панель --> Иконки для сообщений --> Управление иконками сообщений (меняйте-меняйте, это тоже придаст вашему форуму индивидуальности), а теми унылыми конвертиками, что по умочанию украшают все темы в разделах и оповещают нас о наличии новых сообщений в той или иной теме.

Единственное, что я откопала в сети в отношении их - это совет заменить файлы на сервере другими, но тоже в формате ".gif".

"Не хочу" - подумала я и решила написать о том, что их можно и нужно менять на красивые, объемные, с тенями и градиентами ".png" .

Никакого хака на этот счет не нашла, поэтому будем править шаблоны вручную.

Для начала приготовьте все необходимые иконки на замену конвертиков, и обязательно с теми же названиями: thread_dot.png thread_lock.png thread_hot.png thread_hot_new.png thread_new.png и все остальные... Ищутся в папке /images/statusicon/ и так далее.

а я подожду денек, может быть, e Boss'а и на это случай имеется какой-нибудь хак?) Если не имеется, то расскажу, как это сделала я.

А пока два маленьких секрета для предыдущих этапов, наработанных за несколько лет сайтостроительства:

1) Вам пригодится программка Pixie, найдите и скачайте, это очень удобное средство чтения цвета с экрана.

Вам понравился основной цвет какого-нибудь сайта? Не теряйтесь и не лазьте по вражеской CSS, просто скопируйте этот цвет с помощью Pixie прямо с любого места экрана.

Вам нужно в фотошопе задать цвет букв в точности, как на том градиенте с кнопок? без проблем! Ctrl+Alt+C и цвет уже в буфере обмена, откуда легко копируется в форму фотошопа.

Программка крошечная, много места и памяти не займет, но вы скоро так привыкнете к этой малышке.

что-то я разошлась))) Мне в рекламные агенты пора переквалифицироваться 2) Вы не дизайнер, но хотите, чтобы цвета вашего сайта гармонично сочетались? Самое известное средство - Kuler --> Visit Kuler now

от Адоб, но есть еще и наши, отечественные сайты для этой цели, не менее удобные. Например, Цветогенератор

. Принцип один - выберите симпатичную вам цветовую схему и придерживайтесь её в своём дизайне.

3) А кнопки где вы делаете? Заказываете знакомому дизайнеру? Выпрашиваете на форумах в разделах дизайна? О, ужас! Любые кнопки на любой вкус могу сделать "генераторы кнопок". Ищите в гугле.

Лично я люблюделать их тут

. Да, а иконки в формате .png тоже не просите - всевозможные бесплатные коллекции просто наводнили интернет. Да, у меня, разумеется, есть любимый сайт, где я их выбираю из тысячи коллекций, но... это уже совсем другая тема. Должна же у женщины оставаться загадка?

Fiesta, блин я думал что все знаю, а век живи век учись Пикси супер! :good:

Fiesta:

и так далее... а я подожду денек, может быть, e Boss'а и на это случай имеется какой-нибудь хак?)

Для иконок сообщений нет хака Есть хак для иконок категорий, но с ним могут быть косяки И есть хак для индивидуальных иконок разделов

Небольшой обзор возможностей фона вашего стиля:
1. Просто цвет. Задается в Админпанель - Управление стилями - Все опции стиля - вкладка Body или Фон страницы (можно и там и там, у меня, например, они отличаются, если вы хотите прозрачный, укажите вместо цвета параметр transparent)
2. Цвет и картинки. Возможности безграничны - от маленькой иконки где-нибудь в уголке и до огромных фоновых изображений.

Лично я предпочитаю "бордюры", то есть повторяющиеся изображения, подходящие для любой ширины монитора, хотя иногда приходится ставить обычные картинки, увы. Задается через "Дополнительные определения CSS", подробно расскажу позднее.

При этом, если вы хотите зафиксировать фон (чтобы он не двигался при прокрутке страницы) стоит указать в этих дополнительных определениях:

 html {background-attachment: fixed;}

или

 body {background-attachment: fixed;}

(зависит от того, на какой слой вы поставите картинку)

Давненько я тут не писала... Сегодня решила вернуться к теме иконок, правда, пока не иконок сообщений, а всего лишь иконок разделов. Не знаю, как вам, а мне удобнее делать их в формате .png, смотрится он лучше, чем .gif и прозрачность не хуже поддерживает... А уж выбор их огромен! Просто заменить их на сервере не получится, нужно править шаблоны. Этим и займемся. Чтобы понятно было, какие иконки будем менять на .png, откройте главную страницу вашего форума и взгляните на иконки, обозначающие наличие новых тем и сообщений в разделах... Видите? На этом форуме, например, они выглядят так:





Итак, меняем.

Шаг 1.

Приготовим замену иконкам (в формате .png, разумеется), названия оставляем те же самые:

forum_new

forum_old

forum_new_lock

forum_old_lock

Шаг 2.

Заливаем их на сервер, в папку images/statusicon (или любую другую папку с вашим стилем)

Шаг 3.

В шаблоне FORUMDISPLAY и FORUMHOME ищем их названия и меняем расширения на .png

После этого внизу главной страницы (в легенде) их изображения сменятся, но возле форумов будут оставаться прежние иконки.

Шаг 4.

В шаблонах

forumhome_forumbit_level1_post

и

forumhome_forumbit_level2_post

ищем строки:

img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif"

и тоже меняем расширение на нужное. *** Всё. Ничего не забыла, кажется... Наслаждаемся новыми красивыми иконками! Один нюанс! Для особых педантов... Эти иконки используются еще в одном месте, на странице вв-кодов... Можно заменить их и там: Шаблон help_bbcodes заменить расширения на .png (в шаблоне искать по названиям) Напомню, что страница вв-кодов находится тут: http://ваш

сайт.ru/misc.php?do=bbcode

Ночная:

Для начала приготовьте все необходимые иконки на замену конвертиков, и обязательно с теми же названиями:
thread_dot.png
thread_lock.png
thread_hot.png
thread_hot_new.png
thread_new.png
и все остальные...
Ищутся в папке /images/statusicon/

и так далее... а я подожду денек, может быть, e Boss'а и на это случай имеется какой-нибудь хак?) Если не имеется, то расскажу, как это сделала я.

Давненько я обещалась, но вот видите, как получилось - только сейчас "руки дошли". Ничего, файлы не протухли, я надеюсь, можно приступать.

Заливаем их на хостинг, в ту папку стиля, в которой они и должны быть - в statusicon вашего нового стиля. Залили? Теперь идём в админку и начинаем колдовать: в шаблоне FORUMDISPLAY ищем полные названия файлов старых иконок: thread_hot_new.gif thread.gif thread_hot.gif thread_lock.gif thread_new.gif... и заменяем расширения на .png Заменили? Сохраняем.

Думаете, всё? А вот не тут-то было! Не отобразятся пока ваши красивые иконки, разве что в легенде.

Почему? Потому что ещё нужно пойти в шаблон threadbit и там аккуратненько заменить /thread$thread[statusicon].gif" на /thread$thread[statusicon].png" Только пожалуйста, не трогайте другие gif, которые есть в этом шаблоне... Если у вас почему-то пропала кнопка "новая тема" - для создания тем, значит, вы заменили newthread.gif на newthread.png... Возвращайтесь и меняйте. B в дальнейшем будьте внимательны... Но иконочки-то встали, как миленькие! Красивенько стало... :nail:

Ночная странница, два раза,это чтобы точно дошло,до таких как я?

джинася, не наговаривай на себя. Это у меня интернет чудит... Спасибо, поправила.

Обещала написать статью про шапку, хотелось бы даже на тестовом поставить образцы, но пока с временем туговато... Сделаю краткое руководство для новичков, а по мере добавления материала вынесу в отдельную тему. На самом деле способов много - сейчас самый простой и быстрый.
Резиновая шапка "по-быстрому". Сначала рисуем шапку в фотошопе таким образом, чтобы она состояла как минимум из трех частей: левого края, центрального элемента и правого края, которые могли бы как сближаться, так и удаляться друг от друга. В шаблоне header немного модифицируем дефолтную табличку, находящуюся между комментариями

 <!-- logo --> и <!-- /logo -->

То, что ниже - не трогаем.

Тем не менее, вернусь к табличке.

Допустим, у нас есть три изображения:

1) левый край шапки (left.png) ширина 100px, высота 30px

2) правый край шапки (right.png) ширина 150px, высота 50px

3) лого в центре (logo.png)

Я специально взяла разную ширину и высоту картинок, чтобы в коде было видно, что и куда прописывать, хотя на практике они чаще симметричные.

При таком раскладе наша табличка должна выглядеть так:

 <a name="top"></a>


<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">


<tr>


<td width="100">


<img src="ссылка" width="100" height="30" border="0">


</td>


<td style="background: #FFFFFF url(images/logo.png); text-align: center;">


<h1>Название сайта (к примеру)</h1>


</td>


<td width="150">


<img src="ссылка" width="150" height="50" border="0">


</td>


</tr>


</table>

Не забываем, что если хочется при нажатии на лого попадать на главную страницу, то для этого картинку лого следует обрамить в следующий шаблон:

 <a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a>

Сам адрес картинки лого прописывается в пункте "Все опции стиля" - "Изображение заголовка" или прямо ссылкой в шапке. Тогда табличка будет выглядеть так:

 <a name="top"></a>


<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">


<tr>


<td width="100">


<img src="ссылка" width="100" height="30" border="0">


</td>


<td style="text-align: center;">


<a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a>


</td>


<td width="150">


<img src="ссылка" width="150" height="50" border="0">


</td>


</tr>


</table>

Вот и всё. С такой шапкой справится даже новичок.

Если будут вопросы - пишите! В дальнейшем сделаю и более сложные макеты шапок, только пинайте Пересмотрела код.

Хочу добавить: если logo.png не фон центральной части, а именно картинка, то вставлять её следует так же через тег img.

Ночная:

Сначала рисуем шапку в фотошопе таким образом, чтобы она состояла как минимум из трех частей: левого края, центрального элемента и правого края, которые могли бы как сближаться, так и удаляться друг от друга.

У меня уже есть цельная картинка, её просто разрезать на три равные части?

Ночная:

Не изменяйте ничего, предварительно не сохранив исходников, а лучше создайте дочерний стиль и на нем экспериментируйте.

Как создать дочерний стиль?

Автоспец:

У меня уже есть цельная картинка, её просто разрезать на три равные части?

Нет. Надо смотреть на конкретной картинке, где и как лучше разрезать. Если не хотите показывать на форуме, можете кинуть мне эскиз в ЛС?

Автоспец:

Как создать дочерний стиль?

Админка - управление стилями - создать новый стиль. И в окошке родительского указать необходимый.

Автоспец:

У меня уже есть цельная картинка, её просто разрезать на три равные части?

Не обязательно так делать: посмотрите как это сделано на дефолтном стиле: кликабельная картинка Лого (которая занимает не так много места) и картинка фона. Ширина которого задаётся в процентах. Этим и достигается "резиновость".

Верно: там картинка vbulletin3_logo_white.gif и фон, цвет которого задан через css. Фон в виде, если Вы это видели когда, вертикальной черты. Длину которой задают через проценты.

Прометей:

там картинка vbulletin3_logo_white.gif и фон, цвет которого задан через css.

Я взял свою картинку, назвал её "vbulletin3_logo_white.gif" и заменил ей существующую.

Автоспец:

Я взял свою картинку, назвал её "vbulletin3_logo_white.gif" и заменил ей существующую.

Ну правильно. Это самое простое действие

Где именно (в каком шаблоне) лежит картинка шапки vbulletin3_logo_white.gif?

Veter:

Не в шаблоне, а в папке.
\images\misc\

Это понятно, но я хочу её отцентровать. А теги центр не знаю куда поставить, ведь она стоит слева по дефолту.

Автоспец, я же писала выше тот код. что отвечает за лого.

 <img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" />

Шаблон header разумеется. Но ссылки там нет - там только переменная. Хочешь - замени на ссылку.

Ночная:

Вообще там очень много интересного можно задать.

Например, отдельные директории для изображений стиля, это пригодится, если вы надумаете менять иконки.

Чтобы у разных стилей они не дублировали друг-друга, смените в опциях стиля директории, не забыв создать нужные папки на хостинге и залить в них нужные изображения.

Пробовала менять конвертики. Сохраняла в .gif Заливала в папку statusicon нового стиля, а иконки не поменялись. Что делать?

джинася, сперва подождите немного. Новые иконки бывают появляются не сразу, а через какое то время. Кэш хостинга, кэш провайдера. Но это при условии, что вы все сделали правильно

ещё у воблы кэш есть!

Veter:

Но это при условии, что вы все сделали правильно

Все,изменились. :mol:

Ночная:

выбираете пункт "Нет родительского стиля". И ваш клон совершенно отделен и готов к экспериментам.

а если нет? Дочерний будет влиять на родительский?

Прометей:

Не обязательно так делать: посмотрите как это сделано на дефолтном стиле: кликабельная картинка Лого (которая занимает не так много места) и картинка фона. Ширина которого задаётся в процентах. Этим и достигается "резиновость".

т.е. вместо лого можно поставить любого размера картинку, а картинка фона сама ужмется? Или надо ставить 0% ?

Ночная:

Автоспец, я же писала выше тот код. что отвечает за лого.

 <img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" />

Шаблон header разумеется. Но ссылки там нет - там только переменная. Хочешь - замени на ссылку.

(какую переменную надо заменить на ссылку?) другими словами вместо копирования и замены лого, можно просто ссылку на картинку, которая стоит в другом месте? И в следующий раз, для замены, достаточно поменять картинку на месте ссылки?(и все это не залезая в админку форума)

Ночная:

Сначала рисуем шапку в фотошопе таким образом, чтобы она состояла как минимум из трех частей: левого края, центрального элемента и правого края, которые могли бы как сближаться, так и удаляться друг от друга.

в каком смысле сближаться и удаляться?.. на мониторах в другим разрешением между ними появится щель?

koil:

а если нет?
Дочерний будет влиять на родительский?

Родительский будет влиять на дочерний.

koil:

(какую переменную надо заменить на ссылку?)

$stylevar[titleimage]

koil:

И в следующий раз, для замены, достаточно поменять картинку на месте ссылки?(и все это не залезая в админку форума)

Да

koil:

в каком смысле сближаться и удаляться?..

Ну вы же дизайнер говорили... "Резиновость" картинки знаете что такое?

Veter:

Родительский будет влиять на дочерний.

Тогда связь можно и оставить? Ведь меняться будет только дочерний. А если в родительский добавить хаки, то они появятся и в дочернем. Я правильно понял?

Да

Это интересно. Можно же наверное наладить что-то типа слайд-шоу.. Каждый день, автоматом новая картинка.. или какая-нибудь фраза. Можно ли что-то сделать с фразами, но не в виде картинок? Т.е. смена текста, не картинки.

"Резиновость" картинки знаете что такое?

Теперь сомневаюсь.. Полагаю что любой размер картинки вытянется под размер, разрешение экрана(пропорционально). Но если есть еще сближение и отдаление частей.. Тогда нужно наверное прижимать "края" к центру?

koil:

Тогда связь можно и оставить?

Можно.

koil:

А если в родительский добавить хаки, то они появятся и в дочернем.

Хаки добавляются на все стили сразу. А вот изменения в шаблонах передаются от родительского дочернему, верно.

koil:

Можно же наверное наладить что-то типа слайд-шоу..

Есть и такие скрипты... и даже хаки для рыбки. Вы только определитесь, что именно хотите.

koil:

Можно ли что-то сделать с фразами, но не в виде картинок?

А что с ними нужно сделать? Зачем? Цель?

koil:

Полагаю что любой размер картинки вытянется под размер, разрешение экрана(пропорционально)

Это как поставить, можно и так, чтобы не тянулся... А если картинка стоит так, что тянется, то это происходит с потерей качества, вы же это понимаете...

koil:

Тогда нужно наверное прижимать "края" к центру?

Можно и к краям. Зависит от задумки.

Ночная:

Есть и такие скрипты... и даже хаки для рыбки. Вы только определитесь, что именно хотите.

А что с ними нужно сделать? Зачем? Цель?

Допустим шапка состоит из двух частей.

В одной части постоянно сменяется фото, в другой части фразы.

Каждая часть работает независимо одна от другой.

Пример:

"Рисунки" это различные фото на военную тематику,

а "фразы" это высказывания известных людей на тему войны.

Ну или фото природы, а в другой части стихи.

Заготовки допустим лежат где-то в отдельных папках.

Закидать к примеру с запасом на 1 год, и в течении года все будет меняться, каждый день...

Ночная:

Это как поставить, можно и так, чтобы не тянулся... А если картинка стоит так, что тянется..

аа.. это существенно. т.е. два варианта. 1. Картинка растягивается под заготовленный размер. 2. Шапка растягивается под размер картинки. Можно узнать какие теги в каждом случае должны быть?

koil:

В одной части постоянно сменяется фото, в другой части фразы

Как сделать меняющийся логотип (и фразы) - погляжу, на тестовом у себя делала, сейчас уже не помню как, но вспомню и выложу, сделаю темку...

koil:

т.е. два варианта.
1. Картинка растягивается под заготовленный размер.
2. Шапка растягивается под размер картинки.

Можно узнать какие теги в каждом случае должны быть?

Это настолько объемный вопрос, что я сейчас в разделе "начинающего кодера" темку создам. Многим будет полезно. Картинки ведь можно (и нужно) не только через img ставить, но и фоном...

koil:

Я правильно понял?

Да, правильно.

koil:

Можно же наверное наладить что-то типа слайд-шоу..
Каждый день, автоматом новая картинка.. или какая-нибудь фраза.
Можно ли что-то сделать с фразами, но не в виде картинок?
Т.е. смена текста, не картинки.

Есть хак смены логотипа https://lumtu.com/haki-vbulletin/2558-hak-avtomaticheskoi-smeny-logotipa-na-vbulletin.html

Сделайте текст картинкой и вперед.

koil:

Полагаю что любой размер картинки вытянется под размер, разрешение экрана(пропорционально).

Размер любой, но не любая картинка

Veter:

Размер любой, но не любая картинка

Да и картинка любая (если правильно поставить), просто не любая после этого будет нормально смотреться... Написала начало статьи (с картинками), иду класть... и картинки грузить))

Veter:

Хак автоматической смены логотипа на vBulletin

А я и забыла, что он у нас тут лежит)) Спасибо...

Юль, в резиновой картинке должно быть место где она может тянуться.

То есть фон.

Ты же не сможешь, например заставить тянуться лошадь, или авто, или тело человека.

Ведь в таком случае он потеряет пропорции.

А вот небо тянуться может.

Поле для гольфа.

Море, река и тд. Например есть картинка, есть разные разрешения мониторов.

Нам нужно чтобы картинка смотрелась на всю ширину монитора, как 800 пх, так и 1280 пх. Значит нам ее нужно растянуть по горизонтали почти в полтора раза.

А чтобы картинка смотрелась со всеми пропорциями, когда мы рисуем хедер мы предусматриваем место где она будет растягиваться.

Понимаешь?

Veter, я-то понимаю... Но лично я для резиновой картинки (вообще термин некорректен, это по сути резиновая шапка, а не картинка) беру фон, который можно не тянуть, а повторять по горизонтали... Бордюр, по простому... Ты же понимаешь, что так всё равно лучше...

Ночная:

а повторять по горизонтали...

Может по вертикали повторять... Если по горизонтали тянуть...

Ночная:

Ты же понимаешь, что так всё равно лучше...

Наверное разные случаи бывают. Где то бордюр лучше, а где-то тянуть фоном...

Ночная:

это по сути резиновая шапка, а не картинка)

Не, ну подожди Ну шапка. А что такое шапка? Та же картинка. А чуть раньше - PSD в слоях, или рисунок в векторе.

Veter:

Наверное разные случаи бывают.

Этим пронизана вся вёрстка... Нет единого рецепта. Нельзя задать универсальный код шапки. подходящий на все случаи жизни... Мы. наверное, правда, имеем ввиду разное)) Ой дойдут руки - на тестовом сделаю резиновую шапку)) Картинки с тебя Так быстрее придем к консенсусу)))

Ночная:

Ой дойдут руки - на тестовом сделаю резиновую шапку))

На каком из них? Их же три уже Если на vb, то дефолтный стиль и так резиновый Можно провести эксперимент. Дать тебе не резиновую картинку, а ты из нее сделаешь резиновую шапку. А?

Veter:

Если на vb, то дефолтный стиль и так резиновый

Он не показательный. Мы говорим о картинке из нескольких частей, с независимым фоном...

Veter:

Можно провести эксперимент. Дать тебе не резиновую картинку, а ты из нее сделаешь резиновую шапку. А?

Зависит от картинки. Если картинка позволяет разрезание и подстановку фона - да, сделаю. Жду картинку)

Ночная:

Если картинка позволяет разрезание и подстановку фона - да, сделаю.

Вот Юль К этому мы и пришли. Что не из не любой картинки можно сделать резиновую шапку (например) Я собственно об этом говорил.

Veter:

Есть хак смены логотипа https://lumtu.com/haki-vbulletin/2558-hak-avtomaticheskoi-smeny-logotipa-na-vbulletin.html

А он обновлен?
http://pcvector.ru/t3359/

там написано: "Все кто скачал хак до 26 февраля 2012 года, скачайте архив заново и импортируйте продукт с перезаписью!" Добавлено через 55 минут

Прометей:

Верно: там картинка vbulletin3_logo_white.gif и фон, цвет которого задан через css. Фон в виде, если Вы это видели когда, вертикальной черты. Длину которой задают через проценты.

еще раз.. для тупых.. как фон заменить на картинку?

koil:

как фон заменить на картинку?

koil, я создала обещанную тему про вставку картинок....

Будет что-то непонятно - спрашивайте. Сегодня я расскажу, как перенести строку с названием колонок на главной под название категорий. Вот что я имею ввиду: ДО (дефолтный вариант):





ПОСЛЕ:






Теперь сам процесс пошагово: Идем в шаблон FORUMHOME находим там

 <thead>


<tr align="center">


<td class="thead"> </td>


<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>


<td class="thead">$vbphrase[last_post]</td>


<td class="thead">$vbphrase[threads]</td>


<td class="thead">$vbphrase[posts]</td>


<if condition="$vboptions['showmoderatorcolumn']">


<td class="thead">$vbphrase[moderator]</td>


</if>


</tr>


</thead>

Вырезаем этот кусочек. Сохраняем шаблон. Затем идем в шаблон forumhome_forumbit_level1_nopost ищем там $childforumbits и перед ним вставляем

 	<tr align="center">


<td class="thead"> </td>


<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>


<td class="thead">$vbphrase[last_post]</td>


<td class="thead">$vbphrase[threads]</td>


<td class="thead">$vbphrase[posts]</td>


<if condition="$vboptions['showmoderatorcolumn']">


<td class="thead">$vbphrase[moderator]</td>


</if>


</tr>

В нестандартных шаблонах код может несколько отличаться. Всё! Будут какие-то "косяки" при нестандартной структуре форумов - пишите, но на локали никаких проблем я не обнаружила...

koil:

А он обновлен?

Наверное нет... я не зарегистрирован на форуме Вектора, но если мне не изменяет память там не было дыр. По-моему там был исправлен какой-то мелкий баг, и решение по нему было в нашей теме.

Ночная:

В шаблоне header немного модифицируем дефолтную табличку, находящуюся между комментариями

 <!-- logo --> и <!-- /logo -->

 <a name="top"></a>


<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">


<tr>


<td width="100">


<img src="ссылка" width="100" height="30" border="0">


</td>


<td style="background: #FFFFFF url(images/logo.png); text-align: center;">


<h1>Название сайта (к примеру)</h1>


</td>


<td width="150">


<img src="ссылка" width="150" height="50" border="0">


</td>


</tr>


</table>

Вот и всё. С такой шапкой справится даже новичок. Если будут вопросы - пишите!

Что-то у меня ничего не получилось.. Создал папку images/logo куда закинул "лого" с произвольным названием. Путь images/logo/лого.gif поставил везде есть слово ссылка к примеру вместо "


сперва обрадовался что любого размера картинка входит.. но позже заметил размер картинки не подходит под размер форума. сколько бы я его не подгонял.

то больше, то меньше.. да еще в зависимости от того в каком броузере смотришь.. да еще похоже от прав зависит.

как админ и как пользователь вижу разный размер картинки в шапке.. Понятно .. надо делать "резиновую".. только и с ней что-то не получилось..

koil:

Шапка не сменилась..

koil:

Делал в "дочерней"..

А что в шапке? дефолтный лого или вообще пустое место? или "схлопнулось"?

koil:

к примеру вместо "<img src="ссылка" wid.."
<img src="images/logo/лого.gif" wid.."

попробуй указать полные , а не относительные ссылки и заодно так проверится доступность файлов.

Ночная:

А что в шапке?..

все получилось.. оказыватся забыл ткнуть на сам стиль.

теперь вижу.. крайние растягиваются.

могут и непропорционально..

середина множится и неуправляема.

а как же сделать так что-бы картинка (одна) растягивалсь пропорционально и точно соответствовало размеру форума?

Т.е. высота может получится разной, (в зависимости от размера картинки) но по ширине точно соответствовала форуму.

(на разных мониторах)

Да и кстати что с "заголовком изображения"?

Там указан старый файл, и он лежит на месте.

Почему ж его нигде не видно?

koil:

а как же сделать так что-бы картинка (одна) растягивалсь пропорционально и точно соответствовало размеру форума?

Указать ширину в процентах и не указывать высоту. Тогда картинка изменится пропорционально своему размеру. Но НЕЛЬЗЯ растянуть картинку без потери качества... если ширина картинки 300px, растянув ее на 1024 по ширине, вы получите туманный эффект на ней.

koil:

Да и кстати что с "заголовком изображения"?
Там указан старый файл, и он лежит на месте.
Почему ж его нигде не видно?

Могу подсказать, только если увижу конкретный код, а так это гадание на кофейной гуще.

Ночная:

Указать ширину в процентах и не указывать высоту. Тогда картинка изменится пропорционально своему размеру.

"не указывать" это значит в кавычках поставить "0"? или просто оставить кавычки ""? Или удалить сам тег?

Но НЕЛЬЗЯ растянуть картинку без потери качества...

да это понятно.. если картинка изначально имеет слишком высокое качество, то растяжение не помешает.. Главная "потеря качества" это искажение от нарушения пропорций.. Тут даже и высокое качество не поможет.

Могу подсказать, только если увижу конкретный код, а так это гадание на кофейной гуще.

имел в виду вот этот момент

Ночная:

Сам адрес картинки лого прописывается в пункте "Все опции стиля" - "Изображение заголовка" или прямо ссылкой в шапке.

koil:

"не указывать" это значит в кавычках поставить "0"? или просто оставить кавычки ""? Или удалить сам тег?

Удалить тег.

koil:

если картинка изначально имеет слишком высокое качество, то растяжение не помешает..

Или слишком большой размер... но тут другой минус - она будет тяжелой

koil:

имел в виду вот этот момент

Его не видно, потому что вы убрали его код из шапки... он там "не вызывается" - других причин не вижу.

какие теги и настройки нужно взять за основу, что-бы все отображалось правильно и в хроме и в IE? Допустим шапка состоит из двух одинаковых по размеру картинок. Одна слева, другая справа. Ну может "за основу" неправильно выразился.. Скажем так.

какие должны быть настройки чтобы в любом броузере шапка состоящая из двух картинок выглядела нормально, поделив поровну территорию в шапке форума. У меня стоит так

<td width="50%">
<img src="https://lumtu.com/images/logos/logon2.gif

" width="100%" border="1">
</td>

<td width="50%">
<img src="https://lumtu.com/images/logon/log3.png

" width="100%" border="1">
</td>

В хроме нормально, в IE вылезает за край справа.. если уменьшить проценты, то между картинками появляется просвет, при этом слева который прижат к краю ровно, а справа все равно вылезает за край.. Прижать оба влево, думаю обе картинки налезут друг на друга.

(border поставил что-бы видеть границы) ширина картинок одинаковая.

500пикселей.. по идее должно ужать и ужимает.

по высоте искажений нет, все пропорционально. Проблема в IE Левая картинка хорошо стоит, правая стоит прочно на месте, не сдвигается. Попробовал поменять их местами, результат тот же.. правая не слушается. Перепробовал и выравнивание влево, вправо.

попробовал и с бордюрами и с шириной таблицы.

и с шириной ячейки.. Что-то не помогает ничего.. Что сделать что-бы правая картинка прижалась к левой? Между ними постоянно остается щель, а правая сторона вылезает за края.. В хроме все отлично срабатывает.

И выравнивание и размеры и растяжение..

Как сменить?






Как сменить на серый дизайн?)
и также сменить цвет писание по умолчанию с серого на белый?

Админка, ваш шаблон, все опции стиля и вперед к победе

Продолжаю учиться с нуля. Разрешите задавать вопросы по мере их возникновения. Вот сразу и первый: "В опциях экспериментального стиля выбираем пункт "редактировать настройки" и ставим "Нет" в пункте "Разрешить выбор пользователей".
Внизу форума появится возможность одним щелчком менять стиль отображения форума, при этом недоделанные стили обычным пользователям видны не будут. Вуаля!" Сделал как описано, вот только на форуме я теперь и сам не могу смотреть свой эксперементальный стиль. Может что то не то сделал? Или его можно где то в админке смотреть?

inso:

Сделал как описано, вот только на форуме я теперь и сам не могу смотреть свой эксперементальный стиль. Может что то не то сделал? Или его можно где то в админке смотреть?

можно смотреть по ссылке из админки, управление стилями - подводите курсор к названию стиля, всплывает подсказка "посмотреть форум в этом стиле" а насчёт "не могу смотреть" - если Вы

inso, post: 0:

И в админке поставил, чтобы пользователи не могли менять стили.

то меню выбора стиля не будет ни у кого, даже у админа

Льюви:

можно смотреть по ссылке из админки, управление стилями - подводите курсор к названию стиля, всплывает подсказка "посмотреть форум в этом стиле"

а насчёт "не могу смотреть" - если Вы

то меню выбора стиля не будет ни у кого, даже у админа

Спасибо за ответ, но я понял что мне еще рано лезть в создание индивидуальных стилей. С шаблоном и то разобраться не получается.

Так на этом и учится все: изменяя под себя какой либо из дизов скачанных из интернета. И только потом, делают своё, с нуля.

В шапке две картинки одинакового размера. Надо отодвинуть их от края, что-бы не прижимались к границе, выравниваясь по ширине форума. ( к примеру здесь логотип форума вылезает налево, за край.

если взять за край светло-серый прямоугольник где написано "форум веб-мастеров") Сперва на быструю руку просто закрасил края картинки полоской белого цвета.

Все хорошо. Теперь взялся основательно.

Покопался изменил table border="0" выставил нужную ширину и теперь любая картинка выравнивается правильно, но.. это место закрасилось другим цветом.

По диогонали серо-черным.

менял cellpadding="0" но картинка ужимается внутрь Поменял cellspacing="0" - то что нужно, но... появилась полоска в центре, между картинками.

И это понянто.

Бордюр ведь вокруг картинки.

Выравнивание влево-вправо непомогает. Похоже надо вернуться к "table border", но как убрать закрашенность?..



обозначил красным место соприкосновения серой и черной полоски. Как их убрать? Картинка стоит ровно, как надо.

koil:

к примеру здесь логотип форума вылезает налево, за край..

Здесь ничего не вылезает за край, тк здесь переделанный дефолтный стиль, и следовательно все таблицы, сама их структура изначально правильная. То есть, если посмотреть например тестовый форум

, то на дефолтном стиле вообще хорошо видна структура таблиц, и те кто делает собственные стили, неважно в паблик они попали, или строго индивидуальные, все равно придерживаются данной структуры. Все остальное уже от лукавого, и кривизна или прямота верстки зависит от кодера.

Veter:

Здесь ничего не вылезает за край, тк здесь переделанный дефолтный стиль, и следовательно все таблицы, сама их структура изначально правильная..

С этим не спорю, на дефолте все правильно.

Просто "индивидуальный дизайн" шапки диктует свое.

Здесь это не заметно, черное на черном и краев не видно..

не очень заметно как буква W из логотипа слегка вываливается налево.

А тестовом форуме очень грамотно подравняли с белым краем фона.

А в случае который я привел, когда в шапке темная картинка на белом фоне, создается впечатление вылезания за край..

вот в каком случае шапка смотрится более аккуратно?

первый вариант



второй вариант



может криво и от лукавого, но первый вариант мне кажется более лучше. Добавлено через 59 минут

Veter:

Здесь ничего не вылезает за край

в качестве совета, только для пробы.. попробуйте в админке, в стилях.

там где Body и есть окошко "Дополнительные атрибуты CSS" выставить "border: 1px solid #FFCC00;" во-первых будет красивее (имхо) во-вторых увидите разницу между "краем" и логотипом.

на данный момент бросается в глаза разница между черным и "черным", смотрится как ошибка.

а если выставить "бордер" это эта разница будет смотреться как дизайнерское решение.

))

koil:

но первый вариант мне кажется более лучше

Смотря какой дизайн форума собственно. В одном случае лучше, в другом без разницы... Так что каждый случай индивидуален. Если вам так больше нравится, то переверстывайте шаблон.

koil:

в качестве совета, только для пробы..
попробуйте в админке, в стилях..

Спасибо Нам пожалуй такое дизайнерское решение не подойдет Я вообще заметил, что у нас с вами очень разное видение дизайна

Veter:

Спасибо



Нам пожалуй такое дизайнерское решение не подойдет

а попробовали?.. Хотя бы краем глаза взглянуть.. на пару сек.. )

Я вообще заметил, что у нас с вами очень разное видение дизайна

и это хорошо.. новое всегда рождается только на стыке.. Добавлено через 22 минуты

Veter:

Если вам так больше нравится, то переверстывайте шаблон

Зачем переверстывать шаблон? я просто изменил размер рисунка и все. все стало ровно, просто хотелось бы сделать средствами форума.. А вам нравится второй вариант?

koil:

а попробовали?

Конечно.

koil:

А вам нравится второй вариант?

Лично у меня это не имеет значения. Я не люблю массивные шапки на форумах, а для логотипа неважно первый или второй вариант.

Ночная:

Не знаю, как вам, а мне удобнее делать их в формате .png, смотрится он лучше, чем .gif и прозрачность не хуже поддерживает... А уж выбор их огромен! Просто заменить их на сервере не получится, нужно править шаблоны.

Png красивее gif, однозначно.

Первый раз на старом шаблоне я все делала по твоей инструкции, Ночная странница. Каждую новую кнопку в пнг меняла в шаблонах.

Потом захотела сменить стиль, и начались эксперименты. Я наваяла новых красивых кнопок в пнг, и решила посмотреть, насколько они потеряют качество, если я сделаю вот как: Готовые кнопки в png я прямо в файлзилле переименовывала в gif, и тут же заливала на сервер. Каково же было мое удивление, когда я увидела красивые кнопки с тенями, с градиентами, с другими прибамбасами без потери качества Я и так, и сяк разглядывала их чуть ли не под лупой, - точно, качество png Все остальные кнопки, иконки я делала без правки шаблонов. Наверняка, все давно об этом знают, давно и благополучно используют, а вот для меня это стало открытием Кто не верит - ставлю эксперимент на живом форуме. Вот кнопка в png



Заменяю свою кнопку...скажем, новая тема в разделе Вот она в Файлзилле в формате png,






тут же переименовываю ее в gif и закидываю на сервер. Вот результат, она же без потери качества






Знаете, вот скрин не очень оставлю ненадолго кнопку вместо старой, заходите, сами посмотрите - http://muz-forum.com/forumdisplay.php?f=99

Viuga:

Наверняка, все давно об этом знают, давно и благополучно используют, а вот для меня это стало открытием

В некоторых стилях есть такое. Тупо измененные расширения кнопок, иконок. Но это как бы неправильно...

Veter:

Тупо измененные расширения кнопок

Тупо, говоришь. Ну ок. Не поленюсь, поставлю на живой форум еще десяток стилей и в каждый тупо загружу новые кнопки - посмотрим. От стиля ли это зависит?

Viuga:

От стиля ли это зависит?

Нет от стиля это не зависит. Будет работать на любом.

Veter:

В некоторых стилях есть такое.

Veter:

Нет от стиля это не зависит.

я не так поняла?

Наверное не так поняла. В некоторых паблик стилях сделано так, как ты описала.

Viuga:

тут же переименовываю ее в gif и закидываю на сервер.

Вот результат, она же без потери качества

браузер всё равно знает, что это PNG в былые годы ишак бы взбрыкнул как новые ишаки на такие подмены реагируют - хз...

Ночная:

Примечание 2: Если у вас несколько стилей, и вы хотите один из них использовать как основу, сначала создайте дочерний стиль именно этого стиля (всё в тех же выпадающих меню есть такая опция), а потом, зайдя в редактирование настроек нового дочернего стиля, просто выбираете пункт "Нет родительского стиля". И ваш клон совершенно отделен и готов к экспериментам.

Этот совет не работает. Как только убираю родительский стиль, новый стиль превращается в дефолтный. Как разорвать связь и получить копию нестандартного шаблона? Использоваться на форуме будут оба, не хочу, чтобы влияли друг на друга.

Переделываю стиль. Столкнулся с такими вопросами: 1. В селекторе body значение фона указано

#292929 url(images/картинка.png) repeat-x top left

Т.е. визуально это выглядит как полоса в самом верху форума.

Как сделать, чтобы данная полоса продублировалась в самом низу форума? HTML освоил довольно легко, а вот с CSS у меня туго, к тому же не совсем понимаю как правильно записать код в селектор настроек стиля. 2. Логотип сайта расположен в левом верхнем углу.

Как его продублировать в правый нижний ? Стиль дефолтный, если что.

Ночная:

Обещала написать статью про шапку, хотелось бы даже на тестовом поставить образцы, но пока с временем туговато... Сделаю краткое руководство для новичков, а по мере добавления материала вынесу в отдельную тему. На самом деле способов много - сейчас самый простой и быстрый.

Резиновая шапка "по-быстрому".

Сначала рисуем шапку в фотошопе таким образом, чтобы она состояла как минимум из трех частей: левого края, центрального элемента и правого края, которые могли бы как сближаться, так и удаляться друг от друга.

В шаблоне header немного модифицируем дефолтную табличку, находящуюся между комментариями

.

Все прочитал, ничего не понял Зашел в header, но там мне не дает код править, только можно прописать адрес к картинке, прописываю но не открывается Короче явно я что-то не то делаю

Apchi:

Зашел в header, но там мне не дает код править

Это как? Не дает...

Apchi:

Короче явно я что-то не то делаю

Может неполные админские права?

Veter:

Может неполные админские права?

тогда не зашёл бы

Ну почему? Если урезанные права? На шаблоны и на хаки нет прав вот и все.