Изменение стандартного маркированного списка

  • km_

    (@km_)


    5 лет, 11 месяцев назад

    Всем привет, такой вопрос, как легче реализовать изменение стандартных маркеров на нужную картинку или emoji

    Если использовать сначала

    
ul {
    list-style: none;
}

и потом

li:before {
content: "❄"
}

    то естественно применяется единый маркер независимо от list-style

    А как сделать так чтобы при выборе в редакторе WP стандартного списка был «мой маркер 1», а например при выборе кружка (list-style-type: circle) был «мой маркер 2»

    Встречал в интернете простой выход — заменить картинки точки (disc) и кружка (circle) своей картинкой, это бы мне подошло, но вот только не могу найти сами картинки, или эти картики по умолчанию не заменить?

    т.е. задача кратко: при выборе простого маркированного списка в редакторе применяется «свой» список, а при выборе другого типа списка, применяется «второй» свой список

Просмотр 2 ответов — с 1 по 2 (всего 2)
  • wpgear

    (@wpgear)

    5 лет, 11 месяцев назад

    самый простой способ:
    завернуть всю конструкцию UL внутрь блока DIV.
    И в этом DIV использовать разные классы. Например:

    
<div class="my_marker_one">
	<ul>Короли и Капуста.
		<li>... контент с маркерами Тип1 ...</li>
	</ul>
</div>

<div class="my_marker_two">
	<ul>Даня Шеповалов и Ослик Иа.
		<li>... контент с маркерами Тип2 ...</li>
	</ul>
</div>

    ну и остается написать пару строк CSS (для каждого класса)

    
.my_marker_one ul {
	list-style: none;
}
.my_marker_one ul li::before{
	content: "*снежинка";
	color: blue;
}
    Автор km_

    (@km_)

    5 лет, 11 месяцев назад

    Спасибо за ответ, а как тогда эти классы присвоить в редакторе по умолчанию, т.е. чтобы класс «my_marker_one» применялся при выборе списка в панели редактора https://monosnap.com/file/AA9MKp49nIlQadWFIShez4aRjQWKnV

Просмотр 2 ответов — с 1 по 2 (всего 2)
  • Тема «Изменение стандартного маркированного списка» закрыта для новых ответов.