- This topic has 15 replies, 5 voices, and was last updated 2 years, 8 months ago by Leo.
-
AuthorPosts
-
July 2, 2021 at 1:48 pm #1842640manaadiar
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.I am using a Child theme, so pls advise me the code for above and where I should add it.. Thanks..
July 2, 2021 at 1:52 pm #1842643LeoStaffCustomer SupportHi 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 š
July 4, 2021 at 3:55 am #1843781manaadiarHi 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;
}July 4, 2021 at 5:48 am #1843864DavidStaffCustomer SupportHi there,
can you share a link to your site where i can see the post meta ?
July 4, 2021 at 5:58 am #1843871manaadiarHi 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..
July 4, 2021 at 11:19 am #1844334LeoStaffCustomer SupportHow are you adding the estimated reading time?
It doesn’t have a specific class we can target:
https://www.screencast.com/t/1RNpupD3tPiXJuly 5, 2021 at 1:07 am #1844696manaadiarThat’s through a plugin.. But I don’t want to change anything there.. Can you pls read above and advise on my question, thanks..
July 5, 2021 at 1:57 am #1844756ElvinStaffCustomer SupportHi 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.
July 5, 2021 at 10:13 am #1845509manaadiarOk, 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.July 5, 2021 at 10:18 am #1845521LeoStaffCustomer SupportI’m a little confused.
Isn’t both of those already done? This is what I’m seeing:
https://www.screencast.com/t/Tf3plIrnXudJuly 5, 2021 at 11:25 am #1845591manaadiarHi 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
July 5, 2021 at 12:25 pm #1845643LeoStaffCustomer SupportI 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?July 5, 2021 at 12:35 pm #1845653manaadiarHi 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..??
July 5, 2021 at 1:54 pm #1845705YingStaffCustomer SupportHi 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
5px
to10px
in 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.
July 5, 2021 at 1:57 pm #1845706manaadiarHi Ying, thanks, so for the date and author, can these icons not be added by GP Theme..??
-
AuthorPosts
- You must be logged in to reply to this topic.