Changing background color for List Block

Hi there,

Are you referring to the WPSP lists in the page linked?

If so you can try some CSS like this:

#wpsp-693 .wp-show-posts-inner {
    background-color: #000;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

You can find the ID by using the browser inspect tool of the element:
https://www.screencast.com/t/MM15aOmldBau

Edited my answer above so make sure you see it.

Hi Leo,

The the additional css will be helpful. So that i can just change the number code to a color and keep it in the blocks I want.

Regards
Vikram

Do you want all the lists to be the same color or different colors?

Hi Leo,

I think I was not clear in explaining. I want specific portion in my post to have a different color. Now those parts ( blocks) which are paragraphs are allowing a change in background color but the on which are list are not allowing. Attached is the test image of what I would like to do.

https://www.allabouthomes.in/temp/

Regards
Vikram

Hi there,

try adding a Group Block first, this allows you to add a colored background. Then add your list inside the Group

Hi David,

It has solved my issue, however if you check the below page, you will see some extra area towards the top and bottom of the list which is having background color. Is there a way to reduce the height of the area.

https://www.allabouthomes.in/bestwashingmachine/

Vikram

Try this CSS:

.wp-block-group__inner-container {
    padding: 10px;
}

Hi Leo,

After adding the CSS, It is gone from the top, but still there at the bottom. Also there is no gap between the group block and the next paragraph.

Regards
Vikram

Add this as well:

.wp-block-group__inner-container ul {
    margin-bottom: 0;
}
.wp-block-group.has-background {
    margin-bottom: 1em;
}

Hi Leo,

Thank you very much you are an expert.

Regards
Vikram

No problem :)