Маркер списка css и его оформление
Люблю копаться в css файлах. Это те, которые содержат код, настраивающий всё оформление вашего блога. Сегодня я расскажу как оформить и настроить список и свои картинки для маркированного списка на блоге через css.
Можете еще посмотреть интересную статью по затемнению картинок через css, которая нашла много хороших отзывов: Как затемнить картинку через css.
Порядок такой: Я объясню какие команды отвечают за оформление списков, расскажу отдельно по каждой настройке, после этого расскажу как сделать свою картинку-марке для списка
Если у кого то будут возникать вопросы по другим маркировкам, то спрашиваем в комменты.
Код, формирующий список в css
код ul — формирует список в css. С помощью него можно задать, какой маркер из стандартных может выводиться. Стандартные маркеры: кружок (circle), точка (disk) и квадрат (square).
Например, если в файле вашего блога style.css будет запись вида
то все списки будут выводиться с маркером-кружочком. Для того, чтобы для каждого блока задавать свою картинку вместо маркера, код ul должен не иметь значения и записываться в таком виде:
где конкретно это необходимо будет прописывать я укажу ниже.
Код, формирующий картинку вместо маркера
Для того, чтобы использовать вместо стандартного маркера свою картинку, используется код ul li. У него есть значения, которые необходимо будет настроить.
Для красивого отображения нашего списка, я думаю, прописать лучше каждый элемент, но это у кого как горит. Если не интересно, крутите до кода 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 li
естественно настраиваем свои значения.
Последний штрих — вписываем к значению background путь к картинке-маркеру. т.к. мы залили картинку в папку images, то путь прописываться в коде будет так:
Важно. Необходимо правильно настроить значение padding, т.к. если указать значение меньше чем высота картинки, то картинка видна не будет. Если сделать отступ меньше, то текст заедет на картинку.
Поэкспериментируйте со значениями.
В итоге у вас должны быть две строчки. где в background вы указываете путь к вашей картинке :
Все интересующие вопросы можете задавать в комментах. Если что-то не будет получаться — помогу с настройкой списков на вашем блоге.