[Resolved] Different Backgound Color for paragraphs

[Devesh]

Is there any way in generate press to have a different background color for a particular paragraph in the blog post like in this page-https://www.kitchenarena.in/best-washing-machine/

[Leo]

Hi there,

Nothing built-in for this but you can just use simple HTML inline style:
https://www.w3schools.com/html/html_styles.asp

Let me know if this helps 🙂

[Devesh]

I am afraid I still don’t get how to apply this HTML to a particular paragraph.
Can you share some specific details on how do I execute this in generatepress?

Also, it would be great if Generate Press can introduce this as a feature, as some other themes do provide this as a default option. It really gives a good effect and better readability.

I also tried this with Gutenberg block by formatting the background color of the para block. But that seems to disturb the block’s text alignment as well and there seems to be no option to restore the alignment for such para.

[Leo]

This would be the HTML:
<p style="background-color:#000;">Different background color for paragraphs</p>

This isn’t something we would add to GP as it rarely gets requested and can be accomplished with some very simple HTML.

Let me know if this helps 🙂

[Devesh]

While this adds background color, the formatting is not clean (as shared in my earlier link) and text almost touches the border. Check this page.
I am a bit surprised that this cannot be added as a feature, while this is not difficult for you to add.
It is tedious to change the html code of each para block, add the color code and also the formatting is not clean, which may require further changes.

[Leo]

It’s certainly not difficult for us to add, but keep in mind that we only want to add features that are useful for majority of users so we keep the theme and plugin as light as possible.

If we do add features like this, then we would need to introduce extra controls such as text color, background color, padding option, mobile padding option, text alignment options etc and you can see how the list goes on and on.

Would it be better if we use a class instead?
<p class="special-background">Different background color for paragraphs</p>

Then target it with CSS:

p.special-background {
    background-color: #000;
    padding: 20px;
    border: 1px solid #fff;
}

[Leo]

You can add custom class within block editor as well:
https://www.screencast.com/t/t4yqMzuDT

The CSS should still apply.

[Devesh]

Ok. Thanks.
If I understand correctly, the CSS can be added at the web page level. And the HTML code for para class to be added to each para where I want to use a different background color.

Please confirm if this is correct. Also, can I also add a border to this para?

[Leo]

I would recommend adding that CSS to a global editor so you can use the class everywhere:
https://docs.generatepress.com/article/adding-css/

Then if you are using the block editor, simply add the content inside a paragraph block and add special-background in here when you want to apply special style:
https://www.screencast.com/t/t4yqMzuDT

I’ve edited the CSS above to include border.

[Devesh]

Cool, Thanks! This was useful to know.

[Leo]

No problem 🙂

[Author]

Posts