Change color, background color & hover of category name (meta) on blog post and archive

Support
#1

Hi there

I would like to change the way the meta data on my blog posts is shown.

I already removed the date with CSS.

But I’d like to get a different color, background color & hover color for all category names, so they appear in a square. This looks more professional than just the category name with hyperlink.

Also makes it much more clear what subject each post is about.

How can I achieve this?

I tried via CSS but did not yet got it to work…

Thanks in advance!!

#2

Hi @Woordenaar,

Thanks for writing in!

The only way to do this is via custom CSS.
I am not sure which stack you are using for your site, so can’t help you on the exact CSS.
As you have multiple site in your license page, couldn’t figure out for which site you are looking for the CSS.
If you can send us the website URL via secure note so that we can give you a proper answer.

Remember, this is something related to custom CSS and usually we don’t support this as this is something out of theme support scope.
We will try our best to point you right direction so that you can achieve the layout.

Thanks

#3

Hi there

I’m using renew stack.

Updated secure note :slight_smile:

Please see blogpage.

I would like the category names to appear in a black square with white text, and gold hover… to have better layout and more clear for readers what article is about…

Thanks in advance for your help!!

#4

Hi There,

Thank you for the clarification, please add this to Theme Options > CSS

.p-meta span {background-color: #000;}
.p-meta span a {color: #fff;}
.p-meta span:first-child,
.p-meta span:last-child {background-color: transparent;}
.p-meta span:last-child a {
	color: #000;
	margin-left: 12px;
}
.p-meta span a:hover {
color: #d7ac44;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

#5

Hi there

Thanks for the CSS.

I tried the same as you already with the .p-meta but this also includes the “leave a comment” and puts background color on all categories.

Please see picture:

Hover color is now white, but also for “leave a comment”. For leave a comment this should remain the same as before.

Font weight is 600, but also for leave a comment. This should remain the same as before.

When more than one category is used, black background is not separated between the different categories.

I would like to let the black background appear as a square surrounding only one category name. So when more than one category is used, they are displayed as different black squares.

And I also have some "/ "displayed. How can I make them dissapear?

Thanks in advance for your help!! :slight_smile:

#6

It also seems that when single post is viewed, the date is still there although I already removed it via css.

Please see picture:

I highlighted it with cursor so you can see it.

It is just hidden by the black background…

I used this as CSS to remove the date:

.blog .entry-date,.archive .entry-date {
display:none;
}

#7

OK…

I was able to remove the / myself.

Only things left to do:

I used:

.blog .entry-date,.archive .entry-date {
display:none;
}

But on the single post page date is still visible. How can I remove it?

Separation between the different categories if more than one category is used. So I would like to have a black background square for each category name separately. How can I achieve this?

Author name: can I have a profile image next to it? And maybe let it link to an “about” page?

Thanks in advance for your help!!

#8

Hi There,

Please update the custom CSS to this:

.blog .entry-date,
.archive .entry-date,
.single-post .entry-date {
    display:none;
}

Please remove this custom CSS:

.p-meta span {
    background-color: black;
}

And add this custom CSS instead:

.p-meta span > a {
    background-color: black;
    padding: 2px 8px;
}
.p-meta span:last-child a {
    background: none;
}

Please take a look at this ticket: https://theme.co/apex/forum/t/author-meta-link-avatar-not-showing-in-some-browsers/11984?u=thai

Hope it helps :slight_smile:

#9

Super!

Thanks

One thing did not work well:

Now category background color is separated, but there is a “,” showing (a comma between the categories).

Please see picture:

How can I remove this comma?

#10

A quick and dirty hack would be to turn that comma into white color like the background. Here’s the CSS.

.p-meta span:nth-child(3) {
    color:white;
}

The best way is to remove that via the template file. You can copy Renew’s meta function x_renew_entry_meta in pro\framework\functions\frontend\renew.php and paste it in your child theme’s functions.php.

Replace all the $separator = ', '; line with $separator = ' ';

Please just note that what I showed here is theme customization which is outside the scope of our support. This only serves as a guide. We are not responsible if this might break your site now or in the future so I’d strongly recommend that you learn the method of overriding and the code.

Thanks.

#11

Thanks!! I applied the “dirty” trick and it worked immediately :slight_smile:

Now I have one last “problem”.

Since I now use separation between the different categories, the layout is not very beautiful anymore.

Therefore I would like to show the “leave a comment” on a new line, below the author and the categories.

Can I also achieve this via CSS? How can I do this?

Then I’m all set for my blog :slight_smile:

This is my current CSS for the meta data on the blog:

.p-meta span > a {
background-color: black;
padding: 2px 8px;
}
.p-meta span:last-child a {
background: none;
}
.p-meta span a {color: #d7ac44; font-weight:600;}
.p-meta span:first-child,
.p-meta span:last-child {background-color: transparent;}
.p-meta span:last-child a {
color: rgb(68, 144, 215);
margin-left: 12px;
}
.p-meta span a:hover {
color: white;
}
.p-meta span:last-child a:hover {
color: rgb(215, 172, 68);
}
.p-meta span:after {
color: transparent;
}

.p-meta span:nth-child(3) {
color:white;
}

Thanks in advance!

#12

Hi There,

Please also add this custom CSS:

.p-meta span:last-child {
    display: block;
}

.p-meta span:last-child a {
    padding: 0;
    margin: 0;
}

Hope it helps :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.