[Resolved] GPP / Portfolio Template / Header / z index

[Jan]

Hi David,

I’m in the process of creating a sample post for a new site.

When setting up a background image at the very first container of the post I supposedly ran into a layer conflict with the header section, because the site logo and the 50% transparent background color of the header suddenly disappeared. I was hoping to address this by assigning a low z-index value to the first container, but it does not work.

Option 1: I could include a background picture using the Elements feature instead, which, however, would require my to set up a page hero for every single post.

Option 2: I can correct the layer structure by assigning the correct z-index values.

How would you go about implementing Option 2 following WP best practices?

Thanks in advance.

Best,
Jan

[Ying]

Hi Jan,

I think using block element – page hero for all posts is a good option.

Since GPP 2.0 we introduced dynamic features to the block element, you can set the container background image to featured image.

Then use a Header element just for merge purposes.

This video should help:
https://www.youtube.com/watch?v=TP8mgBQTgGg&t=1s&ab_channel=GeneratePressGeneratePress

This is the documentation of the block element – page hero:
https://docs.generatepress.com/article/block-element-page-hero/

Let me know if you need further assistance 🙂

[Jan]

Dear Ying,

meanwhile I was able to setup the page hero and merged it with the page header.

As suggested in your video I also added the title to the page hero. Now I’d like to apply the styles from the former title section (see markup #1 in the screenshot) to the new title section in the page hero (see markup #2 in the screenshot).

I sense that this could either be done in html field of the page hero (in the Elements section) or via CSS in the Customizer.

As a first step I have added a class element (named “posts”) to the page hero in order to apply additional styles only to this part of the page.

Then I identified the relevant element using the chrome debugger:

/* GPP post hero */ /* Add styles to title, author, date */

.grid-container {
    background-color: #ffffff;
}

Last but not least I retrieved the missing styles from former title section:

{“uniqueId”:”1ab019b1″,”isGrid”:true,”gridId”:”1dc9b4d7″,”width”:80,”widthTablet”:100,”paddingTop”:”20″,”paddingRight”:”20″,”paddingBottom”:”10″,”paddingLeft”:”30″,”paddingTopTablet”:”20″,”paddingRightTablet”:”20″,”paddingBottomTablet”:”20″,”paddingLeftTablet”:”20″,”paddingTopMobile”:”20″,”paddingRightMobile”:”0″,”paddingBottomMobile”:”20″,”paddingLeftMobile”:”10″,”marginTop”:”-150″,”borderSizeLeft”:”4″,”borderColor”:”#92bb20″,”backgroundColor”:”#ffffff”,”backgroundColorOpacity”:0.8,”zindex”:3,”showAdvancedTypography”:true,”isDynamic”:true}

Please let me know how to best bring these puzzle pieces together.

Many thanks in advance,
Jan

[Ying]

I’m confused, you are using Generateblocks in the block element, right?

If so, you can create the same style within the block element easily. I believe there’s no CSS is required.

Here’s the documentation of GB which should be helpful:
https://docs.generateblocks.com/

Let me know if I miss anything 🙂

[Jan]

Hi Ying,

…by means of making things simple I removed the page hero altogether and just used an Element to merge the header with the first content section. The image of the post is now embedded in the background of a GenerateBlocks container (see screenshot). I linked the revised post in the section below for your reference.

Question: How can I make the background image become the featured image of the post? (see markup #1 in the screenshot)

I found this related threat from Tom: https://generatepress.com/forums/topic/featured-image-on-single-post-as-div-background/

Is there an easier way than adding a GP Hook?

Many thanks,
Jan

[David]

Hi there,

thats not currently an option in the Block editor.
It requires a Block Element to display a dynamic background image

[Jan]

Hi David,

many thanks for clarifying this.

Meanwhile I was able to set up the Block Element/ Page hero with a dynamic background image. Which option do you recomment me to use for adding styles to the page hero? In the GenerateBlocks-version of the header I styled the post title and apply a shape at the bottom of the background image (see screenshot 1).

Is WP Customizer and additional CSS the best way to achieve this? I so, we probably need a new class element to link relevant CSS code snippet to the relevant hero (see screenshot 2).

Please let me know.

Thanks,
Jan

[David]

Sorry little confused – why the need for a Block Element and a Header Element ?
And what particular styles do you require ?

[Jan]

Hi David,

yes you are right, the post currently has both. The intention is to remove the lower section as soon as we were able to apply the styles to the upper section.

Pls. see screenshot for more details regarding the styles.

Regards,
Jan

[Ying]

You just need to create the same style in a block element, select page hero as block type.

Leave the content area of the Header element blank.

[Jan]

Hi Ying,

my sincere apologies for taking up this much of your valuable time.

I sense that we are almost there. The styles are now in place and the page hero well positioned. One final question. How do I need to adjust the z index of the page hero in order to unhide the header logo?

Please note that I added a negative top-margin in order to merge hero and header section (see screenshot).

Best regards,
Jan

[Ying]

Don’t worry about that, I’m here to help 🙂

You just need to add this CSS to cutomizer > additional CSS:

.site-header {
    z-index: 2;
}

[Jan]

Hi Ying,

this works very well.

How can we apply the z-index setting to the tablet and mobile mode as well?

Thanks,
Jan

[David]

Hi there,

change the CSS Ying provided to:

.site-header, .mobile-header-logo {
    z-index: 2;
}

[Jan]

Wonderful. Thanks David

[Author]

Posts