- This topic has 16 replies, 3 voices, and was last updated 3 years, 1 month ago by David.
-
AuthorPosts
-
January 28, 2021 at 1:43 am #1636572Jatin
Hi Guys,
I use below Header Element for displaying Author name on my posts Example Link 1 (in private box).
{{post_author}} | {{post_date}} <br/>However, I wanted to modify the Author name to display it like the tags on https://demo.tagdiv.com/newspaper_pro/ and which you can hover over and changed the color as well.
More Info in Private Box. Thank You.
January 28, 2021 at 3:07 am #1636675DavidStaffCustomer SupportHi there,
try this CSS:
.page-hero .author.vcard a { display: inline-block; padding: 5px; border-radius: 2px; transition: background-color 0.2s ease-in; background-color: #f00; color: #fff; } .page-hero:hover .author.vcard a { background-color: #00f; }
January 28, 2021 at 3:52 am #1636726JatinThanks David, It does not change the text color. Works fine though for background color.
January 28, 2021 at 5:16 am #1636793DavidStaffCustomer SupportI updated the CSS above try that.
January 28, 2021 at 10:15 am #1637329JatinHi David thanks a lot.
What about the date on the page. Can you please advise how can I make it same as the author
Author style is fine now.January 28, 2021 at 3:57 pm #1637604ElvinStaffCustomer SupportHi,
If you want the date to have the exact same style as the author, you can simply add its selector on the existing CSS David provided.
Example:
.page-hero .author.vcard a, .page-hero .entry-date.published { display: inline-block; padding: 5px; border-radius: 2px; transition: background-color 0.2s ease-in; background-color: #f00; color: #fff; } .page-hero:hover .author.vcard a, .page-hero:hover .entry-date.published { background-color: #00f; }
If you want the date to have a slightly different style, you can write its own set of style.
Example:
.page-hero .entry-date.published { display: inline-block; padding: 5px; border-radius: 2px; transition: background-color 0.2s ease-in; background-color: green; color: #fff; } .page-hero:hover .entry-date.published { background-color: pink; }
January 29, 2021 at 1:05 am #1637824JatinThanks it worked.
Sorry as i am adding the stuff one by one, I have added the categories as well and would like to have style it similar and also instead of comma between the categories i want to include | as with previous meta. Is it possible.Link.
January 29, 2021 at 2:05 am #1637863ElvinStaffCustomer SupportAre you using template tag
{{post.categories}}
or{{post.tags}}
?If so, you can change the separator to
|
using the PHP snippet provided here:
https://docs.generatepress.com/article/generate_page_hero_terms_separator/you can then style it with this CSS:
.page-hero a[rel="tag"] { display: inline-block; padding: 5px; border-radius: 2px; transition: background-color 0.2s ease-in; background-color: green; color: #fff; } .page-hero:hover a[rel="tag"] { background-color: pink; }
January 29, 2021 at 2:57 am #1637913JatinHi Elvin, I am using Post Categories: {{post.categories}}
January 29, 2021 at 2:59 am #1637916ElvinStaffCustomer SupportHi Elvin, I am using Post Categories: {{post.categories}}
Then my previous reply should be applicable. Have you tried it already? Let us know.
January 29, 2021 at 3:58 am #1637977JatinYes it works. But one last issue. When i hover over the mouse on my name the hover color of all meta changes as well. Also, the all Categories have the same color ?
January 29, 2021 at 6:27 am #1638107DavidStaffCustomer SupportSo when the Page Hero is hovered over – what elements do you want to change color ?
January 29, 2021 at 6:43 am #1638131JatinEach item with separate hover background if possible. Right now if you hover on any one of the meta / page hero, All other items hover color changes according to what’s set. It should affect only the meta field on which i hover over my mouse.
January 29, 2021 at 6:46 am #1638136JatinThis is what i am using in css
Code:
/* ###### AUTHOR NAME On Post Styling #########*/ .page-hero .author.vcard a { display: inline-block; padding: 0px 5px 0 5px; border-radius: 1px; transition: background-color 0.2s ease-in; background-color:#A9E2F3; color: #000000; } .page-hero:hover .author.vcard a { background-color: #E0E6F8; } /* ###### Published Date On Post Styling #########*/ .page-hero .entry-date.published { display: inline-block; padding: 0px 5px 0px 5px; border-radius: 1px; transition: background-color 0.2s ease-in; background-color: #81F7D8; color: #000000; } .page-hero:hover .entry-date.published { background-color: #E6E6E6; } /* ###### Post Tag Styling #########*/ .page-hero a[rel="tag"] { display: inline-block; padding: 0px 5px 0px 5px; border-radius: 1px; transition: background-color 0.2s ease-in; background-color: #F7F8E0; color: #000000; } .page-hero:hover a[rel="tag"] { background-color: #FFFFFF; }
January 29, 2021 at 7:15 am #1638402DavidStaffCustomer SupportThis for exaxmple:
.page-hero:hover .author.vcard a { background-color: #E0E6F8; }
should be changed to:
.page-hero .author.vcard a:hover { background-color: #E0E6F8; }
So the hover only applies to that element. You would need to make that change for all meta elements eg. Tag element becomes:
.page-hero a[rel="tag"]:hover { background-color: #FFFFFF; }
-
AuthorPosts
- You must be logged in to reply to this topic.