[Resolved] Category above title – on the single post + styling

Home Forums Support Category above title – on the single post + styling

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1420939
    xdexx

    I would like to have a category shown above the title on the single post. I have found the PHP snippet here:
    forum post

    It works fine. Now I would like to have a unique style only for the category text. White text in the black rounded box. The rest of the meta content (author, date) should not be affected.

    Thanks and greetings from Holland!

    #1421038
    Elvin
    Customer Support

    Hi xdexx,

    Based from the code snippet, the category text has a cat-links class we can use for css selector styling.

    Here’s how to add CSS: https://docs.generatepress.com/article/adding-css/

    You can target only the category links by adding something like this.

    .cat-links{ background-color: black; color: white; padding: 10px; border-radius: 25px; }

    Note: padding is optional, you can change the border-radius values to fit your preference.

    and since this is a link, you might consider adding :hover state styles that will look something like this:

    .cat-links:hover{ background-color: [Set BG color here for hover]; color: [Set text color here for hover]; }

    Let us know if this helps. ๐Ÿ™‚

    #1421447
    xdexx

    Hi Elvin,

    Now just to add few pixels under the category box. Adding “margin-bottom” had no effect.
    This is the CSS:

    .cat-links { 
        background-color: rgba(159,196,168,0.5); 
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 3px;
        padding-bottom: 2px;
        border-radius: 3px; 
        font: 13px Arial, sans-serif;
        font-weight: bold;
    }

    And here is the sample page.

    Dummy question, I know ๐Ÿ™‚

    Thanks!

    #1421507
    Elvin
    Customer Support

    Thanks for providing the page.

    margin-bottom won’t work on elements that has display:inline css property.

    For margin-bottom to work, you might want to change from inline to inline-block.

    Here’s a demo video testing inline-block + margin-bottom on your .cat-links element.
    https://share.getcloudapp.com/p9uGQ52B

    You can add display: inline-block !important; margin-bottom: 20px to your .cat-links selector to force it to not use display:inline.

    Let us know if this fits what you’re trying to do.

    #1421515
    xdexx

    Perfect! Thanks again!

    #1422241
    Elvin
    Customer Support

    No problem. Youโ€™re welcome.:)

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.