Використання StyleVars для зміни зовнішнього вигляду форуму vBulletin 4
Після установки vBulletin вам може знадобитися налаштувати стиль, щоб зовнішній вигляд форуму відповідав зовнішнім виглядом сайту.
Ви можете зробити це через панель управління vBulletin. зайшовши в розділ Styles - Templates (Стилі і Шаблони).
Далі виберіть пункт Style Manager (менеджер стилів). Потім знайдіть стиль, який хочете редагувати і виберіть зі списку пункт StyleVars (Змінні Стилю).
Порада: Створити новий стиль
Замість того, щоб змінювати стандартний стиль, створіть новий розділ Style Manager (менеджер стилів). Це дозволить користувачам використовувати старий стиль під час того як ви редагуйте новий.
Крок 1: Зміна логотипу
Перше, що я захотів зробити - це позбавитися від логотипу vBulletin. Я завантажив графіком. Я хотів використовувати свою папку картинок на сервері.
Як тільки це було зроблено?
Я зайшов в Панель Управління. відкрив меню Стилі і Шаблони. вибрав пункт менеджер стилів. Далі вибрав стиль і з випадаючого меню налаштувань вибрав пункт StyleVar і потрапив в панель редагування стилів:
Для зміни лого я вибрав з лівого списку змінну titleimage (скріншот вище). У формі редагування справа, потрібно ввести шлях до зображення, яке ви хотіли б бачити в якості заголовка і натиснути Save. Результат моєї роботи ви можете побачити нижче.
Як бачите логотип vBulletin автоматично змінився моїм, але мене не влаштовує фон і саме це підводить нас до кроку 2.
Порада: Створення папки зображень для вашого стилю
Створення нової папки в директорії вашого форуму для картинок
нового стилю. Це дозволяє легше знайти ваші картинки при необхідності їх замінити.
Крок 2: Зміна фону заголовка
Тепер, коли я змінив свій логотип я захотів поправити фон вгорі основного шаблону (Header). Тепер замість titleimage я вибрав змінну header_background.
Результат ви можете побачити нижче:
Але я не захотів зупинятися на досягнутому. Я вирішив змінити фон панелі вкладок. Це описується в 3ем кроці.
Крок 3: Зміна фону панелі вкладок
Хоча початковий колір панелі вкладок відповідає моїм заголовкам, я хотів більше. Я добре подивився на нього і зрозумів, що vBulletin використовує повторює зображення градієнта, як добре! Після завантаження градієнта, я почав встановлювати його як фон панелі вкладок. Відкрив той же StyleVars і вибрав змінну navbar_background.
Ось що у мене вийшло після цього:
Ви можете зупинитися на цьому, але я вирішив продовжити далі.
Крок 4: Зміна фону
Для мене наступний крок полягав у створенні фону. Я хотів темним кольором підкреслити колірну схему. Я зробив це, вибравши параметр "doc_backgroundColor" зі списку.
Це скромне зміна сильно вплинуло на вигляд сторінки.
Але існує одна маленька проблема. Кордон між панеллю навігації і «тілом» форуму були різними кольорами. Вона не збігається з кольором фону. На цьому ми докладно зупинимося на 5-му кроці.
Крок 5: Відповідність рамки навігації з фоном
Щоб виправити цей маленький недолік в моєму стилі я вибрав змінну navbar_border. Замість того, щоб поставити рамку кольором мого фону, я зробив її прозорою.
Розміри для зображення - 935 x 50 pixels.
Крок 7: Зміна низу таблиці (Footer)
Тепер я хотів би змінити низ форуму. Я використовував змінну footer_background.
І ось що вийшло:
Крок 8: Заміна кольору тексту в Footer
Для зміни кольору посилань в Footer я використовував змінну footer_background.
Ось що вийшло:
Крок 9: Зміна кольору форумного таблиці
Наступне - зміна фону таблиці самого форуму. Для свого я вибрав світло-блакитний. Для зміни використовується змінна body_background.
Крок 10: Зміна фону низу таблиці
Я майже закінчив зі створенням мого стилю. Я натиснув на кнопку «Створити нову тему» і побачив, що там так само можна встановити фон низу таблиці. Я перевіряв чи можу додати фоновий малюнок у цьому шаблоні. Мінлива blockfoot_background.
Розміри 750x40 пікселів.
І це було моїм останнім зміною в стилі vBulletin.
Порада: Завантаження поширення вашого стилю
Якщо ви хочете розповсюдити ваш стиль, то ви можете його завантажити.
Натисніть на кнопку "Зберегти \ Завантажити Стиль". У формі «Завантажити»
виберіть стиль, який ви створили.
Поставте галочку "Get customizations made in this style and all parent styles" і натисніть Завантажити.
Переклад статті: GrinGoO