Archived topic
Creating post header element
7 replies · Started by William on December 4, 2020
Hi there,
I am wanting to create a post header element that looks something similar to:
- This when there is a featured image and
- This when there is not a featured image
Both use the excerpt too. My sandbox for working is here.
The thing I struggle with is how to get the content looking the way it does, including the category with the look of a box letter from the first letter of the category, with a random color assigned to each individual category.
Hi there,
Sorry are you referring to this part here?
https://www.screencast.com/t/oAHuK4EDQmi3
I'd assume it would require a custom solution unfortunately.
Ah okay - let's say I would like the category still appearing where it is in the post header, what would be the way to replicate the header except for that custom solution bit?
If you add the three items you want in the header element content first, I can give you the CSS to space them that way.
Okay, I’ve created something similar to what is needed here.
So reduce the header padding to where you want the category to show, then add this CSS:
.page-hero .meta-category {
padding-bottom: 300px;
}Is there a way so that when there is not a featured image, such as with this post, it will actually default to a post header element such as this?
Take a look at the third snippet here:
https://docs.generatepress.com/article/generate_header_element_display/
Adding PHP: https://docs.generatepress.com/article/adding-php/
That's absolutely brilliant, you're a star, thank you!
No problem :)
