Люблю копаться в css файлах. Это те, которые содержат код, настраивающий всё оформление вашего блога. Сегодня я расскажу как оформить и настроить список и свои картинки для маркированного списка на блоге через css.
Можете еще посмотреть интересную статью по затемнению картинок через css, которая нашла много хороших отзывов: Как затемнить картинку через css.
Порядок такой: Я объясню какие команды отвечают за оформление списков, расскажу отдельно по каждой настройке, после этого расскажу как сделать свою картинку-марке для списка
Если у кого то будут возникать вопросы по другим маркировкам, то спрашиваем в комменты.
Код, формирующий список в css
код ul — формирует список в css. С помощью него можно задать, какой маркер из стандартных может выводиться. Стандартные маркеры: кружок (circle), точка (disk) и квадрат (square).
Например, если в файле вашего блога style.css будет запись вида
ul {list-style-type: circle}
то все списки будут выводиться с маркером-кружочком. Для того, чтобы для каждого блока задавать свою картинку вместо маркера, код ul должен не иметь значения и записываться в таком виде:
ul {list-style-type: none}
где конкретно это необходимо будет прописывать я укажу ниже.
Код, формирующий картинку вместо маркера
Для того, чтобы использовать вместо стандартного маркера свою картинку, используется код ul li. У него есть значения, которые необходимо будет настроить.
ul li{border-top:1px solid #e3e3e3;list-style-type:none;padding:11px 0px 0px 13px;background:#fff url(images/arrow.jpg) no-repeat}
Для красивого отображения нашего списка, я думаю, прописать лучше каждый элемент, но это у кого как горит. Если не интересно, крутите до кода background
border-top — устанавливает толщину, стиль и цвет границы (линии вокруг рамки) — можете не устанавливать. 1px значит, что толщина рамки равна одному пикселю; solid показывает стиль рамки, можно вставлять один из слудющих:
и наконец #e3e3e3 — (html код цвета) указывает, каким цветом будет линия.
list-style-type — устанавливаем значение none. То есть оставляем как в примере: list-style-type:none
padding — задает величину свободного поля с левой, правой сторон, сверху и снизу. Первое значение задет верхний отступ, второе — нижний, третье — с правой стороны и четвертое — с левой стороны: Выглядеть будет так padding: 11px 0px 0px 13px — то есть 11 пикселей отступ сверху и 13 пикселей слева.
Последний и самое важное значение, с помощью которого и указывается та картинка, которую следует вывести вместо стандартного маркера (так же ей можно задавать цвет фона в списке)
Устанавливаем свою картинку вместо обычного маркера
background — можно установить фон в списке просто — командой #345234 (код можете вставить ваш). Можно не вписывать фон вообще
Чтобы установить маркер списка css необходимо:
1) Ищем картинку, которую вы хотели бы использовать в качестве маркера. Размеры моего маркера 
равны 11 на 11 пикселей.
2) Загружаем вашу картинку на на сервер в тему в папку images. (показываю как у меня выглядит путь к этой папке) wp-content/themes/Krem_Jam/kremjam/images/ — заливаем туда картинку
3) Ищем тот блок, в котором хотите сделать список со своим маркером. Это могут быть посты, сайдбары. Обычно списки в сайдбарах, где показаны рубрики, новые комменты, новые посты и т.д. (см. как у меня в боковой колонке)
Кто не знает как узнать как в вашем файле style.css отображается тот или иной блок, используем плагин для Firefox — Firebug.
Для тех кто использует Google Chrom все будет легче: нажимаем правой кнопкой мыши на странице вашего блога. Далее выбираем «просмотр кода элемента».
Для многих поиск блока может вызвать затруднения. Будут вопросы, задавайте, помогу с настройкой списка на вашем блоге.
4) Открываем файл style.css и ищем ваш блок по названию. Привожу пример со своим блогом. Блок поста (статьи) у меня называется blok, блок левого сайдбара — col2, блок правого сайдбара — col3.
Я например хочу установить свою картинкe-маркер в левый сайдбар, т.к. там у меня много списков (рубрики, комменты, последний посты).
Я ищу в файлу style.css (с помощью поиска) название col2. Если у вас уже есть значение ul то меняем его на
ul{list-style-type:none}
Если нет такого, то вставляем по такому типу — название блока и код списка:
#col2 ul{list-style-type:none}
Далее вставляем код ul li
#col2 ul li{border-top:1px solid #e3e3e3;list-style-type:none;padding:11px 0px 0px 13px;background:#fff url(images/arrow.jpg) no-repeat}
естественно настраиваем свои значения.
Последний штрих — вписываем к значению background путь к картинке-маркеру. т.к. мы залили картинку в папку images, то путь прописываться в коде будет так:
background: url(images/arrow.jpg) no-repeat
Важно. Необходимо правильно настроить значение padding, т.к. если указать значение меньше чем высота картинки, то картинка видна не будет. Если сделать отступ меньше, то текст заедет на картинку.
Поэкспериментируйте со значениями.
В итоге у вас должны быть две строчки. где в background вы указываете путь к вашей картинке :
#col2 ul{list-style-type:none}
#col2 ul li{border-top:1px solid #e3e3e3;list-style-type:none;padding:11px 0px 0px 13px;background:#fff url(images/arrow.jpg) no-repeat}
Все интересующие вопросы можете задавать в комментах. Если что-то не будет получаться — помогу с настройкой списков на вашем блоге.
Очередной выпуск 100500 вопросов:
httpv://youtube.com/watch?v=2Rs2w3SSYZ0&feature=player_embedded
Комментирование закрыто.