Template Development

Mura CMS Layout Templates - The Basics

Mura ships with 4 default page layout templates which can handle the layout needs of many sites.

Default templates:

  • one_column.cfm (A simple one column template)
  • two_column_SL.cfm (Two columns, side bar on the left, main content on the right)
  • two_column_SR.cfm (Two columns, sidebar on the right, main content on the left)
  • three_column.cfm (Three columns, sidebars on left and right, content in the middle)

Below is a screen shot of the three_column.cfm template:

Editing and Creating Layout Templates

If you need to edit or create new layout templates there are a few things to bear in mind.

Directories

The layout templates must be kept in the 'templates' directory (/www/[siteID]/includes/templates/) in order for the CMS to find them and display them as options when editing a page in the CMS (go to Site Manager, choose a page to edit, then choose the 'Advanced' tab). Templates are applied to pages via the 'Layout Template' dropdown box.

(In this example, a custom layout template called "home.cfm" has been created.)

To keep the templates minimal, they all pull in some additional include files (such as headers and footers) from the 'inc' directory which is located inside of the 'templates' directory (/www/[siteID]/includes/templates/inc/). It is important to keep these include files in the 'inc' directory and not in the 'templates' directory to keep them from showing up in the 'Layout Template' dropdown box described above.

Display Regions

In addition to pulling in include files from the 'inc' directory, the layout templates also have Display Regions to pull in various Content Objects which CMS users can define in the Site Manager. The ColdFusion code for this is:

#renderer.dspObjects(1)#

The "1" argument passed to the dspObjects function refers to the first display region. In a default Mura site, this would be the 'Left Sidebar' display region.

There are 3 Display Regions by default: 'Left Sidebar', 'Main Content', and 'Right Sidebar'. The number of Display Regions is configurable in the CMS under Site Settings. ('Site Settings' - 'Edit Current Site' - locate the 'Display Regions' section)

When adding new Display Regions, you will need to name the regions in the Display Region Names ("^" Delimiter) field. Each region name must be separated by a caret character ("^").

By default the 'Main Content' display region outputs the page body text content entered in the 'Content' field of the Site Manager under the "Basic" tab.

If you have the need to hard code a particular component into a template (this tends to come up frequently on home pages), you can do so by placing this snippet of ColdFusion into your template:

#renderer.dspObject('component','CONTENTID',request.siteid)#

CSS hooks

Each of the default layout templates has a CLASS on the BODY element that corresponds to the layout template. This provides a very "top-down" hook to change layout styles for each template via css. We recommend carrying this convention over to any custom templates you create.

The BODY element is also assigned a dynamic ID which corresponds to the top level navigational section of the current page. For example, if you have a top level section called "About Us" and a several sub-pages in the "About Us" section, all of the pages in the "About Us" section will be assigned an ID of "aboutus" on the BODY element. This is a hook that can be used if a particular section of your site needs special styling. Make sure to keep this code intact when creating new layout templates.

Each template has a wrapper DIV with an ID of "container". Mura assigns a CLASS to this DIV which corresponds to the specific page name. This CLASS is camelCased and is prepended with "sys" so a page titled "Our Company's Philosophy" would have a CLASS of "sysOurCompanysPhilosophy" on this DIV. This provides a hook for assigning special styles that are specific to a page. Occassionally you might have the same page title for two different pages in different sections. In that case you would need to be more specific in your css targeting "#sectionname .sysSubPageName" rather than just ".sysSubPageName". A relatively rare caveat to this would be if you had two different pages with the exact same page title in the same top level section.

Breadcrumbs

Breadcrumb navigation is included in the default layout templates as well. The ColdFusion code for this is:

#renderer.dspCrumbListLinks("crumbList"," » ")#

This will create the HTML markup for an Unordered List (UL) with each "crumb" as a List Item (LI) The first argument passed to the dspCrumbListLinks() function is the ID that will be applied to the UL element, the second argument is what (if any) HTML text you want to put in the LI before the anchor element (the default is " » "). If breadcrumbs are not wanted or needed, then this code can be deleted or commented out in the template.

Page Title and Page Content

The page title and content is formatted output together by this line of ColdFusion:

#renderer.dspBody(request.contentBean.getbody(),request.contentBean.gettitle(),0)#

If you need to separate the page title from the body content in your templates for layout purposes, you can output the page title with this code:

<h2 class="pageTitle">#request.contentBean.gettitle()#</h2>

The body content can be output independently of the page title using this code:

#renderer.dspBody(request.contentBean.getbody(),'',0)#

The Default Template (default.cfm)

If for some reason a page does not have a template applied to it, then Mura will reference the default.cfm file. By default, the "default.cfm" file includes the "two_column_SL.cfm" layout template. If you need a different layout template for your default template, then you would replace "two_column_SL.cfm" with the appropriate file.

Include Files in the /inc/ Directory

As mentioned above, the layout templates all pull in some additional include files from the 'inc' directory which is located inside of the 'templates' directory (/www/[siteID]/includes/templates/inc/). It is important to keep these include files in the 'inc' directory and not in the 'templates' directory to keep them from showing up in the 'Layout Template' dropdown box of the admin content editor described above.

html_head.cfm

The DOCTYPE declaration, the starting HTML tag, and the HEAD element are all in html_head.cfm.

META description and Meta keywords are dynamically generated by Mura

Meta author is conditionally included if an author is credited for the page content

Meta generator will dynamically display the Mura version you are running (please keep this for good mojo!)

TITLE is generated by Mura based on the page title

Favicon links are included by default. The reason for two links is to make sure that Safari will display the favicon correctly. We recommend using a favicon with your site, but if you choose not to, you can delete or comment out these favicon links.

Stylesheets

To keep the templates tidy, the default convention is to link to one style sheet (styles.css) which in turn imports other style sheets.

By default there is a conditional comment for IE specific css files. If you are customizing your site and it does not require IE specific stylesheets (lucky you!) or if you wish to put your IE specific styles in with your main css, then you can delete or comment out this cfinclude statement.

RSS links

Mura will loop through and find all of the RSS feeds for a given page and put the URLs in the header.

Javascript

By default, Mura sites need to include "global.js" and jQuery or prototype/scriptaculous javascript libraries. jQuery is the default but if you can use prototype/scriptaculous by editing /[siteid]/includes/contentRenderer.cfc and changing line 46:

<cfset this.jslib="jquery"/>

to

<cfset this.jslib=""/>

header.cfm

This is a typical page header with an H1 for the site title, a basic search form, and top level navigation (#primaryNav)

footer.cfm

A basic default footer to get you started