Custom Bullet Point Images

jbpaul17 · Member · Aug 1, 2014 at 11:10 pm
Copy link

Add topic to favorites
Is there a way to edit the currently displayed bullet points? I’d like to use something that’s a little less “business” and a little more “child”/”preschool”, but cannot seem a way to alter that. I’m hoping there’s a way to do so with a CSS edit. Any assistance you may be able to provide would be greatly appreciated… thanks!

The blog I need help with is: (visible only to logged in users)
francisbob · Member · Aug 1, 2014 at 11:34 pm
Copy link
Hi !

Using the ::before selector, it’s possible to use any image you want as a bullet point. Could you find an image to would suit you ? I’ll assist you with the CSS part afterward.
jbpaul17 · Member · Aug 3, 2014 at 3:19 am
Copy link
You can use these two as examples, please and thanks!
francisbob · Member · Aug 7, 2014 at 8:29 pm
Copy link
Hi there !
```
.entry-content ul li{
  list-style-image: url('https://oswcca.files.wordpress.com/2014/08/bullet-point_purple.gif');
}
```
But you’ll need to make a proper list by pressing the ‘Bulleted List’ icon for it to work.
jbpaul17 · Member · Aug 8, 2014 at 5:15 pm
Copy link
@francisbob – if I wanted to use a couple different colored versions of the image I’ve found, what would be the specific CSS for that?
francisbob · Member · Aug 8, 2014 at 5:28 pm
Copy link
You can alternate colors (not randomize them) by using something like that :

.entry-content ul li{
list-style-image: url(‘img1’);
}
.entry-content ul li:nth-child(2){
list-style-image: url(‘img2’);
}
.entry-content ul li:nth-child(3){
list-style-image: url(‘img3’);
}

Or you can assign a specific color to a list by using this :

CSS:
```
.entry-content #listequelconque{
  list-style-image: url('img');
}
```
In the Post editor, go in the ‘Text’ tab and you’ll see your lists ( they begin with
```
<ul id="listequelconque">
	<li>ITEM 1</li>
	<li>ITEM 2</li>
	<li>ITEM 3</li>
	<li>ITEM 4</li>
</ul>
```
Hope this helps !

No items found.