Skip to main content

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