Custom CSS Styling for posts in a certain category

Support
#1

I’d like to have Custom CSS Styling for posts only in a certain category.

How can we make this possible in PRO?

Thanks :slight_smile:

#2

Hi there,

There are classes added to the container of the content that specifies the category of the post.

Try using the selector .category- then append the category slug that you want to specify.

For example, if the category slug is news then the CSS selector should be .category-news.

Here is how to can get the category slug:

So if you want to target the title of the post that is in the news category then you can do it by using:

.category-news .entry-title

Hope this helps.

#3

Awesome thank you! I’ll give this a shot

#4

You are most welcome. :slight_smile:

#5

So it appears I overlooked that you typed “container”

But I was curious to know how to change the complete body styling.

For example I want the background of the entire page to be black, and use a different header.

Will this also involve Header Builder modifications?

Sorry not sure how to tackle this . Thanks

#6

Hi There,

Actually, that example class .category-news is applied to the body, so you can use that in conjunction with the element selector that you want to target (style). On Jade’s example above, the target element is the title, so it will be .category-news .entry-title

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

That would be

.category-news .site {
	background-color: black;
}

Regretfully, assigning a specific header for specific category page is not possible with Header Builder. But rest assured that this has already been added to our feature request list.

Thank you for understanding,

#8

Thanks for the answers!
However, the above doesn’t appear to work

When I add a comma and separate the classes like so

I get the effect I want, but it’s applying to all categories.

Is there a way I can affect the .site class only for posts in a certain category?

Thanks :slight_smile:

#9

Hi There,

No, do not add a comma on the selector because that means you’re targeting both <body class="category-news"> and <div class="site">, the later is site wide that is why you’re seeing the background-color black on all pages/categories.

So you need to be specific on your selector, you need the .site div of the category news page, so that would be .category-news .site

CSS Selector Reference

Note; as Jade instructed above, you need to replace the news with the actual slug of your category. Review Jade’s reply above.

Hope it helps,
Cheers!

#10

Correct, I understand how CSS selectors work.

I just wanted to describe that as separate classes (with the comma) it’s working globally (obviously), but without the comma, like you say, doesn’t work. Nothing changes when I use .category-news .site

And yes, of course I changed “news” with my category slug.

Hope this makes sense. So I’m still trying to figure out how to affect the .site class under a certain category.

#11

Hi there,

If you are trying to target a different element together with another CSS selector using a comma, chances are there is something wrong with the code or there is another CSS code that is overriding the code you are adding.

I tried checking the site that is in your licenses but I can’t seem to see any posts on the site. Is that a chance that you could provide us with the direct link for a sample post you are working on and the css code you are trying to add so that we can check?

Thank you.

#12

This is the link
https://corresmatic.com/testcat/test-post-title/

This is the code I’m using.

.category-testcat .site {
	background: black;
}
#13

Hi again,

Thank you for providing the URL. Basically category-testcat is not being applied to the <body> tag but it is applied to the article tag (see screenshot)

So you can’t use this class to apply background color to the whole page. As you see in the screenshot the body tag doesn’t have category-testcat class but the article tag has it. One way to do this is with the post ID but you’ll have to write CSS for each of your posts. Best way would be to use jQuery script. The script will check if the article has the class category-testcat then apply background color to the whole page. To do this, please add the following code in the Theme Options > JS:

 jQuery(document).ready(function($){
	if( $('.single-post article').hasClass('category-testcat') ) {
		$('.site').css('background', '#2e93ab');
	}
});

Similarly you can do this for other categories as well:

jQuery(document).ready(function($){
	if( $('.single-post article').hasClass('category-testcat') ) {
		$('.site').css('background', '#2e93ab');
	}
	if( $('.single-post article').hasClass('category-news') ) {
		$('.site').css('background', 'blue');
	}
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#14

Ahhh javascript. Thank you! Works :slight_smile:

#15

You are most welcome!

#16

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