Mura CMS Theme Development: Layout Templates

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:

In your site files, navigate to your {siteID}/includes/themes/{theme}/templatesdirectory
Create a new file called helloWorld.cfm
Paste the following code and save

<cfoutput>
    Hello World
</cfoutput>

Apply the new template to a page in Mura

In the site manager, click the template icon next to any page.
Select the new helloWorld.cfm template
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.

blogarchive

Creating a New Layout Template

Apply the new template to a page in Mura

Adding Dynamic Includes

The Home Page Template

Developers

Marketers