Since the design is driven by CSS, there are a number of tools to help the designer target elements on the a particular page. The ID structure helps to target things either by template classification or by section/subsection.
Here is the core structure of the divs behind every template page.
Including the standard html and body elements, there is also #body, #canvas, and #page div that make up the shell of the design.
Section/Subsection targeting:
To assist with targeting things depending on where the user is on the site (for example within a section vs. homepage) we have the section and subsection divs. They inherit their name from the section, so if the section were called Food that div would automatically be named #section_food when the user is in that section, as well as any subsection and content within it.
In the section navigation, the list items also have unique classes to help with targeting. So for example, the corresponding navigation item for the Food section would have an id like this .menu_section_food. Navigation items also have additional classes like start (.section_menu_start), end (.section_menu_end) and selected (.selected).
These two features come in handy when doing section/subsection based color coding, section/subsection based applying different header styles, or highlighting certain navigational elements.
Pagetype targeting:
Every template has a pagetype ID associated with it. You can use these IDs to target the elements on the template based on the kind of page it is and not where its located.
These are all the pagetypes in use:
- #pagetype_homepage
- #pagetype_section
- #pagetype_subsection
- #pagetype_tags
- #pagetype_article
- #pagetype_event
- #pagetype_location
- #pagetype_page (Pages using template)
- #pagetype_locationsearch
- #pagetype_locationmap
- #pagetype_eventsearch
- #pagetype_eventmap
- #pagetype_directorylist (will be removed in v2.15)
- #pagetype_directorymap (will be removed in v2.15)
- #pagetype_eventsubmit
- #pagetype_contact
- #pagetype_notfound
Comments