[Resolved] single post page

[Ghazi]

Hello guys
I want to make the single post page to be in one box
It means title, featured image, and content in one container

An example of a sample
https://imghostr.com/6f40d8_ht1

I am using a search template

[Leo]

Hi there,

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

Are you trying to remove the extra purple space?

Let me know 🙂

[Ghazi]

I don’t know what steps I should do.
I want the background of the content in a different color, for example.

What should I do?
I went to the element of the hero page “Post Header” but does not change the color of the header container only.
And when I add a new container, it becomes separate at the top of the content and at the bottom of the header?

[Fernando]

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.

[Ghazi]

I want to remove the body of the content and yes there is a space between it and the header, how?

[Fernando]

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.

[Ghazi]

The problem is the element page hero
There is a container by default included with the template
I do not know how to deal with this container. If I remove it, my formatting will be ruined. Frankly, I do not need it in the first place.

Well, look with me in the image attached to the article page. Here are the left and right margins, as you specified, how do I remove these margins

[Fernando]

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?

[Ghazi]

The login data is attached.
I am waiting for you. Please tell me what modification has occurred so that I can process the rest of my sites.

I am using a search template

[Fernando]

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

[Ghazi]

Great, when deleting an elements, the problem has already been solved

I have two questions:
First, how do I make a space between the header and the content?
Second, is it possible to make the featured image smaller? Determine the size of the width and length.

Element “Posts width” When deleting it, it actually removed the left and right margins
But frankly, it is important to determine whether it is possible to keep it but remove the margins.

I found a simple solution when going into customization > container > Container Width
And changing the value from 1200 to 800 pixels, the problem is solved, but this setting changes the entire site settings.
I just want the post page, is that possible?

[David]

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;
}

[Ghazi]

Thank you

One last question if you allow me
Is it possible to make the containers separate on the post page only?

[David]

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;
}

[Ghazi]

Thank you for your reply

But this code seems to work only on the blog page
It did not work on the article page

[Author]

Posts