[Resolved] Look of Single Post category

[Rohan Verma]

1. How can I change the single post category box text color?
2. For multiple categories, it shows in (comma) format like – News, Games. I want to show separate category boxes.
Current Look: https://www.gadgetheadline.com/ios-14-beta-4-whats-new/

I’m using this CSS.

.cat-links {
background: #f6f4ff;
padding: 6px 6px 6px;
margin-right: 6px;
border-radius: 2px;
font-weight: 700;
font-size: 15px;
text-transform: normal;
border-left: 0px solid;
}

[David]

Hi there,

use this CSS instead:

.entry-meta.cat-links {
    font-size: 0;
}

.entry-meta.cat-links a {
    background: #f6f4ff;
    padding: 6px 6px 6px;
    margin-right: 6px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 15px;
    text-transform: normal;
    border-left: 0px solid;
}

[Rohan Verma]

Thanks that changed the category box.

But I want to add the category box outline.

And also suggest the category link hover color.

[David]

Try this:

/* add cat term hover color */
.entry-meta.cat-links a:hover {
    background-color: red;
    color: #fff;
}
/* Add border box to cat terms */
.entry-meta.cat-links { 
    display: inline-block;
    padding: 5px 0 5px 5px;
    border: 1px solid #ccc; 
}

[Rohan Verma]

Should I put this code instead of the previous one you given?

Or together?

[David]

Together .

[Rohan Verma]

Hi David. It seems that the last single css works fine. But the multiple categories are showing with comma like before.

And the together css code looks like this.
https://prnt.sc/tvrhgt

The new css is good. Just add separate boxes to it.

[David]

Sorry i am not clear.
Do you just want a border around each category term?
If you can provide a screenshot of how its meant to look then it would be easier.

[Rohan Verma]

Yes. Just like the below link.

https://nerdschalk.com/best-master-system-games/

[David]

Use all of the code i provided aside from this:

/* Add border box to cat terms */
.entry-meta.cat-links { 
    display: inline-block;
    padding: 5px 0 5px 5px;
    border: 1px solid #ccc; 
}

If you don’t want the rounded corners then remove this property:

border-radius: 2px;

[Rohan Verma]

Separate box still not showing. And there is a gap between the border line and category meta background/hover color.

Check this: https://www.gadgetheadline.com/ios-14-beta-4-whats-new/

[Rohan Verma]

I need like this as mentioned earlier.

https://nerdschalk.com/best-master-system-games/

[Tom]

Try removing this CSS completely

.entry-meta.cat-links { 
    display: inline-block;
    padding: 5px 0 5px 5px;
    border: 1px solid #ccc; 
}

That should give you this look: https://www.screencast.com/t/CHppaaGKHfa1

[Rohan Verma]

Hey Tom, still there is no outline box separately.

[David]

This is what i see when i visit the link you provided:

So the category terms are correct ?

Do you want to remove the border around the post content ?
If so DELETE this CSS:

.separate-containers .inside-article {
    border-radius: 5px;
    box-shadow: 0 0 15px 5px rgba(0,0,0,.1);
}

And set your Customizer > Colors > Body to White.

[Author]

Posts