[Resolved] Change background color on Single Post

Home Forums Support [Resolved] Change background color on Single Post

Home Forums Support Change background color on Single Post

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1012783
    Muhammad

    Hi. I want to change the background color on single Post only. If i change the background color from customizer, it changed across site. I need to change for other than archives pages.. which essentially means only for single post and single page.

    #1012814
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    .single.separate-containers .inside-article, .page.separate-containers .inside-article {
        background-color: #000;
    }

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

    Let me know if this helps πŸ™‚

    #1012818
    Muhammad

    it changes the background to black. I want to change background of the container on single post to white and not the post content background.

    #1012833
    Leo
    Staff
    Customer Support

    So the body background?

    Try this instead:

    body.single, body.page {
        background-color: #fff;
    }
    #1012844
    Muhammad

    Works like a charm. Thanks. Also how to centralize title of the post and Date and Author name. ?

    #1012847
    Leo
    Staff
    Customer Support

    Try this:

    body.single .entry-header {
        text-align: center;
    }

    Let me know πŸ™‚

    #1012856
    Muhammad

    it works on single post but at the same time it also centralizes headings on home page. I want it only single post.

    #1012863
    Leo
    Staff
    Customer Support
    #1012882
    Muhammad

    Works perfectly. and last thing. How to change width of title to 1020px?

    #1012887
    Leo
    Staff
    Customer Support

    Not possible to break out the title block from the content container.

    A workaround solution would be to create a header element with the template tag:
    https://docs.generatepress.com/article/header-element-overview/
    https://docs.generatepress.com/article/header-element-template-tags/#post_title

    You can see some examples here:
    https://docs.generatepress.com/article/page-hero-examples/

    Once you do that, I can provide the CSS to change the width of the header element.

    Let me know πŸ™‚

    #1012901
    Muhammad

    hi. I have created it. Please provide the CSS. Thanks.

    #1012950
    Leo
    Staff
    Customer Support

    This should be the CSS:

    body .inside-page-hero.grid-container {
        max-width: 1020px;
    }

    You will want to wrap the template tag with <h1> like this:
    <h1>{{post_title}}</h1>

    #1012954
    Muhammad

    thanks works perfectly. But how to reduce padding below the title and date and author.

    #1012968
    Leo
    Staff
    Customer Support

    I would recommend adding the date and author along with the page title in the page hero content as well:
    https://docs.generatepress.com/article/header-element-template-tags/#post_date
    https://docs.generatepress.com/article/header-element-template-tags/#post_author

    Let me know πŸ™‚

    #1012973
    Muhammad

    Thank you.. you have been very helpful. Appreciate it.

Viewing 15 posts - 1 through 15 (of 18 total)
  • The topic ‘Change background color on Single Post’ is closed to new replies.