PDA

Просмотр полной версии : [F.A.Q] Переменные стиля, группа header



Osetin
09.03.2014, 15:16
Сегодня разберем группу header
Для тех, кому лень читать в админке буду писать описание из админки + скрин, где и как это работает.

header_background
Описание от разработчиков: Эта переменная стиля управляет фоном верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
В поле "Цвет фона" вы можете указать любой понравившейся вам цвет. Для примера укажем серый цвет (#eaeaea)
В поле "Фоновое изображение" указан градиент (прозрачный)
"Повторение фона" зависит от вашего фонового изображения.
"Единицы измерения" указываются единицы измерения отступов от изображение (см. ниже.)
"Горизонтальный отступ фонового изображения" и "Вертикальный отступ фонового изображения" - говорит само за себя, если не ясно - спрашиваем.
http://savepic.org/2648907.png

header_border
Описание от разработчиков: Эта переменная стиля управляет границей верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
"Единицы измерения" для пример указываем px
"Ширина" - 1
"Стиль" - выбираете какой вам угодно, я для примера выбрал solid
"Цвет" - аналогично, выбираете любой цвет, для примера выбран #000000
http://savepic.org/2623306.png

header_color
Описание от разработчиков: Эта переменная стиля управляет цветом текста в верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
Содержит лишь одно поле "Цвет" - для примера возьмем #000000
http://savepic.org/2628429.png

header_font
Описание от разработчиков: Эта переменная стиля управляет шрифтом в верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
"Тип шрифтов" это поле можно не трогать, по дефолту Arial, Tahoma, Calibri, Verdana, Geneva, sans-serif
"Единицы измерения" - по дефолту px, но можно выбрать другую единицу измерения
"Размер шрифта" - по дефолту 11, для примера поменяем на 14
"Насыщенность шрифта" - для примера ставим "Полужирный"
"Стиль шрифта" - выставляем курсив
"Строчные буквы шрифта" - для примера ставим "Уменьшенные прописные"
http://savepic.org/2634572.png

header_link_color
Описание от разработчиков: Эта переменная стиля управляет цветом ссылок в верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
Содержит лишь одно поле "Цвет" - для примера возьмем #000000
*Для примера была добавлена ссылка в шаблон header
http://savepic.org/2622287.png

header_linkhover_color
Описание от разработчиков: Эта переменная стиля управляет цветом ссылок при наведении в верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
Содержит лишь одно поле "Цвет" - для примера возьмем #ffffff
*Для примера была добавлена ссылка в шаблон header
http://savepic.org/2657102.png

header_margin
Описание от разработчиков: Эта переменная стиля управляет внешним отступом верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
"Единицы измерения" - по дефолту px, оставляем
"Использовать значение "сверху" для всех сторон" - оставляем как есть
"Сверху" - для примера ставим 20
"Справа" "Снизу" "Слева" = 0
http://savepic.org/2632513.png

header_padding
Описание от разработчиков: Эта переменная стиля управляет внутренним отступом верхней части страницы. Верхняя часть страницы - это горизонтальная панель, отображаемая над основным содержимым страниц. Обычно она содержит логотип.
Комментарий от меня:
"Единицы измерения" - по дефолту px, оставляем
"Использовать значение "сверху" для всех сторон" - оставляем как есть
"Сверху" - для примера ставим 20
"Справа" "Снизу" "Слева" = 0
http://savepic.org/2679616.png

titleimage_padding
Описание от разработчиков: Эта переменная стиля управляет внутренним отступом логотипа. Логотип - это изображение, которое отображается на каждой странице в левом верхнем углу страницы.
Комментарий от меня:
"Единицы измерения" - по дефолту px, оставляем
"Использовать значение "сверху" для всех сторон" - оставляем как есть
"Сверху" - для примера ставим 20
"Справа" "Снизу" "Слева" = 0
http://savepic.org/2645824.png

toplinks_background
Описание от разработчиков: Эта переменная стиля управляет фоном ссылок в верхнем правом углу верхней части страницы.
Комментарий от меня:
Настройки схожи с переменной "header_background", только фон укажем #000000
http://savepic.org/2663235.png

toplinks_color
Описание от разработчиков: Эта переменная стиля управляет цветом текста в верхних ссылках, которые находятся в верхнем правом углу верхней части страницы.
Комментарий от меня:
Содержит лишь одно поле "Цвет" - для примера возьмем #aeaeae
http://savepic.org/2626371.png

toplinks_hilite_background
Описание от разработчиков: Эта переменная стиля управляет фоном выделенных ссылок в верхнем правом углу верхней части страницы.
Комментарий от меня:
Настройки схожи с настройками переменной "header_background", для поля Фон указываем #149221
http://savepic.org/2641730.png

toplinks_link_color
Описание от разработчиков: Эта переменная стиля управляет цветом ссылок в верхнем правом углу верхней части страницы.
Комментарий от меня:
Содержит лишь одно поле "Цвет" - для примера возьмем #aeaeae
http://savepic.org/2625346.png

toplinks_linkhover_color
Описание от разработчиков: Эта переменная стиля управляет цветом ссылок при наведении, для ссылок, находящихся в верхнем правом углу верхней части страницы.
Комментарий от меня:
Содержит лишь одно поле "Цвет" - для примера возьмем #FFFFFF
http://savepic.org/2674501.png

Группа переменных "header" - рассмотрена.
Целью статьи было - показать работу переменных стиля. Цвета подбирались "из головы", "красивость" не пытался наводить, всё представлено лишь для ознакомления.

Автор: Sven

Tommy_Star
09.03.2014, 15:20
Хорошие Уроки..!!

Osetin
08.07.2014, 16:03
поправил некоторые пункты.