По просьбе Лу-Лью
из серии Ликбезов по VB4.
Для создания страниц VBulletin 4 использует файлы и шаблоны. Как администратор вашего сайта у вас есть доступ к "Менеджеру стилей", который позволяет настраивать практически все аспекты вашего стиля, включая шаблоны CSS и stylevars!
* Хочу обратить ваше внимание, что не все что связанно с вашим стилем может храниться в стандартных CSS, возможно вам понадобятся дополнительные css, если ваш стиль будет отличаться от установленного по умолчанию, или для других функциональных возможностей вашего проекта.
Данная статья не научит вас верстать новые стили, она призвана помочь новичкам разобраться что есть что.
Ну а теперь о главном. Всем прекрасным вещам нужно исполнять определенные условия, не правда ли? Вот об этом мы коротенечко с вами и поговорим.
Vbulletin поставляется со стандартным стилем, что не может не радовать, и почему бы пользователю не выделиться? Вам один стиль может не нравится, другие его просто обожают, некоторые предпочитают светлый стиль, другие темный, и так далее. Стиль который ставиться по умолчанию можно отредактировать или же вы можете создать свой собственный неповторимый стиль. Хотя есть более легкие пути это установить платные шаблоны, или их бесплатные аналоги. Единственное что следует учесть, что все что вы создаете будет требовать дополнительного обслуживания. О чем это я? О том, что сейчас очень сложно настроить стили, потому как есть шанс, что при очередном обновлении Vbulletin 4 некоторые шаблоны не сольются (обновятся правильно), конечно есть уже инструменты которые автоматически помогают найти. что не состыковывается, но если вы новичек, это вам мало поможет. Так. что при создании или редактировании наших стилей не все пойдет гладко.
Однако дорогие друзья не будем отчаиваться
если вы овладете некоторыми навыками необходимыми в нашей работе. вы все сами прекрасно отстроите при каждом обновлении. В целом моя задача объяснить новичкам как все работает, и как мы можем все настроить и контролировать.
Отображение страниц форума, шаблоны имеют следующий порядок и расположены сверху вниз:
- Header
- Navbar
-
Forumhome
- Footer
Это основная короткая версия построения. Но почему на картинке которая расположена ниже показано что не все? Хорошо попробую по другому, то что я указал выше в списке черным, имеется как правило на любых страницах. А то. что у меня выделено голубым, может иметь множество развязок, смотря что и как хотите отредактировать.
Сложно понять? Ну например тот же список что выше может выглядеть так:
- Header
- Navbar
-
Forumhome или
Forumdisplay или
Showthread и так далее.
- Footer
Ну а для тех кто уже погрузился и работал с "Менеджером стилей", вы наверно уже знакомы с более сложными комбинациями:
- Header
- Headinclude
- headinclude_bottom
- Navbar
- Showthread (с инклудом postbit)
- postbit
- Footer
Тут уже я привожу более сложную структуру, как вы можете видеть я упомянул о шаблоне Showthread с шаблоном postbit, правильно? Ну да, а как это возможно? все дело в том, что VBulletin может вызвать любой шаблон с помощью переменной, именно поэтому в шаблон Showthread легко можно вызвать (вставить) шаблон postbi и всего лишь одним небольшим фрагментом кода.
Header
Шапка форума (header), имеет свой логотип, имеется блок toplinks, в котором располагаются ссылки настроек, уведомлений и так далее.
Я расскажу вам о двух вариантах смены логотипа:
1. Самый простой вариант - перезаписать файл /images/misc/vbulletin4_logo.png новым логотипом, просто назовите его также и залейте в каталог.
2. Чуть по сложнее вариант - Отредактируйте стили переменных (StyleVar), для этого зайдите в Админку (AdminCP) - откройте стили и шаблоны ( Styles & Templates) перейдите в менеджер стилей (Style Manager) - В вашем стиле зайдите в "Редактор переменных стиля" (StyleVars). Откроется список со всякими непонятными вам штуками
Не пугайтесь найдите там раздел ImagePaths, и отредактируйте путь к новому изображению.
Разобрались? Пойдем дальше, для изменения цвета и эффектов верхнего блока (toplinks):
Там же в редакторе переменных (StyleVars) находим раздел
header и в нем уже видем настройки toplinks, поковыряйтесь для изучения, потом будет легче.
Как отредактировать шаблон header:
AdminCP> Стили и шаблоны> Менеджер стилей> * Выберите "Редактирование шаблонов» в выпадающем меню рядом с именем стиля, как только список раскроется, прокрутите скролом в низ и найдите header, нажмите на него 2 раза и откроется шаблон для редактирования.
Не не не, скажет новичок не гони пургу лучше говори как Css то в header редактируется?
AdminCP> Стили и шаблоны> Менеджер стилей> * Выберите "Редактор переменных стиля" в выпадающем рядом с именем стиля. Найдите группу HEADER, нажмите на нее и вам откроется список того что вы можете отредактировать в css.
Почему так, а не проще ли мне открыть header.css и там поковыряться?
Конечно проще если вы верстак и знаете что делаете, но новичку проще когда ему описывается и подписывается то, что он делает, быстрее научиться, выглядит это примерно так.
ну а теперь наглядно header:
Показаны красным (1), область заголовка.
Показаны синим цветом (2), логотип или "заголовок изображения".
Показанный в Оранже (3), toplinks.
Navbar
Navbar - навигационная панель ваших вкладок, суб-ссылок и меню, или проще верхняя панель навигации
Как изменить шаблон панели навигации (navbar)?
AdminCP> Стили и шаблоны> Менеджер стилей> * Выберите "Редактирование шаблонов» в выпадающем меню рядом с именем стиля выберите пункт редактировать шаблоны. Как откроется окно шаблонов, прокрутите скрол вниз до пункта "Шаблоны навигации"(Breadcrumbs) и щелкните для развертывания категории шаблонов, выберете navbar и нажмите 2 раза.
Омг, ну а как на счет CSS?
Практически тоже самое что и в примере с header, идем AdminCP> Стили и шаблоны> Менеджер стилей> * Выберите "Редактор переменных стиля" в выпадающем рядом с именем стиля.
Выберите пункт NAVBAR прокрутив вниз скрол и все, можете редактировать.
Показаный красным (1), область панели навигации,
Показанный Зеленым (2) стандартная вкладка.
Показаный желтым цветом (3), "избранные" вкладки или "выбранные", как вы можете видеть на изображении.
Показаный синим цветом (4), вкладки суб-меню и суб ссылок а также любые выпадающие меню.
Показанный в Серый (5), панели навигации форума или "верхней навигации", как ее иногда называют. При переходе по разделам и тема в этой панеле отображается место где вы находитесь.
Показанный в Оранже (6), Глобальный поиск.
Главная форума (Forumhome)
Forumhome шаблон отображает ваши категории, форумы, и суб-форумы в зависимости от ваших предпочтений выбранных в AdminCP> Настройки> Параметры.
- Показано красным (1), forumhome_forumbit семья шаблонов, которая составляют все, что вы видите в красном боксе, вы можете настроить эти через редактирование шаблонов и через редактор переменных стиля (stylevars) найти в редакторе переменных стиля вкладку форум.
- Показано фиолетовым (2), forumhome_markread_script, это позволяет участникам при желании легко отметить все форумы как прочтенные.
- Показано в сером (3), что происходит или кто на сайте? Эту область обычно называют WGO, она может быть настроена через шаблоны CSS, а также путем редактирования шаблонов непосредственно FORUMHOME, некоторые модификации могут изменять и отображать информацию по-разному, показывать последних посетителей, показать поисковых "пауков" и многое другое!
- Показано желтым цветом (4) это является боковой панелью форума и каждый «блок» имеет свой собственный шаблон, который используется для отображения ее в боковой панели на forumhome странице.
Вы можете включить боковую панель, перейдя в AdminCP> Настройки> Параметры> Форум Боковая панель и Параметры. После включения очень просто создать блоки которые вы хотите, и не забудьте перезагрузить типы блоков. Чтобы получить доступ к настройке блоков после включения боковой панели форума перейдите в AdminCP> Форумы & Модераторы> Менеджер блоков. * Это не настроит ваши блоки для CMS, для них есть свои настройки.
Я не ожидал, что статья займет столько времени. поэтому она будет продолжена поэтапно. далее будет описанно:
Threadbit (список тем и так далее)
Showthread/Postbit (Список постов)
Footer (или по русски жопа )
В течении двух-5 дней все дополню.