FAQ Изменяем внешний вид форума vbulletin 4

Шаг 0. Введение

После установки vBulletin вам может потребоваться настроить стиль, чтобы внешний вид форума соответствовал внешнему виду сайта.
Вы можете сделать это через панель управления vBulletin, зайдя в раздел Styles & Templates (Стили и Шаблоны).
Далее выберите пункт Style Manager (Управления Стилями). Затем найдите стиль, который хотите редактировать и выберите из выпадающего списка пункт StyleVars (Переменные Стиля).


Совет: Создать новый стиль

Вместо того, чтобы изменять стандартный стиль, создайте новый в разделе Style Manager (Управление Стилями). Это позволит пользователям использовать старый стиль во время того как вы редактируйте новый.

Шаг 1: Изменение логотипа

Первое, что я захотел сделать — это избавиться от логотипа vBulletin. Я загрузил графику. Я хотел использовать свою папку картинок на сервере.
Как только это было сделано ?
Я зашёл в Панель Управления, открыл меню Стили и Шаблоны, выбрал пункт Управление Стилями. Далее выбрал стиль и из выпадающего меню настроек выбрал пункт StyleVar и попал в панель редактирования стилей:


Для изменения лого я выбрал из левого списка переменную titleimage (скриншот выше). В форме редактирования справа, нужно ввести путь до изображения, которое вы хотели бы видеть в качестве заголовка и нажать Save. Результат моей работы вы можете посмотреть ниже.


Как видите логотип vBulletin автоматически сменился моим, но меня не устраивает фон и именно это подводит нас к шагу 2.

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

Шаг 2: Изменение фона заголовка

Теперь, когда я изменил свой логотип я захотел поправить фон вверху основного шаблона (Header). Теперь вместо titleimage я выбрал переменную header_background.


Как вы заметили, фон моего логотипа - это переход от темно синего к светло синему (градиент). Для того, чтобы фон Header'а соответствовал моему заголовку, я вынужден загрузить изображение. Файл той же высоты и формы, что и логотип. Чтобы загрузить изображение вставьте его адрес в поле Background Image и нажмите «Сохранить» (Save).

Результат вы можете посмотреть ниже:


Но я не захотел останавливаться на достигнутом. Я решил изменить фон панели вкладок. Это описывается в 3ем шаге.

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

Шаг 3: Изменение фона панели вкладок

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


Вот что у меня получилось после этого:


Вы можете остановиться на этом, но я решил продолжить дальше.

Шаг 4: Изменение фона

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


Это скромное изменение сильно повлияло на вид страницы.


Но существует одна маленькая проблема. Граница между панелью навигации и «телом» форума были разными цветами. Она не совпадает с цветом фона. На этом мы подробно остановимся на 5-ом шаге.

Шаг 5: Соответствие рамки навигации с фоном

Чтобы исправить этот маленький недочёт в моем стиле я выбрал переменную navbar_border. Вместо того, чтобы поставить рамку цветом моего фона, я сделал ее прозрачной.


Шаг 6: Изменение Фона категории


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


Один клик и категория выглядит так:


Шаг 7: Изменение низа таблицы (Footer)


Теперь я хотел бы изменить низ форума. Я использовал переменную footer_background.


И вот что получилось:


Шаг 8: Замена цвета текста в Footer

Для изменения цвета ссылок в Footer я использовал переменную footer_background.


Вот что получилось:


Шаг 9: Изменение цвета форумной таблицы

Следующее — изменение фона таблицы самого форума. Для своего я выбрал светло-голубой. Для изменения используется переменная body_background.


Шаг 10: Изменение фона низа таблицы


Я почти закончил с созданием моего стиля. Я нажал на кнопку «Создать новую тему» и увидел, что там так же можно установить фон низа таблицы. Я проверял могу ли добавить фоновый рисунок в этом шаблоне. Переменная blockfoot_background.
Размеры 750x40 пикселей.


И это было моим последним изменением в стиле vBulletin.

Заключение

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

Совет: Загрузка & распространение вашего стиля
Если вы хотите распространить ваш стиль, то вы можете его скачать.
Нажмите на кнопку "Сохранить\Загрузить Стиль". В форме «Скачать»
выберите стиль, который вы создали.
Поставьте галочку “Get customizations made in this style and all parent styles” и нажмите Скачать.


Перевод статьи: GrinGoO

Скажыте такая проблема.при входе на главную страницу форума появляютса надписи( Главная .Форум. Blogs. Что нового?.)не могу разобратса как поменять ссылку на главную чтобы переходила на определёный сайт,сколько искал не нащол,а вот блог и что нового убрать воопще.канешне хотелось бы найти даную страницу чтобы знать где и что менять,можно просто поменять надпись на определёную ссылку сайта!

шаблон отвечающий за это - navbar
(админ панель - стили и шаблоны - управление стилями - выбрать редактировать шаблоны - navbar)
например изменив {vb: rawphrase forum} на свою фразу, Например Сайт, он и будет отображаться вместо фразы Форум - там же и ссылки редактируются

Здраствуйте!скажыте такая проблема.так я боли мение разобралса.но есть одна проблема!я наверху вставляю новое окошко для меню тоесть после кода (
<ul id="navtabs" class=" navtabs floatcontainer<vb:if condition="$show['member'] AND $notifications_total">notify</vb:if>">)

вставляю код(
<li><a class="navtab" href="file:///F|/index.html">название</a></li>)
но ссылка почемута не работает,но если файл индекс закинуть в корень форума тоесть(WWW)работает всё отлично,почему так не подскажете,сразу огаворюсь что путь правельный так как ставлю его через дреамвер.Спасибо

file:///F|/
потому что стоит вот такая абракадабра.

Не надо ставить ссылки на локальные файлы. Только вида http://
Для тестов, можете дополнително создать еще одну папку в денвере и туда помещать ваши другие коды, файлы и т.п. (папка вида media.ru/www/index.ru )
И ссылку прописывать вида http://media.ru/index.ru

спасибо всё пошло отлично!!теперь ищо разобратса с phpbb и больше щастья не надо!!

а можно изменить весь размер шрифта форума? то есть сделать весь размер шрифта форума меньше
пс:извини за аву) могу сменить есть что)

Всем привет, 4.0.3 в меню ищу то что указано на картинке (смена лого) и этого меню тупо нет.

Смотрю в: AdminCP---> Стили и шаблоны--->Управление стилями, открывается то что открывается.. и там выпадающего меню НЭТ.

Спасибо скажу потом...
Все нашел, забыли добавить что Заходим в админку - Стили и шаблоны - Управление стилями - стиль - переменные стиля Откроеца редактор переменных стиля

Здравствуйте, как поменять цвет шрифта(см.скрин) ? Все перерыл ничего не помогло :(
Спасибо.

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