[Resolved] How to add post meta like this

Home Forums Support [Resolved] How to add post meta like this

Home Forums Support How to add post meta like this

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1556012
    Amol Chavan

    I want to add blog post meta like this as shown here in the screenshot:- https://ibb.co/ry310DS

    My current one you can here: https://www.growthfunda.com/side-hustle/

    Could you please help on this.

    #1556952
    Leo
    Staff
    Customer Support

    Hi there,

    Is that just for single posts?

    #1557498
    Amol Chavan

    Yes it’s for single posts not for Archives.

    #1558902
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I would remove the current styling you have (margin, border etc..), then do this:

    .single .entry-meta {
        display: flex;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        padding: 5px 0;
        justify-content: center;
    }
    
    .single .entry-meta .posted-on {
        order: 1;
    }
    
    .single .entry-meta .byline {
        order: 2;
    }
    
    .single .entry-meta .comments-link {
        order: 3;
    }
    
    .single .entry-meta > * {
        padding: 0 10px;
    }
    #1560105
    Amol Chavan

    I have added code as you mentioned but it’s looking something different. The author’s image is so big and the Meta sections are too big. I don’t want the author’s image too. I need exactly as shown in the previous attached image. Here is the link post-implementation of this code: https://ibb.co/27FNyW7

    #1561268
    Tom
    Lead Developer
    Lead Developer

    You’ll need to remove the custom code you’ve added to add the image in the first place.

    If you remove that code, the result should be very close to what you’re wanting.

    #1563097
    Amol Chavan

    Thanks got the same result. I just need all the text inside meta to be bold and there should be some more margin between Title & Meta. That’s it. Another problem I observe is that the meta look and feel breaks on the Blog Archive page. It looks like this: Amol ChavanOctober 24, 2020. The Author name & Date are touching each other. I need some space between them too.

    #1563688
    David
    Staff
    Customer Support

    Update this CSS:

    .single .entry-meta {
        display: flex;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        padding: 5px 0;
        justify-content: center;
    }

    to:

    .single .entry-meta {
        display: flex;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        padding: 5px 0;
        justify-content: center;
        margin-top: 1.5em; /* add space between title and meta */
        font-weight: 700; /* Increase font weight */
    }
    #1565269
    Amol Chavan

    Thanks, it looks good and perfect on a single blog post. On the Blog archive, I observe that the meta on Blog Archives look looks like this: Amol ChavanOctober 24, 2020. The Author’s name & Date are touching each other. I need some space between them too.

    #1565287
    Amol Chavan

    Thanks, it looks good and perfect on a single blog post. On the Blog archive, I observe that the meta on Blog Archives look looks like this: Amol ChavanOctober 24, 2020. The Author’s name & Date are touching each other. I need some space between Author name and Date: Amol ChavanOctober 24, 2020

    #1565501
    David
    Staff
    Customer Support

    Try this CSS:

    body:not(.single) .entry-meta > * {
        margin-right:  10px;
    }

    Increase the 10px to make a large space.

    #1566002
    Amol Chavan

    Thanks, this ticket is resolved

    #1566110
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.