Streaming live at 10am (PST)

How to add colour to bulletpoints


#1

Hello all,

I've added a list to my hosting page but would like to change the colour of the bullet points, I searched the forum and came across a thread which said if I add the following to custom code into the head.

li
{
color: #0F0;
}

I've published the website to take effect but the bullet points remain the default.

https://preview.webflow.com/preview/dlux?preview=61794315af9c601c95a7be039ef9b75b

Best regards,
Matt


#2

Hi Matty!

What you would do is to change the "li" class name in your custom code to the class name for your list that you have set up inside the Webflow designer. Try that and shout if it doesn't help. smile


#3

Another option, if you want to customize them further, is to select "No Bullets" in your list settings. After that you can add a div inside the list item and style it like a bullet or simply add an image to serve as a bullet.


#4

Hello Steven,

Thanks for the reply, I tried the 2nd option as it seems a little more straight forward but kept flagging me with red error saying only list items can be directly added to the list.

With the 1st option in my custom code I have the following;

li
{
color: #0F0;
}

Would this need to change?


#5

Well regarding the 2nd option is that you have to put the div or image inside the list item, not the list itself. Putting stuff other than list items inside a list will cause that red alert.

Regarding the 1st option: yes, it might. Try this:

.your-list-class-name
{
color: #0F0;
}

#6

@StevenP

Thanks for help that seems to have worked, however its changed the colour of my whole list rather then just the bullet points?


#7

Yes, it will..so you have to overide that by styling those elements you don't want in red. So if you want the bullet to be in red, but the text in black, just drag in a text element in side the list item and style it with black text color.

(It's a bit of guessing from my side here since i can't access that Dashboard -> Custom Code part of your site to test things out)


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.