[Support request] Custom Bullet points

[James]

Hi I want my bullet points to be a blue arrow icon, does anyone know how to do this, or is this already in the theme? I’m struggling to make the content look good on this theme, it looks like a word document.

[Leo]

Hi there,

The theme doesn’t add any specific style to things like this – it’s all HTML so it would be the same in a twenty series WordPress theme.

Would something like this work for you?
https://codepen.io/PhillyWebGuy/pen/ObEZPW

[James]

Hi Leo,

I think you are on the right spot with customising the CSS.

But I do not wish for anything standard like black arrows, I was thinking more custom icons. E.G CSS code which lists a link to an icon?

Kind of like this

“.entry-content ul li{
font-weight: bold;
list-style-image:url(http://mysite.com/images/bullet-16×16.png);
}”

But due to my coding skills I am unsure about the code I should be using for my site, and also what would I use as the link? would I upload the custom icon to my WP and link to there? seems so confusing.

[Leo]

That should work. See example here:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_list-style-image

If so your CSS selector would be: .entry-content ul

And yes, upload the image to the media library then add the link in the url spot.

[James]

Thanks I checked the link but not sure how to incorperate.

Would I go into “additional CSS”

And add

.entry-content ul li{
font-weight: bold;
list-style-image:url(http://xxxxx.com/bulletpointsimage);
}”

[Leo]

Yup one of these methods:
https://docs.generatepress.com/article/adding-css/

[James]

So would this be the correct code for the theme I am using?

.entry-content ul li{
font-weight: bold;
list-style-image:url(http://xxxxx.com/bulletpointsimage);
}

[Leo]

Try this:

.entry-content ul {
    list-style-image:url(http://xxxxx.com/bulletpointsimage);
}

[James]

Cheers Leo,

I am thinking about using multiple bulletpoint images, so the first bullet point would be a circle with the number 1 in it, the second bulletpoint would be a cirlce with a number 2 in it ect,

Looking at other peoples code on different themes they would do it like this,

ul.mybullet1 li {
list-style-image:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-GOES-HERE');
}

ul.mybullet2 li {
list-style-image:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-GOES-HERE');
}

And then they would call it in the text of the content like this

<ul class="mybullet">
<li> bullet 1 </li>
</ul>

How would it work for this theme? as in the above code I cannot see an identifier to call the bullet point

[Leo]

Just make sure the name of the unique class matches in the CSS and HTML, which currently doesn’t:
https://www.screencast.com/t/8jgMpZMCJwkW

This is just HTML & CSS so would be the same regardless which theme you are using.

[James]

Hi Leo,

This worked perfectly, do you know how I could do the same with headers? E.G I want a blue line graphic image underneath H1, H2, H3, H4 and H5.

[James]

After double checking, the custom bullet point images only appear on posts and not pages

[Leo]

Try changing the selector from:
.entry-content ul
to
.inside-article ul

[James]

Just tried the “inside-article” now, it still works for posts but still does not work for pages.

[Leo]

Where can I see the example of pages with <ul>?

[Author]

Posts