[Resolved] Change background color on Single Post

[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.

[Leo]

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 🙂

[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.

[Leo]

So the body background?

Try this instead:

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

[Muhammad]

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

[Leo]

Try this:

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

Let me know 🙂

[Muhammad]

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

[Leo]

Edited the CSS here:
https://generatepress.com/forums/topic/change-background-color-on-single-post/#post-1012847

Let me know 🙂

[Muhammad]

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

[Leo]

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 🙂

[Muhammad]

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

[Leo]

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>

[Muhammad]

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

[Leo]

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 🙂

[Muhammad]

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

[Author]

Posts