Изменить изображение маркера в списке используя CSS



Здравствуйте дорогие друзья, новые и постоянные читатели. Информация сегодня для вебмастеров, кто часто использует маркированный список в своих статьях, а кто время от времени тоже пригодится.

По умолчанию в маркированном списке обычно мы видим круг или квадрат, как на рисунке ниже.

Маркированный список с маркером круга

Можно конечно просто изменить цвет маркера. Шаблон изменить шаблон в стили CSS вставьте строку ниже, цвет подчеркнут.

ul { color: green; list-style-type: disc }

Маркер этот уже изрядно надоел, давайте изменим его на свою картинку. Пример Вы можете увидеть в этом блоге внизу статьи. Я установила пока галку, хотя пробовала много вариантов.

Вам нужно загрузить изображение в редактор блоггер или на диск компьютера, своё или выбрать на специальных сервисах, к примеру на этом. Размер должен быть не больше 16х16 px. 

Далее рекомендую создать маркированный список, правой кнопкой мыши нажмите по маркеру, и... просмотр кода элемента:

Просмотр кода элемента, смотрим значения маркера по умолчанию

Здесь нам важно посмотреть значения margin и padding, которые установлены для маркера в вашем блоге (на скриншоте справа, рядом со стрелкой). А дальше совсем просто: шаблон изменить шаблон, не забывайте о резервной копии. Раскрываем первую стрелку слева и смотрим стили CSS. 

Ищем строку .post-body li{. Я пересмотрела все свои тестовые блоги на родных шаблонах, конкретно такой строки нет, в отличие от сторонних. Поэтому выше строки ]]></b:skin> добавьте CSS для маркера

.post-body li {
                                    list-style:none; *// Убираем маркер;
                             list-style:url("адрес картинки");
}

Кому трудно вставить CSS в шаблон, другой вариант: дизайн-добавить гаджет-HTML/Script, сохраните внизу макета блога.

<style>
.post-body li {
 list-style:none;
                             list-style:url("адрес картинки");
}
</style>

На сторонних шаблонах такую строку найдете без труда. Добавьте стиль CSS, значения margin и padding после указанной строки в шаблоне уже есть, при необходимости можете корректировать.

И на этом у меня сегодня всё. Все вопросы в комментариях или в меню форма для связи. Всего доброго. 

Почитайте другие полезные статьи:

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 5/04/2016 Ярлыки ►


Открыть комментарии →

9 коммент. :

  1. Доброго времени суток Ольга! Ваш сайт кладезь и находка для таких чайников как я! Целый вечер пробовала поменять изображение маркера, но так ничего и не вышло! выше строки ]]> добавила .post-body li {
    list-style:none; *// Убираем маркер;
    list-style:url("https://3.bp.blogspot.com/-Al7ultoV720/V-QQyqLrOWI/AAAAAAAABT4/h-jtCSpJS30hjuwP2c8JwFZnjK8TC_3PwCLcB/s1600/01.png");
    }
    "Добавьте стиль CSS, значения margin и padding после указанной строки в шаблоне уже есть, при необходимости можете корректировать" может что-то еще надо добавить? У меня шаблон "венецианское стекло". По началу казалось ничего особенного, но так и не получилось! Как можно это исправить?
    И можно еще один вопрос не по теме? Вы как специалист по css и html, у вас столько фишек для оформления блога в блоггере, на сайте http://www.magentawave.com/2012/02/make-more-menus-on-blogger.html#more, увидела дополнительное серого цвета меню слева фиксированное, где и меню и поиск и кнопка вверх и вниз как говорится все в одном! Можно ли такую же доп.меню сделать для блоггер? С уважением к вам и вашему труду, Тата!

    ОтветитьУдалить
    Ответы
    1. Tata, Вы можете скинуть мне ссылку на скриншот, как Вы вставили CSS в шаблоне. Я сейчас проверила на тестовом блоге именно шаблон "венецианское окно", маркер изменился.

      Или другой способ: вставить дизайн-добавить гаджет-HTML/Script. Только код надо заключить в тэг style.
      В статье дописала вариант.

      По вопросу меню, обратитесь к Александру. У него такое меню и создано для блоггер, так как у самого блог на платформе блогспот.

      Удалить
  2. Благодарю за оперативный ответ! Доброго времени суток Ольга! Я вставила в гаджет, попробовала еще раз, но воз и ныне там, вот скрин на то как я вставила https://3.bp.blogspot.com/-g_HSuKfOeBY/V-T2tTcFVhI/AAAAAAAABUo/ZlmkITbhH1sRRgUjVOY1paKMwxjJr-G4QCLcB/s1600/2016-09-23_163002.png.
    По поводу меню почему к вам обратилась, увидела у вас в демо-блоге https://2.bp.blogspot.com/-suLQ94WwvfQ/V-T5J9K95KI/AAAAAAAABU4/fIu_qY1ddG4e1JhK0AEHksVPZvFAI_4FACLcB/s1600/2016-09-23_164053.png тоже боковую навигационное меню, очень понравилось, а вот описание статьи, как ее поставить у вас не нашла! Я, увидев у вас, что можно делать на блоггере, вдохновило меня создать еще один сайтик со всякими фишечками! С уважением к вам и к вашему креативному подходу! Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, удалите в шаблоне с секции CSS код в style, плюс строку "в код html" и все, что ниже в style удалить. Тем более, что сверху вставлен такой же стиль правильно.

      Меню в тестовом блоге создано на сайте Конструктор левого бокового меню, ссылка

      http://hello-site.ru/leftmenu/

      Правда не все настроенные функции меню работают.

      Удалить
    2. Ольга, доброго времени суток! Благодарю вас! Вот что значит опытный глаз специалиста, убрала этот отрезок. И о чудо! Решился вопрос по оформлению заголовка (тож был злободневный вопрос, хотела приукрасить названия сообщения, и все не получалось)! НО! как были точечки в списке, так и не хотят меняться на изображение! Уже и вариант гаджета пробовала, не хочет!!! В чем еще может быть "заморочка"? А за Конструктор вам мое отдельное почтение! Благодарю вас, буду пробовать приукрашать блог! С уважением к вам и к вашему труду! Тата.

      Удалить
    3. Tata, попробуйте изменить только цвет маркера, в самом начале статьи код CSS. Получится или нет?

      И скиньте мне ссылку на Ваш блог.

      Удалить
  3. Доброго времени суток Ольга! Благодарю вас за отзывчивость! Вот попробовала еще один вариант и получилось заменить, хотя в самом редакторе все равно эти точечки выставляются, а когда просматриваешь опубликованное сообщение, то все нормально вместо точек изображение!
    ul li {
    list-style-type:none;
    list-style:url("https://3.bp.blogspot.com/-Al7ultoV720/V-QQyqLrOWI/AAAAAAAABT4/h-jtCSpJS30hjuwP2c8JwFZnjK8TC_3PwCLcB/s1600/01.png");
    }. С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, маркер меняется при просмотре черновика и после публикации постов. В редакторе будут точки.
      У Вас с таким вариантом изменился только маркер? Просмотрите все ссылки, рядом есть изображения?

      Удалить
    2. Доброго времени суток Ольга! Да все поменялось! Благодарю вас за уделенное внимание! С уважением Тата!

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *