Bulleted lists with a custom icon just look…finished. Like the website designer cares about every little detail. And, believe it or not, it is super easy to do.
I just finished a site for a personal chef who specializes in vegan/vegetarian cuisine. She wanted her favicon and her bullets to be in the shape of a leaf.
First task – you need to locate a spot in the theme to modify your CSS. Some themes come with a special spot, others do not. If you can’t find it, use Jetpack’s “Edit CSS” module. If you don’t have Jetpack installed, go get that first!
For those who have it installed, we’re going to go to APPEARANCE > EDIT CSS. This is where you’ll paste your bulleted list customization.
For now, I want you to paste in the following code:
.entry-content ul li {
In essence, this means in your entry content, we’re going to customize the unordered list, using the list items. ul li get it? The code we’re going to put in is in between the two brackets.
Second task – Now let’s make a cool little icon okay? Try to find something that works for your client’s site in terms of color and branding. If you have a favicon, you can use that as well. A few points to keep in mind:
- You want the icon to work well at a very small size.
- Create the icon in a perfect square around 200×200. Then shrink it down to 16×16.
- If you aren’t artistic, that’s okay. You can get something at CreativeMarket!
- Use PicMonkey, Canva, or Photoshop to create and size your image.
When your image is ready, upload it into your Media Library and then copy the URL of the image.
Go ahead and paste it in between the curly brackets on your CSS page.
.entry-content ul li {
https://www.fabulousblogging.com/wp-content/uploads/2015/09/favicon.png
}
Third task – just a bit more code and you’re all set. You have to add a few things before and after the url so the CSS knows what to do with your image.
- Put the URL in parentheses like this: (http://www.thedomainname.com/wp-content/uploads/2015/09/favicon.png)
- Add a semicolon at the end like this: (http://www.thedomainname.com/wp-content/uploads/2015/09/favicon.png);
- Then add this before the URL: list-style-image: url This is telling your theme what element will take on the form of the image
- So it should look like this when you’re done:
list-style-image: url(https://www.thedomainname.com/wp-content/uploads/2015/09/favicon.png);
All together now!
.entry-content ul li {
list-style-image: url(https://www.thedomainname.com/wp-content/uploads/2015/09/favicon.png);
}
Save your style sheet and then create a bulleted list on a page or post. Or, if you’ve already used them somewhere on the site, go take a look and see how it turned out. You’ll have to see it in PREVIEW or LIVE mode, as it won’t show in the edit screen.
