[Resolved] styling bullets

Home Forums Support styling bullets

Viewing 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • #319505
    Dale

    Thought I’d style bullets on a new site using the following css:

    /* bullet style */

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

    li {
    padding-left: 16px;
    }

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

    It worked great for the bullets, but also added “§” over every menu item in the top navigation.
    navigation meu with bullet above every item

    Is there a workaround, or should I just stick with standard bullets?

    GP Premium 1.3
    #319537
    Leo
    Staff
    Customer Support

    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.

    #319916
    Dale

    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.

    #320113
    Leo
    Staff
    Customer Support

    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.

    #320692
    Dale

    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.

    #320787
    Leo
    Staff
    Customer Support

    Sounds good. Let me know 🙂

    #322603
    Dale

    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;
    }

    #322639
    Leo
    Staff
    Customer Support

    Can you provide a link to your site?

    #322764
    Dale

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

    #322893
    Tom
    Lead Developer
    Lead Developer
    #322953
    Dale

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

    #323144
    Tom
    Lead Developer
    Lead Developer

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

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

    #323164
    Dale

    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 */
    }

    #323168
    Dale

    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.

    #323184
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 29 total)
  • You must be logged in to reply to this topic.