[Resolved] Changing background color for List Block

[Vikram]

Hi

I have stumbled upon a new issue. I have a post made of blocks. The list block is not allowing me change the background color like the paragraph block. Can you please help me with that.

Regards
Vikram

[Leo]

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

[Leo]

Edited my answer above so make sure you see it.

[Vikram]

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

[Leo]

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

[Vikram]

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

[David]

Hi there,

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

[Vikram]

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

[Leo]

Try this CSS:

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

[Vikram]

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

[Leo]

Add this as well:

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

[Vikram]

Hi Leo,

Thank you very much you are an expert.

Regards
Vikram

[Leo]

No problem 🙂

[Author]

Posts