The "magic" starts with this in my Vine Type template:
< body class="$_nav_section" >
When Vine Type generates the XHTML for each page, the navigation section name appears as a class name for the body element. For the home page, Vine Type renders < body class="Home" >
Disappearing act
You'll notice that the three large boxes only appear on the home page. If you look into the CSS file of that site you'll see among the CSS these two entries:
#mainservices {display:none;}
body.Home #mainservices {display: block;}
Both of these lines of CSS appear on every page, but only the home page has XHTML that matches the second entry
- All pages see the first entry and remove the #mainservices div. That's the div with the three faces on it
- All pages see the second entry that "brings it back" but none of the pages besides the Home page will apply this entry because their body's class name doesn't match "Home" so all pages besides the home page don't apply the second entry.
In this way, I can apply default styling for the whole site, and then override some settings by starting off the CSS entry with body.Home
Sincerely,
Carl
-----
vine type - content management with standards in mind -
vinetype.com-----