[Resolved] Post_author Style Header Element

Home Forums Support [Resolved] Post_author Style Header Element

Home Forums Support Post_author Style Header Element

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1636572
    Jatin

    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.

    #1636675
    David
    Staff
    Customer Support

    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;
    }
    #1636726
    Jatin

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

    #1636793
    David
    Staff
    Customer Support

    I updated the CSS above try that.

    #1637329
    Jatin

    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.

    #1637604
    Elvin
    Staff
    Customer Support

    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;
    }
    #1637824
    Jatin

    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.

    #1637863
    Elvin
    Staff
    Customer Support

    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;
    }
    
    #1637913
    Jatin

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

    #1637916
    Elvin
    Staff
    Customer Support

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

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

    #1637977
    Jatin

    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 ?

    #1638107
    David
    Staff
    Customer Support

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

    #1638131
    Jatin

    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.

    #1638136
    Jatin

    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;
    }
    #1638402
    David
    Staff
    Customer Support

    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;
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.