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

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

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

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

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

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

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

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

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

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


Сперва на быструю руку просто закрасил края картинки полоской белого цвета. Все хорошо.
Теперь взялся основательно. Покопался изменил table border="0"
выставил нужную ширину и теперь любая картинка выравнивается правильно, но.. это место закрасилось другим цветом. По диогонали серо-черным..
менял cellpadding="0" но картинка ужимается внутрь
Поменял cellspacing="0" - то что нужно, но...
появилась полоска в центре, между картинками. И это понянто. Бордюр ведь вокруг картинки. Выравнивание влево-вправо непомогает.
Похоже надо вернуться к "table border", но как убрать закрашенность?..


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

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

С этим не спорю, на дефолте все правильно..
Просто "индивидуальный дизайн" шапки диктует свое.
Здесь это не заметно, черное на черном и краев не видно..
не очень заметно как буква W из логотипа слегка вываливается налево.
А тестовом форуме очень грамотно подравняли с белым краем фона.

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


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

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





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



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

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

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

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



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

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

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

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

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

Конечно.

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

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

Кто не верит - ставлю эксперимент на живом форуме.
Вот кнопка в png



Заменяю свою кнопку...скажем, новая тема в разделе

Вот она в Файлзилле в формате png,


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

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



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

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

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