Переменные стиля, группа header
Сегодня разберем группу header
Для тех, кому лень читать в админке буду писать описание из админки + скрин, где и как это работает.
header_background
Описание от разработчиков: Эта переменная стиля управляет фоном верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
В поле "Цвет фона" вы можете указать любой понравившейся вам цвет. Для примера укажем серый цвет (#eaeaea)
В поле "Фоновое изображение" указан градиент (прозрачный)
"Повторение фона" зависит от вашего фонового изображения.
"Единицы измерения" указываются единицы измерения отступов от изображение (см. ниже.)
"Горизонтальный отступ фонового изображения" и "Вертикальный отступ фонового изображения" - говорит само за себя, если не ясно - спрашиваем.
Скрин
header_border
Описание от разработчиков: Эта переменная стиля управляет границей верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
"Единицы измерения" для пример указываем px
"Ширина" - 1
"Стиль" - выбираете какой вам угодно, я для примера выбрал solid
"Цвет" - аналогично, выбираете любой цвет, для примера выбран #000000
Скрин
header_color
Описание от разработчиков: Эта переменная стиля управляет цветом текста в верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
Содержит лишь одно поле "Цвет" - для примера возьмем #000000
Скрин
header_font
Описание от разработчиков: Эта переменная стиля управляет шрифтом в верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
"Тип шрифтов" это поле можно не трогать, по дефолту Arial, Tahoma, Calibri, Verdana, Geneva, sans-serif
"Единицы измерения" - по дефолту px, но можно выбрать другую единицу измерения
"Размер шрифта" - по дефолту 11, для примера поменяем на 14
"Насыщенность шрифта" - для примера ставим "Полужирный"
"Стиль шрифта" - выставляем курсив
"Строчные буквы шрифта" - для примера ставим "Уменьшенные прописные"
Скрин
header_link_color
Описание от разработчиков: Эта переменная стиля управляет цветом ссылок в верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
Содержит лишь одно поле "Цвет" - для примера возьмем #000000
*Для примера была добавлена ссылка в шаблон header
Скрин
header_linkhover_color
Описание от разработчиков: Эта переменная стиля управляет цветом ссылок при наведении в верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
Содержит лишь одно поле "Цвет" - для примера возьмем #ffffff
*Для примера была добавлена ссылка в шаблон header
Скрин
header_margin
Описание от разработчиков: Эта переменная стиля управляет внешним отступом верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
"Единицы измерения" - по дефолту px, оставляем
"Использовать значение "сверху" для всех сторон" - оставляем как есть
"Сверху" - для примера ставим 20
"Справа" "Снизу" "Слева" = 0
Скрин
header_padding
Описание от разработчиков: Эта переменная стиля управляет внутренним отступом верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
"Единицы измерения" - по дефолту px, оставляем
"Использовать значение "сверху" для всех сторон" - оставляем как есть
"Сверху" - для примера ставим 20
"Справа" "Снизу" "Слева" = 0
Скрин
titleimage_padding
Описание от разработчиков: Эта переменная стиля управляет внутренним отступом логотипа. Логотип - это изображение, которое отображается на каждой странице в левом верхнем углу страницы.
Комментарий от меня:
"Единицы измерения" - по дефолту px, оставляем
"Использовать значение "сверху" для всех сторон" - оставляем как есть
"Сверху" - для примера ставим 20
"Справа" "Снизу" "Слева" = 0
Скрин
toplinks_background
Описание от разработчиков: Эта переменная стиля управляет фоном ссылок в верхнем правом углу верхней части страницы.
Комментарий от меня:
Настройки схожи с переменной "header_background", только фон укажем #000000
Скрин
toplinks_color
Описание от разработчиков: Эта переменная стиля управляет цветом текста в верхних ссылках, которые находятся в верхнем правом углу верхней части страницы.
Комментарий от меня:
Содержит лишь одно поле "Цвет" - для примера возьмем #aeaeae
Скрин
toplinks_hilite_background
Описание от разработчиков: Эта переменная стиля управляет фоном выделенных ссылок в верхнем правом углу верхней части страницы.
Комментарий от меня:
Настройки схожи с настройками переменной "header_background", для поля Фон указываем #149221
Скрин
toplinks_link_color
Описание от разработчиков: Эта переменная стиля управляет цветом ссылок в верхнем правом углу верхней части страницы.
Комментарий от меня:
Содержит лишь одно поле "Цвет" - для примера возьмем #aeaeae
Скрин
toplinks_linkhover_color
Описание от разработчиков: Эта переменная стиля управляет цветом ссылок при наведении, для ссылок, находящихся в верхнем правом углу верхней части страницы.
Комментарий от меня:
Содержит лишь одно поле "Цвет" - для примера возьмем #FFFFFF
Скрин
Группа переменных "header" - рассмотрена.
Целью статьи было - показать работу переменных стиля. Цвета подбирались "из головы", "красивость" не пытался наводить, всё представлено лишь для ознакомления.
Автор: Sven
