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

[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!

[Elvin]

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

[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!

[Elvin]

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.

[xdexx]

Perfect! Thanks again!

[Elvin]

No problem. You’re welcome.:)

[Author]

Posts