Как изменить цвет заголовка виджета

Привет, друзья! Как и обещал в прошлой статье, в этом посте расскажу, как можно менять цвет заголовков и шрифта в сайдбарах, не влияя при этом, на заголовки статей. Многие из Вас наверное заметили, при настройках цвета шрифта в сайдбаре, меняется цвет и в заголовке статьи и наоборот. Как отдельно управлять цветом шрифтов и заголовками, рассмотрим прямо сейчас.

Для начала – зайдите в стили вашей темы Внешний вид/ Редактор/ Стили CSS скопируйте и вставьте вот это:


.sidebar h2 {
color: #004C86;
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size: 15px;
font-weight: bold;
letter-spacing: 0;
line-height: 20px;
text-shadow: 0 1px 0 #FFFFFF;
text-transform: none;
text-align: center;
border: 1px #FCF0BF solid; /* стиль рамки */
}

.sidebar a {
color: #333333;
text-decoration:none;
font-size: 14px;
}

.sidebar a:hover {
font-size: 14px;
color: #045685;
text-decoration:underline blink;
}


Вот сюда:

 

 

Разберём вкратце, что для чего прописано:

sidebar h2 – заголовок виджета в сайдбаре (h2 – приравнен к заголовку статьи)

color: #004C86; – цвет заголовка

font-family: Verdana и т.д. – предлагаемые шрифты

font-size: 15px – размер шрифта заголовка

line-height: 20px – расстояние между строками (линейная высота)

text-shadow: 0 1px 0 #FFFFFF; – объёмный текст (на разных фонах может выглядеть и как выпуклый и как вдавленный)

text-align: center; – выравнивание текста по центру

строчку: border: 1px #FCF0BF solid; /* стиль рамки */  можно удалить, если Вам не нужны никакие рамки вокруг заголовка. На другом моём сайте — https://www.sadvin.ru  можете посмотреть вариант без всяких рамочек и фонов.

А пока, пойдём дальше:

.sidebar a – этот стиль отвечает за ссылки в виджетах, другими словами текст под заголовком

color: #333333; – цвет шрифта

font-size: 14px; – размер шрифта ссылок

 

.sidebar a:hover – этот стиль отвечает за те же ссылки, но при наведении на них курсора мыши

font-size: 14px; – размер шрифта ссылок при наведении

    color: #045685; – цвет шрифта, в который окрашивается ссылка при наведении курсора

    text-decoration:underline blink; – при наведении ссылка подчёркнута линией

 

Как приподнять заголовок над текстом

В шаблоне F2 заголовки виджетов очень близко расположены к тексту, словно приклеены. Чтобы увеличить расстояние заголовка от текста, нужно прописать размер отступа (показано стрелкой), по умолчанию установлено нулевое значение. Подставьте приемлемое числовое значение и добавьте буквы px. На снимке указан внешний отступ: margin:20px; – это означает, что со всех сторон внутри предполагаемой рамки отступ равен 20 пикселей. Более точно можно было бы указать отступ от верхней границы текста: margin-bottom, 

 

 

Если никакие рамки или фоны под заголовком не планируются, то нужно прописать стили следующим образом: (Популярное Садоводство)

.sidebar h2 {
color: #CC9900;
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size: 15px;
text-align: center;
font-weight: bold;
letter-spacing: 0;
line-height: 20px;
margin: -5px -5px 0;
padding: 8px 8px 8px 10px;
text-shadow: 0 1px 0 #000000;
text-transform: none;
}

 

margin: -5px -5px 0; — 3 значения
  Первое знач. —  Отступ от верхней границы элемента.
Второе знач. —  Отступ от левой и правой границ элемента.
Третье знач. —  Отступ от нижней границы элемента.

Элемент, в данном случае, сам виджет и его внешние границы

 

padding: 8px 8px 8px 10px; — 4 значения
  Первое знач. —  Отступ от верхней границы внутри элемента.
Второе знач. —  Отступ от правой границы внутри элемента.
Третье знач. —  Отступ от нижней границы внутри элемента.
Четвёртое знач. —  Отступ от левой границы внутри элемента.

Чтобы понять что такое внутренний отступ, не удаляйте пока строчку: border: 1px #FCF0BF solid; тогда вы сможете поиграть с числовыми значениями и наблюдать, как меняются в ту или иную сторону внешние (расстояние от границ виджета до границ рамки) и внутренние (расстояние от границ рамки до текста заголовка) отступы. А если Вы планируете фон под заголовком, то эта строчка (стиль рамки) понадобится обязательно. Кто более детально будет разбираться в этом вопросе, поймёт, о чём я хотел сказать. Кто же не очень желает разбираться, копируйте и вставляйте в стили вашей темы строчки, показанные выше – всё и без разбирательств должно работать. 

 

Как сделать фон под заголовком виджета

 

Многим читателям в комментариях и через почту я обещал показать, как сделать фоны под заголовками, как на данном сайте. С удовольствием выполняю своё обещание.

Для начала нужно создать картинку-градиент в виде вертикальной полоски (можно и однотонную) и сохранить в папку своего компьютера. Как это сделать, подробно рассказано в статье Дизайн сайдбаров в резиновой теме F2. Только, там мы делали горизонтальный фон а здесь в настройках сервиса нужно указать на вертикальный градиент.

 

 

Размеры можно указать любые, например: Высота — 30px, ширина – 5px. Затем загрузить с помощью FTP – агента картинку на сервер, а в стилях указать адрес картинки:

background:url(«images/fonside.png») repeat-x;

В стилях это будет выглядеть примерно так:

.sidebar ul h2 {
margin-bottom:10px;
padding:10px 5px 0px 8px;
font-size:1.3em;
text-transform:uppercase;
border: 0px #FCF0BF solid; /* стиль рамки */
-moz-border-radius: 10px; /* закругление углов для старых Mozilla Firefox */
-webkit-border-radius: 10px; /* закругление углов для старых Chrome и Safari */
-khtml-border-radius:10px; /* закругление углов для браузера Konquerer системы Linux */
border-radius: 10px; /* закругление углов для всех браузеров, которые понимают */
background:#3FAD10;
background:url(«images/fonside.png») repeat-x;
width:auto;
height:30px;
}

 

Такие настройки стоят в стилях на данном сайте: Программы Windows & WordPress Если Вам не нужны закруглённые углы, то четыре строчки типа -moz-border-radius: 10px можно удалить.

Что не очень понятно объяснил, спрашивайте, помогу обязательно. До встречи!

 

Удачи Вам!

 

© М.Ковеньков

Поделиться ссылкой: