Docs

[Moonworks]

I’m changing my theme to X, but am not sure how to go about editing for each category.

On my previous theme, I had different CSS & header for each catefory, with each category being colour coded so that users knew exactly where they were on the site.

Is there a way to do this with the X theme?

Thanks.

[Nabeel A]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Moonworks]

No problem.

I would like each of the single posts to have it’s own colour, which would be created depending upon the category it is in.

if I have, for example, 3 categories with various posts in them, I would have css for the category and each of the posts would follow that. So if a post in my indie film category was looked at, it would have its own header image, link colours, etc and the same for the authors category.

I was using the https://wordpress.org/plugins/stylesheet-per-page plugin when I had each category as a separate custom post type, but I’ve bought them all back as posts now as that proved a nightmare for other reasons. Supposedly that works for categories, but it doesn’t.

If I didn’t explain that correctly, please let me know and I;ll do some mockups.

Thanks.

[Rue Nel]

Hello There,

Thank you for the clarifications!

Could please provide us the url of your site using the other theme? We can take a look at it and maybe convert your existing css code so that it will work in X. I highly recommend that you create a staging site so that you can try out X in the staging site, see and compare the existing site with the other theme and the custom css in it. To know more how you can create a staging site, please check out this links:
http://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/
https://maintainn.com/2015/02/how-to-create-a-staging-site-for-wordpress/

Hope this helps.

[Moonworks]

I just moved over the site to X, keeping it quite basic for now, but that is in the process of moving over to a new host, but once it’s on it will be at http://www.sylv.net. I’m using a test site to mess with this, the site is my wife’s so I daren’t mess that up 🙂

I think I may have found a way of doing it, but I’m just a little confused by what I need to do with the CSS. I’m not sure if this comes under the support, but just a few pointers in the right direction would be a God-send.

I have this added to my functions.php, which works so not a problem:

// add category nicenames in body and post class
function category_id_class($classes) {
    global $post;
    foreach((get_the_category($post->ID)) as $category)
        $classes[] = $category->category_nicename;
    return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');

I then add into the css something basic using category-[category name], like this:

.category-blast {
    background: yellow;
}

That does the job, it turns that section yellow on that category only.

Where I’m asking for the advice is how I would use CSS to make the changes to the category but within a specific element, for example, I would be changing the header image on the post depending upon the category, so would need to add

.category-blast

but would also need to use

.x-logobar-background (I think that’s the right one from messing with the normal css).

This is one of the posts where the background CSS is shown to work:

http://sylvcurrent.wpuser.co.uk/rising-tides-by-katy-haye

You can see that any post in any other category doesn’t show that background, such as this one:

http://sylvcurrent.wpuser.co.uk/interview-with-actress-jane-badler

Thank you

[Christopher]

Hi there,

Did you add the CSS in cyustomizer?
The code should work on both pages.

To add header background image, try this code :

.blast .x-logobar {
    background: url("//sylv.net/wp-content/uploads/2016/07/Main-Header-2000.jpg") no-repeat top center;
    background-size: cover;
    height: 200px;
}

Hope it helps.

[Moonworks]

Thank you, that did the job perfectly. It was driving me crazy, but now I can relax a little.

One final question, do you have info somewhere on the various css elements used in the X theme?

[Christopher]

Hi there,

You can find main classes utilized by the theme here https://community.theme.co/kb/css-class-index/
You can always inspect elements using chrome developer tools

Hope it helps.

[Moonworks]

Thank you, I’ll look through those. I seem to have trouble with the inspector & Firebug, not always getting what I need.

[Rue Nel]

You’re always welcome.
If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts