styling bullets

Hi Dale,

You could try this so the styles only apply to the content area:

.inside-article li:before {
    content: “§”; /* Insert content that looks like bullets */
    padding-right: 10px;
    color: #eb374b; /* Or a color you prefer */
}

Let me know if this helps.

So, apparently I hadn't done the GP Premium update when I posted the question. Now that I have, the original code no longer works to replace bullets, only to erase them. Not sure why that would be.

Hmm the update shouldn't have anything to do with those code.

Try clearing your browser cache or caching plugin if you are using it.

I don't have any caching and clearing the browser cache didn't help. When the site goes live, I'll link if this is still an issue.

Sounds good. Let me know :)

The site's now live and it's still not working. I altered the code slightly to add .inside-article to all properties because, without it, the padding in the navigation bar got screwy — but the bullets were missing in either case.

Also, https://jigsaw.w3.org/css-validator/validator pulled up "Value Error : content Lexical error at line 279, column 17. Encountered: "?" (63), after : "" ????????;" for the ".inside-article li:before " line

This is what my CSS looks like:

.inside-article ul {
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
}

.inside-article li {
padding-left: 16px;
}

.inside-article li:before {
content: “§”;
color: #eb374b;
padding-right: 10px;
}

Can you provide a link to your site?

Here is a page with a bulleted list: http://www.Janellereston.com/lustily-ever-after

Can you make sure there's no syntax errors in your CSS?: https://jigsaw.w3.org/css-validator/validator

I did. That's the only error that keeps showing up.

I'm seeing a couple errors when I validate it.

Can you remove all comments from the CSS?: /* comments */

Hi Tom,

I removed all the comments and it didn't make any difference on the website or in the validator. The validator gave me one notice about not implementing one of the webkit keyframes and two errors, both of which are contained in the bullet html:

119 Sorry, the at-rule @-webkit-keyframes is not implemented.

306 .inside-article li:before Value Error : content Lexical error at line 306, column 10. Encountered: "?" (63), after : "" ????????;

309 Value Error : content Parse Error [: 10px; color: #eb374b; } ]

I went ahead and deleted the CSS associated with line 119, but removing it didn't help in terms of getting the bullet CSS to work. I validated again and got the same two errors:

299 .inside-article li:before Value Error : content Lexical error at line 299, column 10. Encountered: "?" (63), after : "" ????????;
302 Value Error : content Parse Error [: 10px; color: #eb374b; } ]

This is the CSS (comments are not in the CSS on the site, only here for clarity):

.inside-article ul {
list-style: none;
padding: 0;
margin: 0;
}

.inside-article li {
padding-left: 16px;
}

.inside-article li:before { /*referred to as line 306/299 above */
content: “§”;
padding-right: 10px;
color: #eb374b; /* line 309/302 */
}

A-ha!

I just figured it out. My text editor reset the quotes to smart quotes. Criminy. Since I always set it to plain quotes, my only recourse is to blame the cat. She must have screwed up everything when she walked across my keyboard.

That or computer demons.

Thanks for your patience.

Glad you got it working! :)