[Resolved] single post page

Hi there,

Looks like you are very close – what is missing currently?

Are you trying to remove the extra purple space?

Let me know 🙂

Hi Ghazi,

Changing colors can most often be done through Appearance > Customize > Colors.

For instance, to change the Background color of the Content, go to Appearance > Customize > Colors > Content, and change the background color there.

Reference: https://docs.generatepress.com/article/global-colors-overview/

If the color doesn’t change through this setting, then we’ll check if it’s set through a different one. For instance, colors can also be set through GenerateBlocks.

Sorry, I can’t seem to understand.

Can you expound more on wanting to “remove the body of the content”?

As for the space between the content and the Header, you seem to have a Block Element causing the issue. Can you check the Block Elements you have in Appearance > Elements, and look for one that just has a Container Block in it? It’s likely the one causing the issue.

What specific template did you use? Inherently all added Block Elements of templates have content inside them? Would you like all the spaces removed?

Can you provide admin login credentials so we can take a look at your site closer and assess the best approach?

Thank you! To clarify, do you want to remove the Block Element – Page Hero that adds space after the Header?

If so, just set Block Element named Post Header to draft in Appearance > Elements.

Then for the Post content left and right spacing, there’s a Layout Element called Post Width in Appearance > Elements. This limits the width of the Posts’ content. You can also delete this element or set it to draft to remove the space. See: https://share.getcloudapp.com/BluRLKl0

Hi there,

1. Set the Customizer > Layout > Container -> Container width to 1200px ie. the value you want for the entire site.
2. Add this CSS to set the Single Post width and remove the additional top margin:

.single-post #page.grid-container {
    max-width: 800px;
}
.single-post .content-area {
    margin-top: 0;
}

If you want to change the body background color to highlight the post content then add this CSS:

.single-post {
    background-color: #fafafa;
}

Try adding this CSS:

.generate-columns .inside-article > *:not(.post-image) {
    padding: 0 10px;
}
.generate-columns-container .post {
    margin-bottom: 10px;
}
.generate-columns .inside-article {
    background-color: var(--background-2);
    padding-bottom: 20px;
}
body:is(.blog, .archive) #page {
    background-color: transparent;
    padding: 0;
}
body:is(.blog, .archive) #content {
    padding: 10px;
}