Change bullets color in a list without coding

[IlanaDR (Ilana Savir De Rivas)]

I’m a new user of Webflow and I don’t know HTML or CSS AT ALL. I looked for a solution in the forum on how to change the color of the bullets and all the solutions involve code. the problem is that nobody tells you where to stick the code.
So I found a workaround without code:

1. chose the list in the navigator and change its color. now the whole list is in a different color.
2. chose 1 list item from the navigator and click it until the cursor appears in the text. chose the whole text.
3. now the small dashboard appears with B I link etc. Italicize the whole text.
4. now a new item appears in the navigator “italic text”. choose that item.
5. through the typography section in the style editor change the text color to black and unitalisize it.
6. repeat with each list item.
   Now my bullets are red and my text is black.
   I saved it as a class and use it all over my blog and it works!!

[Stan (justAnotherDeveloper)]

Hi @IlanaDR and welcome it is a nice approach but there is a lot of articles outside how to do that. Just suggestion that there is no need to reinvent the wheel.

Finally, it Will Be Easy to Change the Color of List Bullets | CSS-Tricks

[IlanaDR (Ilana Savir De Rivas)]

Hi, Stan, I looked through the whole forum and only found how to do it with CSS code snippets. Since I really don’t know anything about CSS and where to stick those various snippets - believe me, I tried - I had to find an alternate solution.
Hopefully, it will help laymen like me that don’t know how to work with CSS.
If there is a simpler solution without code lines I would love to know about it and will really appreciate a link.

[Stan (justAnotherDeveloper)]

hi @IlanaDR Webflow is just nice tool that makes website build much easier but have to follow some given rules such HTML syntax and CSS. What I mean is when you looking for some HOW TO solution your first step should be Google search and not webflow forum as on this forum you can find mainly solutions specific to this platform.

If you want to be good on web design you HAVE to learn basics at least HTML and CSS. No-Coding is great marketing word but in general doesn’t make any sense because without basic knowledge of tools for this industry there will be more headaches than joy.

[IlanaDR (Ilana Savir De Rivas)]

OK, got you.
But I’m not a web designer.
I have a personal blog that I moved to Webflow from WordPress because I got tired of all the bugs, and needed a platform that supports RTL.
Is there a place to find solutions that are more compatible for people like me?
Basically, some experience working with page builders - Thrive Themes & DIVI - and no knowledge in actual web design?

[Stan (justAnotherDeveloper)]

Hi @IlanaDR page builders are also great tools that make page structure & design for WP sites much easier but when you want something more than predefined solutions or customise these there is need to know how things works and what and how to do that.

I understand to your enthusiasm and excitement after solving problem on your own and discover a new CSS word. Like I have mentioned these task can be easily solved just by knowing basics of CSS. Internet is full of great articles solving any issues you will come across on your journey.

I have already post article from CSS-tricks where you can find 99% solutions about CSS and there is much more sources as Smashing magazine, CodePen, StackOveflow, Sitepoint, Medium, CSS in real life, DEV, CSS Layout news etc. and of course this forum to find solutions for this platform.

[IlanaDR (Ilana Savir De Rivas)]

OK, Thanks.
I’ll see about that.

[spirelli]

Change list bullet and color with simple custom code in Webflow

This very easy custom code seems to work to change the style of bullets in a list: <style> ul li::marker {color: red;} </style> Makes me think how easy it should be to allow this customisation to be part of the Webflow UI. Coloured bullets seems to be something that many designers would want to do… And specifying a different bullet would be this <style> ul li::marker {color: red; content: "►";} </style> Only been possible fairly recently, but support seems to be alright now:

[Jonathan_Puckett]

I figured out a Webflow hack for this that doesn’t require code!!

1. Change the list item’s color to the color you want your bullets (or numbers) to be.
2. Then highlight the text inside of the list item and select “wrap with span”. This allows you to apply separate styling to the highlighted text.
3. Then change the color of the text!

Hope this helps someone out!

[mmkomadina (Melissa)]

Nice! I don’t have this option on my end but maybe it hasn’t been rolled out to me yet…

[mmkomadina (Melissa)]

Thanks for sharing! This worked for me too.

[Elton_Gregory]

Change the bullet text item to a link (but don’t link it to anything, then you can colour the linked text whatever colour you want.

[patryk.design (Patryk)]

Yup, that is the best no-code solution. I’m doing the same

[srcarlisle (Steven)]

Another option for #3 and #4 is to select the paintbrush icon and then change the color.

[ThomasEpton]

All you need to do it add this code to the of the page you want the bullet points to change colour.

1. Go to page setting

2. Scroll to the bottom, where the custom code sections are

3. Copy and paste this code into the ‘inside the section’

::marker { color: #007bff; }

4. Change the color HEX code to whatever you want