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

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

Для начала нам понадобится браузер 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.

Получили три CSS шаблона, нас будет интересовать последний, без приставки ie (это персональные шаблоны для браузера iexplorer - их тоже нужно будет править, если мы будем изменять свойства прямо в этих шаблонах, но в этот раз, мы будем пользоваться возможностями Редактора переменных стиля). Итак двойной клик по шаблону .css и переходим в него:

Вот это содержимое шаблона, жмем кнопку Найти наш класс:

И находим класс .navtabs li a у которого присутствует параметр height. После двоеточия идет синтаксис vbulletin, в котором говорится, что свойству height присвоена переменная с названием navbar_tab_size, как видим тут же и свойство line-height - которое при этом зависит от значения такой же переменной navbar_tab_size, как и свойство height)

Переменные navbar_tab_size

Скопируем название этой переменной:

Далее перейдем в Редактор переменных стиля:

И введем значение переменной navbar_tab_size в поле поиска, и ниже сразу отобразится найденный элемент.

Жмем по нему мышкой и видим его параметры. Вот это значение height равное 50px

Заменяем его на 26px. Сохраняем.

Обновляем нашу страничку форума и видим что значения поменялись, и теперь всё как надо.