cmsms template tutorial part 2

Let's round up what we have done so far:

• we have a template with a header, a content pane left, a navigation pane right and a footer.
• we added a basic stylesheet for the page
• we added a database template for the navigation

I have installed a fresh instance of cmsms and the result should look like below.


All of this is now ready to be styled. I am no designer and no css guru either, you can find some inspiration in the default stylesheets.

splitting the menu

I like to split my navigation, a horizontal navigation for main sections and a vertical navigation for sub pages or vice versa.
In the admin if you display the modules you can click 'MenuManager' which will open a help page. There are a couple of options that allow us to split our menu.

• (optional) lang="en_US" - Parameter is used to specify what language to use for display on the frontend. Not all modules support or need this.
• (optional) collapse="1" - Turn on (set to 1) to have the menu hide items not related to the current selected page.
• (optional) items="contact,home" - Use this item to select a list of pages that this menu should display. The value should be a list of page aliases separated with commas.
• (optional) number_of_levels="1" - This setting will only allow the menu to only display a certain number of levels deep.
• (optional) show_all="0" - This option will cause the menu to show all nodes even if they are set to not show in the menu. It will still not display inactive pages however.
• (optional) show_root_siblings="1" - This option only becomes useful if start_element or start_page are used. It basically will display the siblings along side of the selected start_page/element.
• (optional) start_level="2" - This option will have the menu only display items starting a the given level. An easy example would be if you had one menu on the page with number_of_levels='1'. Then as a second menu, you have start_level='2'. Now, your second menu will show items based on what is selected in the first menu.
• (optional) start_element="1.2" - Starts the menu displaying at the given start_element and showing that element and it's children only. Takes a hierarchy position (e.g. 5.1.2).
• (optional) start_page="home" - Starts the menu displaying at the given start_page and showing that element and it's children only. Takes a page alias.
• (optional) template="simple_navigation.tpl" - The template to use for displaying the menu. Templates will come from the database templates unless the template name ends with .tpl, in which case it will come from a file in the MenuManager templates directory (defaults to simple_navigation.tpl)
• (optional) excludeprefix="" - Exclude all items (and their children) who's page alias matches one of the specified (comma separated) prefixes. This parameter must not be used in conjunction with the includeprefix parameter.
• (optional) includeprefix="" - Include only those items who's page alias matches one of the specified (comma separated) prefixes. This parameter cannot be combined with the excludeprefix parameter.

When you take a closer look you will find out that it was not necessary to pull the navigation template in the database, you could specify the template as an option. Putting the template in the database gives you the option to make some modifications.

Let's give it a try, we add a div under the header for that purpose.

<div id="navigation-top">
{cms_module module='menumanager' template='cmstut' number_of_levels='1'}
</div>

We modify the menu in the navigation pane to start at level 2.

<div id="menu">
{cms_module module='menumanager' template='cmstut' start_level='2'}
</div>

We need a minimal amount of styling to make the list horizontal. There are several ways to achieve this but for simplicity I display the li elements inline. I also added a border.

#navigation-top
{
border: solid 1px #aaaaaa;
margin: 0;
padding: 1em;
}

#navigation-top ul
{
margin: 0;
padding: 0;
}

#navigation-top  li
{
display: inline;
padding: 1em;
margin: 0;
}

This is how it looks.



breadcrumbs

To complete our navigation we can also add breadcrumbs. A no-brainer really since there is a tag available, just add {breadcrumbs} to the template.
Here I put it above the content.

<div id="bd">
 <div id="yui-main">
 <div class="yui-b"><div class="yui-g">
     <div id="breadcrumbs">you are here {breadcrumbs}</div>
 <!-- start content -->
<div id="content">
<h1>{title}</h1>
{content}
</div>
<!-- end content -->

This completes the mechanics of the template, it can be styled by css.