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

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

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

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

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

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

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

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

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

Теперь главное найти время и написать всего нужного побольше

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

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

***
И ещё один момент. Раз уж вы взялись за дизайн, неплохо было бы включить функцию отображения в коде страниц названий шаблонов vBulletin. Делается просто:
Основные настройки-основные настройки (не опечатка, а подраздел основных настроек)
и пункт "добавление названий шаблонов в комментарии HTML..."
Для новичков незаменимое удобство. Как правильно воспользоваться, расскажу в следующий раз.

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

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

А юзерам не хрен в стилях ковыряццо
Есть один общий и хорош


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

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

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

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


Но вернусь к теме.

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

Кстати, об иконках сегодня и хотела немного рассказать.
С иконками на разделы очень просто - есть куча хаков, предлагающих индивидуальные иконки каждому разделу и даже категориям. Гораздо хуже с иконками тем. Нет, не с теми, что можно поменять через Админ-панель --> Иконки для сообщений --> Управление иконками сообщений (меняйте-меняйте, это тоже придаст вашему форуму индивидуальности), а теми унылыми конвертиками, что по умочанию украшают все темы в разделах и оповещают нас о наличии новых сообщений в той или иной теме.
Единственное, что я откопала в сети в отношении их - это совет заменить файлы на сервере другими, но тоже в формате ".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, блин я думал что все знаю, а век живи век учись
Пикси супер!


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

Небольшой обзор возможностей фона вашего стиля:

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

2. Цвет и картинки.
Возможности безграничны - от маленькой иконки где-нибудь в уголке и до огромных фоновых изображений. Лично я предпочитаю "бордюры", то есть повторяющиеся изображения, подходящие для любой ширины монитора, хотя иногда приходится ставить обычные картинки, увы.
Задается через "Дополнительные определения CSS", подробно расскажу позднее.
При этом, если вы хотите зафиксировать фон (чтобы он не двигался при прокрутке страницы) стоит указать в этих дополнительных определениях:

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

Давненько я тут не писала... Сегодня решила вернуться к теме иконок, правда, пока не иконок сообщений, а всего лишь иконок разделов. Не знаю, как вам, а мне удобнее делать их в формате .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

ищем строки:

и тоже меняем расширение на нужное.

***
Всё. Ничего не забыла, кажется... Наслаждаемся новыми красивыми иконками!

Один нюанс!
Для особых педантов...
Эти иконки используются еще в одном месте, на странице вв-кодов... Можно заменить их и там:

Шаблон help_bbcodes

заменить расширения на .png (в шаблоне искать по названиям)

Напомню, что страница вв-кодов находится тут:
http://ваш сайт.ru/misc.php?do=bbcode