Adding article overview in header element

Hi there,

You can use custom field in page hero:
https://docs.generatepress.com/article/header-element-template-tags/#custom_field-name

Let me know if this helps :)

Thanks Leo! This works great. I just added the custom field '{{custom_field.overview}}' and inserted it into my single post header.

I'm wondering if it's possible to stylize the custom field with CSS. Currently, my single post setup looks like this (here's a link)...

https://imgur.com/RVF0a61

...and that's using this html in the header:

<h1 class="header">{{post_title}}</h1>
{{custom_field.overview}}
<div class="image">
    <h4>Medically reviewed by: <a href='https://perfecthairhealth.com/about#medical-team/'>Po-Chang Hsu, M.D.</a></h4>
    <img src='https://perfecthairhealth.com/wp-content/uploads/2019/07/Po-Chang_Hsu-small.png'>
</div>

...and this CSS (from my previous support post):

.page-hero.reviewedby .image {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .page-hero.reviewedby .image {
        flex-direction: column;
    }
}
@media (min-width: 769px) {
    .page-hero.reviewedby .image img {
        border-left: 1px solid #fff;
        padding-left: 20px;
    }
    .page-hero.reviewedby .image h4 {
        padding-right: 20px;
    }
}

h1.header {
    letter-spacing: 2px;
    margin-bottom: 4em;
}

If possible, I'd like to make the header with the post overview look similar to this page's header:

https://imgur.com/vikat5B

Specifically:

1. The h1 title and custom_field.overview text align left
2. The custom_field.overview text size increased and with bigger character spacing and line spacing
3. The background color of the custom_field.overview text is slightly lighter
4. The "Medically reviewed by: ____" is stacked, with the bar + photo to the right

Here's a crude version of what this would look like (colors are placeholders):

https://imgur.com/cKFVK5K

I'm sorry for all of the requests! If I know the basics behind the CSS, I can play around with things without needing to bother you. I'm also happy to pay for your time.

You would basically need to reconstruct what was done before unfortunately.

You can try the HTML part in the article below to create the 3 columns layout for description, review by and author image:
https://docs.generatepress.com/article/split-header-three-sections/

Then you can tweak the width: 33.33333%; part to create uneven columns.

You can target each <div> by using the unique class name. So if you want the header-section-1 to have a different background color, this would be the CSS:

.header-section-1 {
    background-color: #fff;
}

If you want to learn more about HTML and CSS, I highly recommend going through the free lessons from this site:
https://www.codecademy.com/catalog/language/html-css

Thanks Leo! This is really helpful.

Using the three-column header setup along with CSS, here are the results:

https://imgur.com/oUjJRMa

This looks great for desktop. The only thing I can't figure out is how to make this mobile-friendly. Right now, the columns aren't collapsing for mobile.

Is there any way to do this? Here's the current HTML for the header:

<h1 class='header' align='center'>{{post_title}}</h1>
<div class="header-section">
    <div class="header-section-1">
{{custom_field.overview}}
	</div>

    <div class="header-section-2">
        <p align='right'>Medically reviewed by:
								<br>
					<a href='https://perfecthairhealth.com/about#medical-team/'>Po-Chang Hsu, M.D.</a></p>
					</div>
		<div class="header-section-3">
					       <img src='https://perfecthairhealth.com/wp-content/uploads/2019/07/Po-Chang_Hsu-small.png'>
			</div>
	</div>

And here's the CSS:

.header-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.header-section-1 {
	width: 65%;
}

.header-section-2 {
    width: 25%;
}

.header-section-3 {
    width: 10%;
}

@media (max-width: 768px) {
    .header-section > div {
        width: 100%;
    }
}

.header-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-section-1 {
	text-align: left;
    background-color: rgba(56,56,56,0.54);
	    box-shadow: 0px 1px 7px -3px rgba(0,0,0,0.75);
	padding: 15px 15px;
	margin: 0px 0px;
	letter-spacing: 1.2px;
	font-weight: 100
}

.header-section-1 {
	border: 1px solid #fff3;
        padding: 20px;
}

.header-section-2 {
	letter-spacing: 1px;
	font-weight: 100;
	margin-right: 8px;
	border-right: 1px solid #fff3;
	padding: 2px;
}

h1.header {
    letter-spacing: 2px;
    margin-bottom: 4em;
}

Very good job :)

Try this CSS as well:

@media (max-width: 768px) {
    .header-section {
        flex-direction: column;
    }
}

This is awesome! Thank you!!

I am almost certain this is my LAST question...

Is it possible to stack the columns as:

COLUMN 1
COLUMN 2 + 3

I only ask because there seems to be an alignment issue with mobile, because header-section-2 is aligned right, so it looks a bit odd in mobile:

https://imgur.com/ptT5auh

If it's not possible to stack the columns like that on mobile, then another workaround would just be to change the alignment on mobile for header-section-2 to center and hide the border. Either solution would work just fine.

In any case, THANK YOU for everything that you guys do. I really appreciate all of your patience.

Hey Leo,

I think I figured it out. I added the following CSS:

@media (max-width: 768px) {
    .header-section > div {
        width: 100%;
    }
	.header-section-2 {
		margin: 10px;
	}
	.header-section-2 {
    display: flex;
    align-items: center;
    justify-content: center;
	}
	.header-section-3 {
		margin: -30px;
	}
}

Thanks for teaching a man to fish (with CSS)!

Glad you got it!

You are a very quick learner :)

Hope you found it somewhat interesting!