Hey

On this thread you guys helped me change the h1 and h3 tags of specific pages. http://forum.bytesforall.com/showthr...1364#post71364

I thought an easier way to do this might be to install a page category plug in (so pages could be assigned categories) and then make the CSS category specific rather than page.

I looked around a few other threads and have tried the code:

body.category-diving-page h1 {
color: #0694e0;
}

Where 'Diving Page' is my category. I've also tried using the category id number, and also removing the body tag from the code

However, I've not had much luck. I've even checked by making a normal post with that category (just to make sure it wasn't a page category issue)

Any advice?

Thanks
Nick

what is the URL?

go look at the source of the page and find the '<body...' statement and look at the classes assigned. See if the class matches what you need.

If you are going to customize your site beyond the available options, you need to learn some CSS (w3schools.com/css is a great resource) and learning how to use FireBug in FireFox (especially the 'examine' tool) is a great way to see the CSS that effects an HTML element

Juggledad,

I do know CSS, but I don't know everything.

This is pretty specific stuff and I am following rules that you yourself set out in this thread - http://forum.bytesforall.com/showthr...ckground+image (see post #14 onwards)

Nick

what is the url so I can see all the CSS that might be applied

Here is the main page with default styling
http://dev.nmcweb.co.uk/african/

Here is a page with body.page-id-68 specific styling
http://dev.nmcweb.co.uk/african/activities/diving-2/

And here is page that I have applied the 'diving page' category to and tried to style using the code body.category-diving-page
http://dev.nmcweb.co.uk/african/page-category-test/

And finally here is a post that has the category applied
http://dev.nmcweb.co.uk/african/test/

I could understand if it's not possible on the categorised page, but I'm not sure why it's not working on the categorised post.

Nick

1) without the possible use of a plugin, pages don't have categories
2) you coded the CSS as

post-headline.category-diving-page {
color: #0694e0;
}

this says "for the HTML element 'post-headline' that has a class of 'category-diving-page' apply this CSS."

There is no HTML element 'post-headline', there is a

<div class="post-463 post type-post status-publish format-standard hentry category-diving-page odd" id="post-463">

so you could code

div.category-diving-page {....}

you have to learn your CSS and the way to code the CSS selectors properly

Yes, that was a mistake - I was trying different things out. I thought I'd reverted it back to the body.category code but obviously hadn't saved

Either way, it looks like the page category doesn't play nice with this code so I'll stick to applying style to individual pages.

I am trying to do the same thing,i am trying to set a background for individual categories in post-kicker section.But i am kind of bugged now,i tried its not working.

My Blog : ShrewdGeek

Ataualpa version : 3.7.3
Wordpress Version : 3.3.1

Please guide me properly,i think i am making mistakes in css styling !!!

your CSS is written incorrectly. You have

 .post-kicker .category-gadgets {background: #cccccc;}

so I want you to explain to me how your CSS Selector ( .post-kicker .category-gadgets ) works. Explain it in english.

Well to explain,
category-gadgets and postkicker are define in class , so i will have to use something like .name {...}

if i change to .category-gadgets .post-kicker {...} , the whole box gets highlighted,but i want only category=gadgets highlighted.

1) CSS is cascading, so something you apply to an HTML element applies to all it's children unless something else over rides it.
2) when you say '.post-kicker .category-gadgets' you are saying "apply this to all elements, and their children, with a class of 'category-gadgets' that are in an element with a class of 'post-kicker'." - ie the order you specify classes IS important.
3) CSS is cascading so the css is applied to what you defined and it's children elements. If you only want it to apply t the children elements then you need to specify the child in the CSS selector.