[Resolved] element header (help needed for customizing)

Home Forums Support [Resolved] element header (help needed for customizing)

Home Forums Support element header (help needed for customizing)

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #780204

    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


    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.

    Customer Support

    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 ๐Ÿ™‚


    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.

    Customer Support

    Are they Font Awesome icons?

    Can you link me to your site in question?


    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

    Customer Support

    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.


    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.

    (icon)Author (icon)Publish date (icon)Category

    (icon)Publish date

    Customer Support

    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:


    got it! perfect. thanks for your help Leo.

    Customer Support

    No problem ๐Ÿ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.