Initial Setup

In the A9 perpetua console, check the boxes next to "Sub Pages View" and "Sub Page Box" to add a sub page module with 3 levels of navigation. This gives the ability for the client to add a subpage module to their site from the Add Items menu. When they edit an added subpage module, it is defaulted to only display one level (the subpages of the current page. They can then select it to display the parent page, subpages of a specific page, or display inline which will show any third level subpages with an automatic indent.

Styling

Modify the existing template file called "_subpagemodule.css" with the concepted styling for the site you are building. In the subpage layout file, include the _subpagemodule.css file. Be sure that you style and test all possible levels of navigation. Test the subpage module with the "show parent" box checked and with the third level navigation. Make sure it looks true to concept.

Subpage Module

When adjusting or creating the css for the sub page modules. To have the text spaced properly and handle overflow text properly, use padding and margin instead of text-indent and line-height. This will allow the text when it needs to go to multi-line to do a normal line break with no ex-dent.

You can (and should) style the following elements:

  • .subpage_module_container
  • .subpage_module_header
  • .subpage_module_footer
  • .subpage_module
  • .subpage_module li a:link 
  • .subpage_module li a:visited
  • .subpage_module li a:hover
  • .subpage_module li a.active
  • .subpage_module li.parent
  • .subpage_module li li a:link
  • .subpage_module li li a:visited
  • .subpage_module li li a:hover
  • .subpage_module li li a.active

Some of these are combined in the _subpagemodule.css template because they have the same styling. Add the background color or image of the subpage module header, footer, hover and active classes. Add the repeating background for the body to the .subpage_module attribute.