[Resolved] Colour bullet points

Home Forums Support Colour bullet points

This topic contains 10 replies, has 2 voices, and was last updated by  Leo 7 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #958069

    Ronja

    I would like to have coloured and bigger bullet points for lists in my posts. I tried this CSS I found in the support area:

    ul.custom-list {
    list-style: circle;
    margin-left: 0.25em;
    }

    ul.custom-list li::before {
    content: ”;
    display: inline-block;
    width: 0.3em;
    height: 0.3em;
    margin: 0.2em 0.8em 0.2em 0;
    background-color: #149184;
    }

    If I insert this to my website I get a tiny black bullet with white filling and a square next to it.
    Could you please help me remove the square and colour the complete bullet in this colour: #149184? The background should be uncoloured so I guess I filled that in wrong as well.

    #958450

    Leo Customer Support

    Hi there,

    Where can I see the list in your site?

    Let me know 🙂

    #958816

    Ronja

    I inserted a test list into my latest post right at the top. I added “custom-list” to the additional css. Now suddenly it’s just a black bullet… 🙈

    #958834

    Leo Customer Support

    Can you try custom-list instead of Custom-list as the class name?

    Let me know 🙂

    #958907

    Ronja

    https://www.backpackertales.com/12-highlights-der-bay-of-islands
    Yep, now it went back to the circle and square. I just want a completely coloured circle.

    #959339

    Leo Customer Support
    #959836

    Ronja

    Hi Leo, thank you very much. I got it! And now I even have the bullet points without typing in custom-list in every post.
    This is the code I used:
    ul {
    list-style: none;
    }

    ul li::before {
    content: “\2022”;
    color: rgba(0,84,84,0.63);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    font-size: 1.1em;
    }

    #959920

    Ronja

    I´m sorry, but there´s one more thing. I just saw, that my menu now shows the blue bullets. Is there any way to remove them on the menu?

    #960325

    Leo Customer Support

    Try this instead:

    .inside-article ul {
        list-style: none;
    }
    
    .inside-article ul li::before {
        content: "\2022";
        color: rgba(0,84,84,0.63);
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
        font-size: 1.1em;
    }
    #960808

    Ronja

    Yes! That´s it!
    Thank you so much!! 🙂

    #961227

    Leo Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.