Blog

Mura CMS Theme Development: Layout Templates

July 22, 2015 by Ronnie Duke

In Mura CMS, it is easy to create as many layout templates as you wish to format your theme pages in. Layout templates are assigned to your Mura pages within the site manager.

If you think about a typical HTML page in the browser, it will generally consist of the following elements:

  • HTML Head (Meta tags, CSS, JavaScript Libraries)
  • Header (Site logo/banner & Navigation)
  • Container
  • Main body content ( primary content section, sidebars, etc)
  • Footer (bottom nav, copyright, contact info, etc)
  • HTML footer elements (additional JavaScript libraries and init code)

 

<!DOCTYPE html>
<html>
<head>
<!-- Meta tags and CSS -->
</head>
<body>
<div class="container">
<!-- Main Body Content, sidebars, etc -->
</div>
<footer>
<!-- Global Footer Items -->
</footer>
<!-- Additional JS and Footer Code -->
</body>
</html>

 

This structure is essentially what a Mura layout template comprises, but you can build your layout templates however you want. For example, if you wanted a special landing page or section of your site that included a separate header, CSS, etc, you could create that template and apply it to a Mura page in the site manager. Your templates could even be 100% HTML if you want them to (of course, nothing would be dynamic at that point). 

Creating a New Layout Template

To create a layout template, begin a new .cfm file in the templates directory of your theme. The templates drop down in the site manager will look inside that folder and automatically see any .cfm files, allowing you to apply them to that page.

To test this, we can create a helloWorld.cfm page in our templates directory and apply that to any page:

  1. In your site files, navigate to your {siteID}/includes/themes/{theme}/templatesdirectory
  2. Create a new file called helloWorld.cfm
  3. Paste the following code and save
<cfoutput>
Hello World
</cfoutput>

 

Apply the new template to a page in Mura

  1. In the site manager, click the template icon next to any page.
  2. Select the new helloWorld.cfm template
  3. Click the globe icon to preview the page

Adding Dynamic Includes

Now that you understand how templates are loaded, you can start building them out to be more dynamic by creating global includes for the HTML header, header & footer. 

Start by creating an includes directory inside your templates directory in your theme. It may look something like this: {theme name}/templates/inc

In this folder, you can create as many different includes as you want. I would recommend starting with the following:

  • html_head.cfm (Meta tags, CSS, JavaScript Libraries)
  • header.cfm (Site logo/banner & Navigation)
  • footer.cfm (bottom navs, copyright, contact info, etc)
  • html_footer.cfm (additional JavaScript libraries and init code)

We can include these files within our template by using the <cfinclude> tag like so:

<cfinclude template="inc/html_head.cfm">

Note: the template path is relative to the file we are calling it from.

As you build out your additional templates, you can reuse these includes so if you ever need to make a change, you only have to edit one file and it will be updated globally across all of your templates. 

Your full template may look something like this:

<cfoutput>
<cfinclude template="inc/html_head.cfm" />
<body id="#$.getTopID()#" class="depth-#$.content('depth')# #$.createCSSHook($.content('menuTitle'))#">
<cfinclude template="inc/navbar.cfm" />
<div class="container">
<div class="row">
<aside class="col-lg-3 col-md-3 col-sm-4 col-xs-12 sidebar">
#$.dspObjects(1)#
</aside><!-- /.span -->
<section class="col-lg-9 col-md-9 col-sm-8 col-xs-12 content">
<cfinclude template="inc/breadcrumb.cfm" />
#$.dspBody(
body=$.content('body')
, pageTitle=$.content('title')
, crumbList=false
, showMetaImage=true
, metaImageClass='thumbnail'
)#
#$.dspObjects(2)#
</section>
</div><!--- /.row --->
<cfinclude template="inc/footer.cfm" />
</div><!--- /.container --->
<cfinclude template="inc/html_foot.cfm" />
</cfoutput>

You can create as many templates as you wish such as 

  • one_column.cfm
  • twoCol_SR.cfm (sidebar is on the right)
  • two_Col_SL.cfm  (sidebar is on the left)
  • three_column.cfm
  • etc.

The Home Page Template

In most websites, it is common that the homepage is quite a bit different than the other pages in the site. It may contain a larger header with a slideshow, additional calls to action and so on. Because of this, we typically include a home.cfm template with every theme to account for all of this special markup. In addition, you can add a top body id or class of home to further enable you to hook into the homepage styles with CSS and account for any differences there.

Also see the Mura CMS Layout Templates instructional video at GetMura.com.

More About Mura Themes

Mura CMS v6 Documentation: Front End Workflow
http://docs.getmura.com/v6/front-end/a-typical-workflow/

Download Mura Themes: GetMura.com/themes

Premium Mura CMS Themes: Themeforest.net

This article is part of an original series at Tuts+.com titled "Theme development with Mura CMS" by Ronnie Duke. Further documentation for Mura CMS developers and content managers is available at docs.getmura.com. Learn more about Mura's powerful features and flexible options at www.getmura.com.

About the Author

Ronnie Duke

Ronnie Duke is a product development engineer and Marketo Certified Expert at Blue River Interactive Group, creators of the Mura Platform. He enjoys solving technical challenges and creating great experiences for users. 

@RonnieTheDuke

Comments

Post a Comment

Required Field