Як редагувати стилі в vbulletin 4 - форум твого напрямки

Розглянемо на базі прикладу ситуацію зміни елементів стандартного стилю.

Для початку нам знадобиться браузер FireFox і встановлене на ньому розширення Firebug - вже є? Відмінно, поїхали далі.

Припустимо маємо наступне:

Висота навігації в navbar і елементів меню, що випадає занадто велика, потрібно б зменшити:

Для цього по проблемному елементу натискаємо правою кнопкою миші, щоб викликати додаткове меню, і вибираємо Перевіряти елемент (Inspect Element):

Внизу пояявітся панелька, де ми побачимо вихідний html код, всього документа, але побачимо тільки ту частину, яку Інспектуємо. У правій половині побачимо CSS властивості вибраного елемента. Так як у нас проблема з висотою. то і шукаємо класи в яких є параметр height (в іншому іноді може на висоту впливати і властивості CSS, такі як: padding, margin)

Firebug, хороший тим, що можна нальоту правити html і CSS код і бачити результат. Поправимо значення height з 50px, на 26px. І відразу бачимо зміни. (Тут також потрібно буде змінити параметр line-height: 26px - щоб вирівняти текст по центру, але про це пізніше)

Отже, ми визначилися, що нам потрібно правити клас .navtabs li a (у якого css властивості height нам потрібно змінити).
Тому йдемо в адмінку і робимо пошук по шаблонах в тому стилі, в якому виробляємо зміни, в даному випадку, це default style.

Ось це вміст шаблону, тиснемо кнопку Знайти наш клас:

І знаходимо клас .navtabs li a у якого присутній параметр height. Після двокрапки йде синтаксис vbulletin, в якому говориться, що властивості height присвоєна змінна з назвою navbar_tab_size. як бачимо тут же і властивість line-height - яке при цьому залежить від значення такої ж змінної navbar_tab_size. як і властивість height)

Скопіюємо назва цієї змінної:

І введемо значення змінної navbar_tab_size в поле пошуку, і нижче відразу відобразиться знайдений елемент.

Тиснемо по ньому мишкою і бачимо його параметри. Ось це значення height рівне 50px

Оновлюємо нашу сторінку форуму і бачимо що значення помінялися, і тепер все як треба.

Спеціально для pcvector.ru