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

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

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

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

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

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

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

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

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

Заливаем их на хостинг, в ту папку стиля, в которой они и должны быть - в 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 в дальнейшем будьте внимательны...



Но иконочки-то встали, как миленькие! Красивенько стало...

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

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

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

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

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

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

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



Тем не менее, вернусь к табличке.
Допустим, у нас есть три изображения:
1) левый край шапки (left.png) ширина 100px, высота 30px
2) правый край шапки (right.png) ширина 150px, высота 50px
3) лого в центре (logo.png)

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


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

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

Тогда табличка будет выглядеть так:

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


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

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

Добавлено через 2 минуты
Как создать дочерний стиль?

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

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

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

На дефолтном стиле трешки нет картинки фона.

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

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