Archived topic
Change background color on Single Post
17 replies · Started by Muhammad on September 18, 2019
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.
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 :)
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.
So the body background?
Try this instead:
body.single, body.page {
background-color: #fff;
}
Works like a charm. Thanks. Also how to centralize title of the post and Date and Author name. ?
Try this:
body.single .entry-header {
text-align: center;
}
Let me know :)
it works on single post but at the same time it also centralizes headings on home page. I want it only single post.
Edited the CSS here:
https://generatepress.com/forums/topic/change-background-color-on-single-post/#post-1012847
Let me know :)
Works perfectly. and last thing. How to change width of title to 1020px?
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 :)
hi. I have created it. Please provide the CSS. Thanks.
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>
thanks works perfectly. But how to reduce padding below the title and date and author.
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 :)
Thank you.. you have been very helpful. Appreciate it.