Archived topic
Colour bullet points
10 replies · Started by Ronja on July 15, 2019
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.
Hi there,
Where can I see the list in your site?
Let me know :)
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... 🙈
Can you try custom-list instead of Custom-list as the class name?
Let me know :)
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.
Can you try this instead?
https://www.w3schools.com/howto/howto_css_bullet_color.asp
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;
}
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?
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;
}Yes! That´s it!
Thank you so much!! :)
No problem :)
