Post_author Style Header Element

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

Thanks David, It does not change the text color. Works fine though for background color.

I updated the CSS above try that.

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

Hi,

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

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

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

Hi Elvin, I am using Post Categories: {{post.categories}}

Hi Elvin, I am using Post Categories: {{post.categories}}

Then my previous reply should be applicable. Have you tried it already? Let us know.

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

So when the Page Hero is hovered over - what elements do you want to change color ?

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

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

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