Lists with coloured texts / list icons

Activello
1

Hello there,

I searched the forum for this but didn’t found anything related, so here is another request.

As I want to highlight some of my lists, I have the problem that the bullet point or the number stays in the automatic colour (see picture below). I want them to have the same colour as the text has. Is there an option to manage that?

Apart from that I would like to know if there is a possibility to change the bullet point into another icon, like an arrow or something (picking a letter from the windings font e.g.)?

Thanks for your help
GibsonLG

2

Hi GibsonLG,

I hope you are well today and thank you for your questions.

As I want to highlight some of my lists, I have the problem that the bullet point or the number stays in the automatic colour (see picture below). I want them to have the same colour as the text has. Is there an option to manage that?

Could you please share me the page URL from your site where it is displaying so that i can help you to achieve it?

Apart from that I would like to know if there is a possibility to change the bullet point into another icon, like an arrow or something (picking a letter from the windings font e.g.)?

You can achieve this by developing custom CSS code as described on the following pages.

http://www.w3schools.com/cssref/pr_list-style-image.asp

Kind Regards,
Movin

3

Hello Movin,

thank you for your help.

The site isn’t online yet. What do you need to know?

Greetings
GibsonLG

4

Hello Movin,

the second solution doesn’t work out properly, cause the new ascii icon doesn’t replace the standard bullet point (which is standard in wordpress, I guess). Instead of just having the new icon, I now have both.

Is there any css code concerning the lists in the theme anyway? I haven’t found something apart from something in the widget and in search section.

I can live with the normal bullet points, but I would like to solve the colour problem at least. It doesn’t look very professional otherwise.

Thanks in advance!
GibsonLG

5

You can try changing the bullet colors by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

.entry-content ul, 
.entry-content ol {
    color: #696969;
}
6

Hi Movin,

thanks for that, but that doesn’t solve the problem at all - it IS the problem. :slight_smile:

If I want to highlight a list, I colour the text differently from the rest of the text (which is standardly coloured grey in the theme). But the problem is, that the numbers or the bullet points in the list don’t appear in that different colour as well, they stay in the standard grey. As I showed you in the picture below. I want the whole list to appear in the same colour that I picked (here it is #c71c77).

Do you unterstand what I mean? I would like to know how I can change the font colour of the WHOLE list, including bullet points or numbers before the text.

Thanks in advance for your solving approach!
GibsonLG

7

I am not sure why it is not working for numbers and bullet points on your site but it is working fine on my test site as shown in the attached screenshot.

Please make sure you are using the code correctly on your site and also try deleting all other custom CSS code and only using the provided one or try using below CSS code which is more specific.

.entry-content ul, 
.entry-content ol {
    color: #c71c77 !important;
}
8

Hey Movin,

of course your displayed CSS code works out. But the thing is that if I add this code, EVERY list becomes highlighted in the pinkish colour. But I want to highlight SOME lists, not all. If I do so, I put the colour to the text in the wordpress editor. And then the bullet points etc. stay in the standard grey.

I would like to be flexible at this point. Is that possible? Maybe there is an option to create a specific list-class?

Thanks forr your help!
GibsonLG

9

Ok then add the class highlighted to the lists that you want to highlight as following.

<ul class="highlighted"> 
....
</ul>

Then use the below CSS code.

.entry-content ul.highlighted, 
.entry-content ol.highlighted {
    color: #c71c77 !important;
}
10

Good morning Movin,

that works out finde. Thank you very much!

Greets
GibsonLG

11

You are most welcome here :slight_smile: