Master Templates
From Snapp CMS Developer Documentation
Master templates control the overall look and feel of your site.
The default master template for a site is located in:
/templates/default/
Typically, master templates contain common elements to all pages, including:
- Site header
- Site-wide media, CSS and Javascript
- Common navigation components
- Site footer
Structure
The typical template contains the following file structure:
| |
| Master site-wide CSS |
| CSS for printing pages |
| Site-wide images |
| Master HTML template (contains header and footer) |
| Site-wide JS |
Basic Master HTML Template
The following is an example of a basic master HTML template, broken up into components.
The template starts off like any normal HTTP page, defining the DocType and various meta tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Language" content="en" /> <meta name="author" content="Joe Bloggs" /> <meta name="copyright" content="Copyright © 2008-2010 My Company Pty. Ltd." /> <meta name="Revisit-After" content="7 Days" /> <meta name="robots" content="follow,index" />
Next, the first piece of dynamic code - the CMS-generated meta tags. These are comprised of SEO information that is set on a page-by-page basis via the SEO Options panel in the Website Manager:
<!-- START: Insertion of Custom Meta Tags --> <?php echo $cms->getMetaTags()?> <!-- END: Insertion of Custom Meta Tags -->
Following the meta tags we include the links. Favicons and CSS.
Here we demonstrate the loading of site-wide CSS assets. The calls to $cms->getTemplateCSS() pulls in CSS files
from the current template "css" folder. If there's no parameter supplied, the file will be default.css. Otherwise it will be <parameter>.css.
<link rel="shortcut icon" type="image/x-icon" href="/cms/favicon.ico" />
<!-- ************ CSS Style Sheet for Master Template ******************** -->
<link rel="stylesheet" type="text/css" media="all" charset="utf-8" href="/<?php echo $cms->getTemplateCSS()?>" />
<!-- ************ CSS Style Sheet Printing (optional) ******************** -->
<link rel="stylesheet" type="text/css" media="print" charset="utf-8" href="/<?php echo $cms->getTemplateCSS('print')?>" />
Next, we pull in module-specific CSS assets. See Asset_loading for information on module-specific vs site-wide assets:
<!-- ************ CSS Style Sheet for Module Template ******************** --> <link rel="stylesheet" type="text/css" media="screen, projection" charset="utf-8" href="/<?php echo $cms->getModuleCSS()?>" /> <!-- END: External CSS Files -->
Set our page's title dynamically:
<title><?php echo $cms->pageTitle()?></title> </head>
Here's an example of using a page property to assist in page layout by setting a CSS class:
<body class="<?php echo $cms->page->module?>">
Now we have some juicy code - our first widget!
SnappCMS gives you a variety of Widgets which you can insert into your templates, or directly into your page content, to accomplish frequently performed tasks. The example below shows how you would make use of a QuickSearch widget, which gives you a text field and submit button to access the site's search page.
The first parameter supplied, "class", simply sets the CSS class for the outermost HTML element associated with the widget.
You can have multiple search pages, each displaying their results in a different format, so the second parameter specifies
the page to use (See Configuration for information on the $cms->config structure)
<div id="masterTemplateContainer">
<div class="siteContent">
<!--START: Page Header -->
<div id="siteHeader">
<?php echo $cms->loadWidget('QuickSearch',array('class'=>'quicksearch','page'=>$cms->config->Site->search))?>
Next, we put a logo on the page and make any click on it link back to the home page. the call to $cms->buildURL creates an SEO-friendly
URL for a nominated page. The call to $cms->sitemap->getPage() finds that page from the configuration parameter (See Configuration for information on the $cms->config structure):
<a <?php echo $cms->buildURL(
$cms->sitemap->getPage($cms->config->Site->defaultPage)
)?> class="logo">
<img alt="Snapp" src="/logo.png" width="128" height="128" border="0"/>
</a>
</div>
We now load our header menu. See Menus for more information about how menus work:
<div id="globalMenu">
<?php echo $cms->loadMenu('Basic',
array(
'menu_id'=>$cms->config->Site->mainMenu,
'singleLevel'=>false,
'levels'=>1
)
)?>
</div>
<!-- END: Page Header -->
Another widget, this time breadcrumbs for the current page to help the user out:
<!--START: Page Content -->
<div class="moduleContentContainer">
<?php echo $cms->loadWidget('BreadCrumbs',array('separator' => ' > '))?>
Do the business of actually loading the page. This calls the current page's module controller script, which takes care of the page content:
<? include($cms->loadModule()); ?> </div> <!-- END: Page Content -->
Now we start to tidy up the bottom of the page. A footer menu gives us some extra navigation:
</div> <!-- End of .siteContent -->
<!-- START: Footer Menu -->
<div id="siteFooter">
<span id="copyright">
Copyright © 2008 - 2010. My Company All rights Reserved
</span>
<?php echo $cms->loadMenu('Simple',array('menu_id'=>$cms->config->Site->footerMenu,'seperator'=>'|'))?>
</div>
Add the Javascript in last of all. SnappCMS supplies some built in Javascipt libraries (See Javascript) for your site. We pull them in and finish off the page loading.
<!-- END: Footer Menu -->
</div> <!-- End of #masterTemplateContainer -->
<script type="text/javascript" src="<?php echo $cms->loadJS('mootools')?>"></script>
<script type="text/javascript" src="<?php echo $cms->loadJS('form.validator')?>"></script>
<script type="text/javascript" src="<?php echo $cms->loadJS('swfobject')?>"></script>
<!-- START: Add any external Javascript Files Here -->
<!-- END: External Javascript Files -->
</body> </html>
Here's the completed page template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="en" />
<meta name="author" content="Joe Bloggs" />
<meta name="copyright" content="Copyright © 2008-2010 My Company Pty. Ltd." />
<meta name="Revisit-After" content="7 Days" />
<meta name="robots" content="follow,index" />
<!-- START: Insertion of Custom Meta Tags -->
<?php echo $cms->getMetaTags()?>
<!-- END: Insertion of Custom Meta Tags -->
<link rel="shortcut icon" type="image/x-icon" href="/cms/favicon.ico" />
<!-- ************ CSS Style Sheet for Master Template ******************** -->
<link rel="stylesheet" type="text/css" media="all" charset="utf-8" href="/<?php echo $cms->getTemplateCSS()?>" />
<!-- ************ CSS Style Sheet Printing (optional) ******************** -->
<link rel="stylesheet" type="text/css" media="print" charset="utf-8" href="/<?php echo $cms->getTemplateCSS('print')?>" />
<!-- ************ CSS Style Sheet for Module Template ******************** -->
<link rel="stylesheet" type="text/css" media="screen, projection" charset="utf-8" href="/<?php echo $cms->getModuleCSS()?>" />
<!-- END: External CSS Files -->
<title><?php echo $cms->pageTitle()?></title>
</head>
<body class="<?php echo $cms->page->module?>">
<div id="masterTemplateContainer">
<div class="siteContent">
<!--START: Page Header -->
<div id="siteHeader">
<?php echo $cms->loadWidget('QuickSearch',array('class'=>'quicksearch','page'=>$cms->config->Site->search))?>
<a <?php echo $cms->buildURL(
$cms->sitemap->getPage($cms->config->Site->defaultPage)
)?> class="logo">
<img alt="Snapp" src="/logo.png" width="128" height="128" border="0"/>
</a>
</div>
<div id="globalMenu">
<?php echo $cms->loadMenu('Basic',
array(
'menu_id'=>$cms->config->Site->mainMenu,
'singleLevel'=>false,
'levels'=>1
)
)?>
</div>
<!-- END: Page Header -->
<!--START: Page Content -->
<div class="moduleContentContainer">
<?php echo $cms->loadWidget('BreadCrumbs',array('separator' => ' > '))?>
<? include($cms->loadModule()); ?>
</div>
<!-- END: Page Content -->
</div> <!-- End of .siteContent -->
<!-- START: Footer Menu -->
<div id="siteFooter">
<span id="copyright">
Copyright © 2008 - 2010. My Company All rights Reserved
</span>
<?php echo $cms->loadMenu('Simple',array('menu_id'=>$cms->config->Site->footerMenu,'seperator'=>'|'))?>
</div>
<!-- END: Footer Menu -->
</div> <!-- End of #masterTemplateContainer -->
<script type="text/javascript" src="<?php echo $cms->loadJS('mootools')?>"></script>
<script type="text/javascript" src="<?php echo $cms->loadJS('form.validator')?>"></script>
<script type="text/javascript" src="<?php echo $cms->loadJS('swfobject')?>"></script>
<!-- START: Add any external Javascript Files Here -->
<!-- END: External Javascript Files -->
</body>
</html>
