Hey there

I was wondering if it was possible using CSS inserts to change the styling of the page title specific to a page id? I have done so with the background image, using "body.page-id-47", but when I tried "h1.page-id-47" it didn't work.

I've been doing it trial and error, so I'm probably being dumb, but can't see anything on the forums about it so far.

Ideally, some sort of general rule for styling tags (h1, h2) specific to page ids would be great.

Any help would be greatly appreciated

Cheers
Nick

couple things
1) there are two parts to CSS: the CSS Selector and the RULES
2) you need to learn this and a good resource is w3schools.com/css
3) learn to use FireBug in FireFox so you can examine the elements and see the css

The rules are easy, they are the 'color: red;' or 'text-align: center;'

The selectors can be complex but are basically this pattern
html-element#id-name ..... or
html-element.class-name .....
The more general, the more elements it applies to '.frog {color: red;}' will cause every HTML element with a class of 'frog' to have its text to be red -UNLESS there is another css statement where the selector is more specific that overrides it.

oh an ID must be unique, classes can be used in many elements.

Thanks Juggledad but I think you may have misunderstood me slightly, or I've misunderstood your reply.

If I refer you to this thread about changing header image on specific pages; http://forum.bytesforall.com/showthr...ckground+image

I am looking to do something similar with the page titles.

So, on the home page I want the page title to be orange, but on 'about us' I want it to be green.

Obviously I could just hard code this using h1 classes into the body text of the page, but it would be very useful if I could apply rules in the CSS that do it automatically.

Cheers
Nick

No, I understand your question and my explanation was an attempt to lead you to educate yourself. You used "h1.page-id-47" as an example of cee you sued. That will only effect a h1 that has a class of 'page-id-47' as part of it ie <h1 class="page-id-47">...

That is a valid CSS selector, the question is"Does an H1 with a class of 'page-id-47' exist on the page?' if not, it won't do anything.

OK, so is there a way to do this then? or not?

The active css (using firebug) is div.post-headline h1, div.post-headline h2. Can I make these page specific using css?

Nick

Think I've sorted it, using div.post-41 h1, div.post-41 h2

Thanks for the help

you could also use

body.page-id-47 div.post-headline h1

or possibly shorten it to

body.page-id-47 div h1

or

body.page-id-47 h1

or

.page-id-47 h1

Actually that also allows me to control widget title colours using the h3 tag, so thanks, that's a much better way

Cheers
Nick