[SOLVED] Page specific styling
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
HTML Code:
body.page-id-47 div.post-headline h1 HTML Code:
body.page-id-47 div h1 HTML Code:
body.page-id-47 h1 HTML Code:
.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 |
All times are GMT -6. The time now is 06:05 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.