Editing meta box

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 :)

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;
}

Hi there,

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

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..

How are you adding the estimated reading time?

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

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..

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.

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.

I'm a little confused.

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

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

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?

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..

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..??

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.

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