[Resolved] Is this possible?

[Swadhin]

Hi There, is it possible to have the page layout that is shown in this page (I am taking about the blue header that continues a bit inside the article and sidebar container.

If yes, please guide me how?

Also is it possible to set such headers different for each category? Like a different colored header for a different category?

Thanks,
-Swadhin

[David]

Hi there,

so first off you would need to create some header elements for your posts:

https://docs.generatepress.com/article/header-element-overview/

You can use the Display Rules to assign each header element to different Post Categories.
Make sure you add some padding and content which can be dynamic by using the template tags provided e.g {{post_title}}

Once you have them you can use this CSS:

@media (min-width: 769px) {
    .single-post .page-hero + #page {
        margin-top: -100px; /* inrcrease -neg for greater overlap */
        }     
}

It forces the #page content up over the header on single posts but only when there is a Header Element present. You can make the margin-top a greater negative number to move it higher. Just make sure the Header Element has enough bottom padding to cover this.

[Swadhin]

Hi David,

Thanks so very much… I tried doing it. You’d be amused by seeing the URL I have added in the site URL box. 😛

I tried adding image (you can see how it shows) and I don’t know why the {{post_title}} {{post_author} {{post_date}} etc don’t display with styles they used to. Plus there is no gap between the lines.

Also, David, does this cause an issue SEO wise? Because I don’t see an H1 tag (also the date shows as pulished, not last updated), also I don’t know if this element affects the other non-element using pages like blog page etc.

Can editing like this break a theme or break the theme’s SEO?

[David]

Almost there 🙂
So Header Elements place images as backgrounds using the cover property, so they always fit the screen. You therefore need to add images that have a similar aspect ratio to the header element.

Alternatively in the Header Element > Element Classes add: bg-contain
Then this add this to your CSS:

.page-hero.bg-contain {
    background-size: contain;
    background-position: 80% 50%;
}

Then wherever you are using this type of image just add the bg-contain class.

The template tags just output their content so you need to add some HTML around them e.g

<h1>{{post_title}}</h1>

[Swadhin]

HI David,

It works well. Thank you. 🙂

The last updated thing still shows the published date and not last updated date.

How to add the image (the wp icon on the side of the header) like the page https://themeisle.com/blog/cheapest-email-marketing-software/

How to add my gravatar and all in the post meta.. like it is on this blog post. https://www.digitalgyd.com/how-to-start-a-blog/ (the staging site has the same code).

-Swadhin

[David]

So this CSS to show Updated Date:

.page-hero time.published {
    display: none;
}
.page-hero time.updated {
    display: inline-block;
}

You can position the background image in the Header Element, but i have updated the CSS here the 80% is the horizontal position ( 100% would be the far right ). You can tweak that accordingly.

This Hero example from Leo shows how you can include the Avatar:

https://docs.generatepress.com/article/page-hero-examples/#example-2

[Swadhin]

Hi David,

Thanks so much.. It worked perfectly as intended…

The image isn’t showing at all and the updated date is displaying on a new line. 🙂

UPDATE: The image is showing now, I just made the BG color a bit transparent. 🙂

[David]

Edited this CSS to keep the updated date inline

[Swadhin]

Hi David,
This helped… Thanks so much. 🙂

Learnt a lot in the process so thanks again. 🙂 _/\_

[David]

You’re welcome. Glad to be of help

[Author]

Posts