[Resolved] Different Backgound Color for paragraphs

Home Forums Support Different Backgound Color for paragraphs

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #948590
    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/

    #948959
    Leo
    Staff
    Customer Support

    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 🙂

    #949037
    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.

    #949058
    Leo
    Staff
    Customer Support

    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 🙂

    #949138
    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.

    #949144
    Leo
    Staff
    Customer Support

    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;
    }
    #949151
    Leo
    Staff
    Customer Support

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

    The CSS should still apply.

    #949164
    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?

    #949169
    Leo
    Staff
    Customer Support

    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.

    #949190
    Devesh

    Cool, Thanks! This was useful to know.

    #949203
    Leo
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.