creating custom styles for categories

  • This is my index page. I would like to know how to change the background color of each of my categories. This is all I want to change. Please explain exactly where the code goes. WordPress for dummies mentions post_class() but is not specific enough.
    Could you please send your comments to [email redacted]?
    Thank you,
    Carl Terwilliger

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • @carl205,

    You could do this easily with CSS. Each category page will have a class in the <body> HTML tag. One is a category-slug format (with a short name/slug matching the slug of the WP category) and one is a category-id format (with a number matching the ID of the WP category). Take a look.

    Then just gather your categories in a list and write some CSS for each…

    <style>
body.category-shrubs{background-color:pink}
body.category-trees{background-color:green}
body.category-flowers{background-color:blue}
</style>

    Your theme might have a setting where you can add custom CSS under Appearance -> Customize -> Additional CSS or in the theme settings, or you can add this CSS to a child theme style.css file (a bit more complicated but ultimately worthwhile). If using the Customizer, just remove the <style> tags from the code above, and customize with the correct slugs and colors. If your theme has margins on the body, you might have to tinker further.

    Thread Starter carl205

    (@carl205)

    I tried the customizer with no results. I went to posts-categories and looked in the address bar for the ID# and slug. I could not find the body tag and its class that you mention above. So, I put the <style> info that you have above into the head of my header template and got the color I want for each category. Does this sound right or did I just stumble into the wrong path that worked anyway? Also, the whole page doesn’t fill with the color, can I make the total screen area my color?
    Thanks again and please note that this is a theme that I am creating from WordPress For Dummies, by Lisa Sabin Wilson 8th edition.

    @carl205

    Good job. If I can’t see your website I don’t know how I can help you further. I don’t know what parts of the page are NOT the color you want. If your theme sets background color in the HTML selector, and the body selector has margins then you would need to override the background-color for HTML. Otherwise, you’ll need to override whatever elements are not getting filled with color, with some fresh CSS.

    Sounds like you’re learning a lot!

    Thread Starter carl205

    (@carl205)

    Thanks,
    Nice to have help from someone who understands that I am creating my own theme and not working with a child theme. Why? because I like the control and the fact that it requires learning more.
    Carl

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘creating custom styles for categories’ is closed to new replies.