Change bullet points custom bullets in yootheme
Add to, Settings / CSS - (CHANGE depending on your link path.)
/* Change the bullet point image */
@internal-list-bullet-image: "/images/graphics/bullet.png";
Add to each bullet list. (This stays the same.)
<ul class="uk-list uk-list-bullet">
Here it is to just copy.
class="uk-list uk-list-bullet"
Padding
.uk-list-bullet > ::before { left: -40px; }
.uk-list-bullet > * { padding-left: 40px; }
Further steps
Second bullet too
/* Bullet - Change the bullet point image */
@internal-list-bullet-image: "/images/graphics/list-bullet.png";
/* Bullet - Change the second indent bullet point image */
.uk-list-bullet li:before {
&:extend(.uk-list-bullet > ::before);
}
/* Bullet - remove the original bullet */
.uk-list-bullet li {
list-style-type: none;
}
/* Bullet - improve the layout */
.uk-list-bullet li:before,
.uk-list-bullet>::before {
background-position: 0 50%;
}
- Hits: 77