Saturday, August 4, 2007
Customizing a section using the 'body tag' feature
Easy way to make one section unique without having to add more HTML content to the page.
Suppose you have a section that requires each H2 tag to have more space above it than all the other pages in the site? Rather than edit every H2 tag in that section by adding a class, wouldn't it be much easier to just add a class to the body tag of that section?
Well this is easy to do in StruturoTM. Simply edit the section document for those pages and add a word into the "Body Class" field. This will put a class tag onto the body tag on all HTML pages in that section.
For example, in the gallery section, it was necessary to space each screenshot header tag slightly differently than the rest of the site. So what we did was add a class called gallery to the Gallery section. So now when you are on the Gallery page, the H2 tag has taller margins than the other H2 tags in the rest of the site.
The CSS is as follows:
body.gallery div#main h2 {margin-top:20px;}
The result is that the Gallery section is easily styled differently than the rest of the site without making any changes to code or HTML. This is a very powerful feature of CSS and results in less coding of content.
