Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)
-   -   [SOLVED] Page specific styling (http://forum.bytesforall.com/showthread.php?t=15216)

nickmoreton Aug 26, 2011 04:05 AM

[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

juggledad Aug 26, 2011 04:29 AM

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.

nickmoreton Aug 26, 2011 04:37 AM

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

juggledad Aug 26, 2011 07:33 AM

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.

nickmoreton Aug 26, 2011 07:58 AM

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

nickmoreton Aug 26, 2011 08:08 AM

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

Thanks for the help

juggledad Aug 26, 2011 08:37 AM

you could also use
HTML Code:

body.page-id-47 div.post-headline h1
or possibly shorten it to
HTML Code:

body.page-id-47 div h1
or
HTML Code:

body.page-id-47 h1
or
HTML Code:

.page-id-47 h1

nickmoreton Aug 26, 2011 08:51 AM

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 04:58 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.