69
Views
6
Comments
CSS for list item background color
Question

Hi I'm using the following additional CSS on my Wordpress site with Astra theme, to change the background color of my lists:


/* THE WHOLE LIST */

.single-post .entry-content ul li {

background-color:  #F5F5F5;

}


But it only half-works, because it leaves white around the cells (see image).


When I manually select the list in Wordpress Gutenberg, and set the background color, it looks like this (which is what I want to achieve):

Would be great if someone could tell me how to get this right.

Thanks.

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi @Jonathan Rice ,

this is not a Wordpress forum, so it is not very likely you'll find an answer here.

Dorine

UserImage.jpg
Jonathan Rice

Doh! Thanks Dorine!

UserImage.jpg
vishal kheterpal

@Jonathan Rice I am not an expert but having a look on code i will suggest , you are adding background color to li and it is showing correctly there. You want to add background color on the ul.

So instead of this

.single-post .entry-content ul li {

background-color:  #F5F5F5;

}

try

.single-post .entry-content ul {

background-color:  #F5F5F5;

}


Just remove li and add background color to ul. It should work.

UserImage.jpg
Jonathan Rice

It works, you are an absolute star!

I did suspect I was coloring the wrong thing, but didn't know how to specify it.

You've saved me so much time!

Best regards!

UserImage.jpg
Jonathan Rice

I just noticed that this works on every list that I hadn't previously manually changed the color of..

I have a lot of previous lists that are gray, but I wanted to try a new color across the site.

I presume there is a way to force this change on the previous lists?

Thanks.

UserImage.jpg
Jonathan Rice

OK I figured it out by using !important


thanks again.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.