Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

[SOLVED] Page specific styling


  #1  
Old Aug 26, 2011, 04:05 AM
nickmoreton
 
14 posts · Apr 2011
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
  #2  
Old Aug 26, 2011, 04:29 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Aug 26, 2011 at 04:35 AM.
  #3  
Old Aug 26, 2011, 04:37 AM
nickmoreton
 
14 posts · Apr 2011
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
  #4  
Old Aug 26, 2011, 07:33 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Aug 26, 2011, 07:58 AM
nickmoreton
 
14 posts · Apr 2011
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
  #6  
Old Aug 26, 2011, 08:08 AM
nickmoreton
 
14 posts · Apr 2011
Think I've sorted it, using div.post-41 h1, div.post-41 h2

Thanks for the help
  #7  
Old Aug 26, 2011, 08:37 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Aug 26, 2011, 08:51 AM
nickmoreton
 
14 posts · Apr 2011
Actually that also allows me to control widget title colours using the h3 tag, so thanks, that's a much better way

Cheers
Nick

Bookmarks

Tags
css, pages, styles

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] post-specific header image w/ css insert (page-specific ones work, but not o viewdesigninc Header configuration & styling 10 Oct 1, 2012 03:43 PM
Page-Specific HTML/CSS Inserts? eric41 Forum How-To 3 Aug 7, 2010 03:18 PM
How to put specific SWF files on specific pages as header images? kippiper Header configuration & styling 2 Dec 10, 2009 08:23 AM
Page-specific links on sidebar scmittal Sidebars & Widgets 1 Jul 22, 2009 05:52 AM
Page Specific Logos drewpasmith Header configuration & styling 15 May 12, 2009 06:45 AM


All times are GMT -6. The time now is 04:17 PM.


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