[Support request] Editing meta box

Home Forums Support [Support request] Editing meta box

Home Forums Support Editing meta box

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1842640
    manaadiar

    I would like

    1) to add a Calendar icon before the date August 30 and Clock Icon before the “Estimated reading time” – similar to the Category/Tag/Comments icon
    2) to add an Author Icon before Hariesh Manaadiar and move it to next line.

    meta

    I am using a Child theme, so pls advise me the code for above and where I should add it.. Thanks..

    #1842643
    Leo
    Staff
    Customer Support

    Hi there,

    The easiest and best method would be to use a block element with dynamic data:
    https://docs.generatepress.com/article/block-element-post-meta-template/

    Let me know if this helps šŸ™‚

    #1843781
    manaadiar

    Hi Leo, this is not what I want.. Its too complicated.. What I want is like below you have the entries for .entry-header .cat-links and .entry-header .cat-links:before, what can I use for Author and Date.. That’s all..

    .entry-header .cat-links,
    .entry-header .tags-links,
    .entry-header .comments-link
    .entry-header .author-name {
    display: block;
    }

    .entry-header .cat-links:before,
    .entry-header .tags-links:before,
    .entry-header .comments-link:before,
    {
    display: inline-block;
    }

    #1843864
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site where i can see the post meta ?

    #1843871
    manaadiar

    Hi David, it is https://shippingandfreightresource.com.. Right now I made it work using below.. But as you can see, the icons for Posted On and Author is different from Categories, Tags and Comments which use the :before option.. I would like to use the :before option for all..

    .entry-header .cat-links,
    .entry-header .tags-links,
    .entry-header .comments-link
    {
    display: block;
    }

    .entry-header .cat-links:before,
    .entry-header .tags-links:before,
    .entry-header .comments-link:before

    {
    display: inline-block;
    }

    .posted-on:before {
    font-family: ‘Font Awesome\ 5 Free’;
    content: “\f073”;
    color: #858585;
    padding-right: 5px;
    }

    .author:before {
    font-family: ‘Font Awesome\ 5 Free’;
    content: “\f007”;
    color: #858585;
    padding-right: 5px;
    }

    Pls advise on the basis of using a Child Theme.. Thanks..

    #1844334
    Leo
    Staff
    Customer Support

    How are you adding the estimated reading time?

    It doesn’t have a specific class we can target:
    https://www.screencast.com/t/1RNpupD3tPiX

    #1844696
    manaadiar

    That’s through a plugin.. But I don’t want to change anything there.. Can you pls read above and advise on my question, thanks..

    #1844756
    Elvin
    Staff
    Customer Support

    Hi there,

    Thatā€™s through a plugin.. But I donā€™t want to change anything there.. Can you pls read above and advise on my question, thanks..

    I thought you wanted to add a “clock” icon to the estimated reading time? Now the issue Leo mentioned is, there’s no selector for that text string because it isn’t wrapped with the proper elements for us to style it directly.

    Check this – https://share.getcloudapp.com/7KuoWXbG

    There’s no wrapper element to use as a selector.

    #1845509
    manaadiar

    Ok, if the clock can’t be done what about below..??

    1) to add a Calendar icon before the date August 30 similar to the Category/Tag/Comments icon
    2) to add an Author Icon before Hariesh Manaadiar and move it to next line.

    #1845521
    Leo
    Staff
    Customer Support

    I’m a little confused.

    Isn’t both of those already done? This is what I’m seeing:
    https://www.screencast.com/t/Tf3plIrnXud

    #1845591
    manaadiar

    Hi Leo, may you are not reading my earlier msgs in this thread.. This is what I said in response to David’s msg.. I wanted the code to use like it has been done for the .cat-links:before……….

    quote

    Hi David, it is https://shippingandfreightresource.com.. Right now I made it work using below.. But as you can see, the icons for Posted On and Author is different from Categories, Tags and Comments which use the :before option.. I would like to use the :before option for all..

    .entry-header .cat-links,
    .entry-header .tags-links,
    .entry-header .comments-link
    {
    display: block;
    }

    .entry-header .cat-links:before,
    .entry-header .tags-links:before,
    .entry-header .comments-link:before

    {
    display: inline-block;
    }

    .posted-on:before {
    font-family: ā€˜Font Awesome\ 5 Freeā€™;
    content: ā€œ\f073ā€;
    color: #858585;
    padding-right: 5px;
    }

    .author:before {
    font-family: ā€˜Font Awesome\ 5 Freeā€™;
    content: ā€œ\f007ā€;
    color: #858585;
    padding-right: 5px;
    }

    Pls advise on the basis of using a Child Theme.. Thanks..

    unquote

    #1845643
    Leo
    Staff
    Customer Support

    I did read through the entire thread but sorry I’m still a little confused.

    So basically, you are happy with .posted-on:before and .author:before but you want to change .cat-links .tags-links, .comments-links in the same way so you can use your own custom icon?

    #1845653
    manaadiar

    Hi Leo, let me explain again..

    I removed below code in the CSS..

    .posted-on:before {
    font-family: ‘Font Awesome\ 5 Free’;
    content: “\f073”;
    color: #858585;
    padding-right: 5px;
    }

    .author:before {
    font-family: ‘Font Awesome\ 5 Free’;
    content: “\f007”;
    color: #858585;
    padding-right: 5px;
    }

    So now as you can see in the image below, the icons for Posted On and Author have disappeared..

    icons

    But the icons for Categories, Tags and Leave a Comment are there.. I would like to add icons before the Posted On and Author.. BUT for Categories, Tags and Leave a Comment, I have NOT specified the icons in CSS, so not sure where it is coming from..

    What do I need to do to add icons like the ones for Categories, Tags and Leave a Comment before Posted On and Author..??

    #1845705
    Ying
    Staff
    Customer Support

    Hi there,

    The category/tag/comment icons are added by GP theme which is also using :before CSS.

    It’s basically the same as your method of adding icons before the date and author.

    If you change 5pxto 10pxin this CSS, then it should be looking the same as the GP default icons:

    .posted-on:before {
        font-family: ā€˜Font Awesome\ 5 Freeā€™;
        content: ā€œ\f073ā€;
        color: #858585;
        padding-right: 5px;
    }

    For the estimated reading time, we can’t add icons to it using CSS since it has no CSS class we can target.

    Let us know if we miss anything.

    #1845706
    manaadiar

    Hi Ying, thanks, so for the date and author, can these icons not be added by GP Theme..??

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