[Resolved] element header (help needed for customizing)

[Carlo]

Im trying to replicate a header element i saw on another site.

it has the following im trying to replicate:
page title
(icon)Written by:(author) | (icon)Updated:(updated publish date) | (icon)category

so far ive been able to do the following by watching the element video tutorial

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

Written by {{post_author}} | Published: {{post_date}}  

its a start but i still would like to add/change the following
-change publish date to an updated template tag (if i have updated)
-add a category template tag
-add icons to author, publish date and category

change the font size of all this in the header element (excluding the h1 title)

would love a little guidance here if possible… been watching guide after guide all night and finally crumbled so i though i’d ask 🙂
PS – im not sure if the “hero-meta” is correct? its what was in the header tutorial video.

[Leo]

Hi there,

– This should still work in header element: https://docs.generatepress.com/article/show-the-updated-post-date/

– This should work: {{post_terms.category}}

– We can do that with CSS. Have you chosen the icons?

Let me know 🙂

[Carlo]

thanks Leo, got the first 2 working well.
Added the required css and snippet to get the updated date working and also got the category working well.

next i need to work out is adding icons before each of those template tage (author, date, category). yes ive got the icons leo.

[Leo]

Are they Font Awesome icons?

Can you link me to your site in question?

[Carlo]

updated the website url in my first post so you can see what im doing…

as far as icons, this is what ive done so far.

added the following code to the snippets plugin:
add_action( ‘wp_enqueue_scripts’, ‘tu_load_font_awesome’ );
/**
* Enqueue Font Awesome.
*/
function tu_load_font_awesome() {
wp_enqueue_style( ‘font-awesome’, ‘//use.fontawesome.com/releases/v5.5.0/css/all.css’, array(), ‘5.5.0’ );
}

Added awesomefonts icon html code(s) to the header element. all seems to be working so far.

Next i would like to change the following..
1. how can i change the font and size of the author, publish, category and associated icons section?
i would like to make it smaller than default. (but still keep the H1 title seperate to these changes)

2. add a little spacing between the author,publish and category sections.

thanks heaps

[Leo]

1. You can just target the <div class="hero-meta"> with the CSS:

.hero-meta {
    font-size: 25px;
}

2. Have you tried adding space in the actual HTML? It should work.

[Carlo]

yeah ive tried simply adding more space to the html but it doesn’t add any more than 1 space regardless of how many you put in the html.

so how would be the best and cleanest way to add spacing between the 3 sections (author, date and category)? do they need to be separated in their own class and add padding to each? how to do that?

also, in mobile view, i would like to have those 3 sections (author, date and category) on a separate line each to make it look neater and cleaner.

Desktop:
(icon)Author (icon)Publish date (icon)Category

Mobile:
(icon)Author
(icon)Publish date
(icon)Category

[Leo]

Yeah they would need to have their own <div> and class.

For example:
<div class="hero-meta-1">meta 1</div><div class="hero-meta-2">meta 2</div>

And the CSS would be something like:

@media (min-width: 769px) {
    .hero-meta-1, .hero-meta-1 {
        display: inline-block;
    }
    .hero-meta-2 {
        padding-left: 5px;
    }
}
@media (max-width: 768px) {
    .hero-meta-1, .hero-meta-1 {
        display: block;
    }
}

Here are some CSS guidelines:
https://www.w3schools.com/cssref/pr_class_display.asp
https://www.w3schools.com/css/css_padding.asp
https://docs.generatepress.com/article/responsive-display/

[Carlo]

got it! perfect. thanks for your help Leo.

[Leo]

No problem 🙂

[Author]

Posts