Inside Look at Mura CMS Themeing

An Inside Look
at Mura Theming
Ronnie Duke • @modmedia
Tuesday, June 11, 13

About Ronnie

About Ronnie
•Based in Oregon, USA

About Ronnie
•Working with HTML since ’99

About Ronnie
•Starting using Mura (Sava) in 2008

About Ronnie
•Primarily Front End

About Ronnie
•Enough CFML to be dangerous
(Frogrammer)

About Ronnie
•Enough CFML to be dangerous
(Frogrammer)
•Self-proclaimed Muravangelist™

A Mura Theme Can:

A Mura Theme Can:
•Extend core Mura functionality

A Mura Theme Can:
•Contain custom logic

A Mura Theme Can:
•Retrieve information from the
Mura architecture

A Mura Theme Can:
Mura architecture
•Be as flexible as needed

A Mura Theme Can:
Mura architecture
•Be as flexible as needed
•Make your site beautiful

Tools for themes

Tools for themes
•Templates & Overrides

Tools for themes
•Mura $cope

Tools for themes
•Mura $cope
•Extended Attributes

Tools for themes
•Mura $cope
•Content Iterator

Tools for themes
•Mura $cope
•Content Iterator
•Styling and image management

Tools for themes
•Mura $cope
•Content Iterator
•Mobile Rendering

Tools for themes
•Mura $cope
•Content Iterator
•Mobile Rendering
•Site Bundles

Theme Structure

Theme Structure
Base Frameworks
(i.e. Bootstrap)

Theme Structure
CFStatic Compiled
Files

Theme Structure
Class Extensions

Theme Structure
Mura Function
Overrides

Theme Structure
Theme Specific CSS/LESS

Theme Structure
Display Object
Overrides

Theme Structure
Override Mura
events

Theme Structure
Theme Specific
Images

Theme Structure
Theme Specific
Javascript

Theme Structure
Language Settings

Theme Structure
Layout Templates &
Includes

Templates and Overrides

•Custom page templates

•Theme level overrides

•Content Renderer

•Content Renderer
•Event Handler

Custom Page Templates
Your markup – Your way

<cfoutput>
<div>Hello World</div>
</cfoutput>

Standard Includes

Bootstrap Slider

Body

Display Regions

Theme Level Overrides
Default display objects
Control default Mura Objects

Theme Level Overrides
Theme display objects
Control default Mura Objects

Demo
Templates and overrides

Content Renderer

Content Renderer
•Override Mura Functions

Content Renderer
•Write your own custom methods

Content Renderer
•Write your own custom methods
•Control site settings

Content RendererControl Site Settings

Content Renderer
<cfcomponent extends="mura.content.contentRenderer">
<cfscript>
//this.jslib="jquery";
//this.navOffSet=0;
//this.navDepthLimit=1000;
//this.navParentIdx=2;
//this.navGrandParentIdx=3;
//this.navDepthAjust=0;
//this.navSelfIdx=1;
//this.jsLibLoaded=false;
//this.longDateFormat="long";
//this.shortDateFormat="short";
//this.showMetaList="jpg,jpeg,png,gif";
//this.showInlineEditor=true;
//this.imageInList="jpg,jpeg,png,gif";
//this.directImages=true;
//this.personalization="user";
Control Site Settings

Event Handler

Event Handler
•Override default Mura events

Event Handler
•Override default Mura events
•Create custom actions

Event HandlerOverride Page Behavior

Event HandlerOverride Page Behavior
<cffunction name="onPageDefaultBodyRender" output="true"
returntype="void">
<cfargument name="$">
<cfoutput>
<h1>Hello World</h1>
#$.setDynamicContent($.content("body"))#
</cfoutput>
</cffunction>
Display custom content on Body Render

Event Handler
Hook into other Mura events

Event Handler
Hook into other Mura events
<cffunction name="onAfterFormSubmitSave">
<cfargument name="$">
<cfif $.content('title') eq "Contact Us">
<cfmail to="#request.SUBMITTEREMAIL#"
from="marketing@nexusis.com"
subject="Thank You!"
server="#$.siteConfig('mailServerIP')#"
port="#$.siteConfig('mailServerSMTPPort')#"
username="#$.siteConfig('mailServerUsername')#"
password="#$.siteConfig('mailServerPassword')#"
useSSL="yes"
useTLS="yes"
type="html">
<cfoutput>
<p>Dear #request.SUBMITTERNAME#,</p>
<h4>Thank you for contacting us!</h4>
<p>We will be in touch shortly</p>
</cfoutput>
<p>Sincerely,<br/>
Jim Halpert</p>
</cfmail>
</cfif>
</cffunction>
Send an email after a form submits

Event Handler
Lots to choose from!

Event Handler
Lots to choose from!
Application Events
onApplicationLoad onSiteSessionStart
onGlobalSessionStart onSiteSessionEnd
onSiteMissingTemplate onSiteError
onGlobalError onBeforeAutoUpdate
onAfterAutoUpdate onGlobalThreatDetect
Admin Rendering Events
onDashboardPrimaryTop
onDashboardPrimaryBottom
onDashboardSidebarTop
onDashboardSidebarBottom
onContentEdit
onGroupEdit
onUserEdit
onFEToolbarAdd (renders in front end toolbar
add list)
onGroupEdit (renders as a tab when editing a
group)
onUserEdit (renders as a tab when editing a
User)
onContentEdit (Node Level Only) (renders as a
tab when editing a User)
10nAfterSiteDeployRender (renders above list of
sites after manually deploying a site)
onAdminModuleNav (renders inside admin left
nav)
Staging to Production Events
onSiteDeploy onBeforeSiteDeploy
onAfterSiteDeploy onAfterSiteDeployRender
Login Events
onSiteLogin onGlobalLogin
onSiteLoginSuccess onGlobalLoginSuccess
onSiteLoginBlocked onGlobalLoginBlocked
Content Events
onBeforeContentSave (Node Level Only)
onBefore{type}Save
onBefore{type}{subType}Save
onAfter{type}Save
onAfter{type}{subType}Save
onAfterContentSave (Node Level Only)
onBeforeContentDelete (Node Level Only)
onBefore{type}delete
onBefore{type}{subType}delete
onAfterContentDelete (Node Level Only)
onAfter{type}delete
onAfter{type}{subType}delete
onBeforeContentSort
onAfterContentSort
onBeforeContentDeleteVersionHistory (Node
Level Only)
onBefore{type}DeleteVersionHistory
onBefore{type}{subType}DeleteVersionHistory
onAfterDeleteVersionHistory (Node Level Only)
onAfter{type}DeleteVersionHistory
onAfter{type}{subType}DeleteVersionHistory
onBeforeContentDeleteVersion (Node Level
Only)
onBefore{type}ContentDeleteVersion
onBefore{type}{subType}ContentDeleteVersion
onAfterContentDeleteVersion (Node Level Only)
onAfter{type}ContentDeleteVersion (Node Level
Only)
onAfter{type}{subType}ContentDeleteVersion
Content Comment Events
onBeforeCommentUpdate
onBeforeCommentCreate
onBeforeCommentSave
onBeforeCommentDelete
onAfterCommentUpdate
onAfterCommentCreate
onAfterCommentSave
onAfterCommentDeleteCategory Events
onBeforeCategoryUpdate
onBeforeCategoryCreate
onBeforeCategorySave
onBeforeCategoryDelete
onAfterCategoryUpdate
onAfterCategoryCreate
onAfterCategorySave onAfterCategoryDelete
Feed Events
onBeforeFeedUpdate onBeforeFeedCreate
onBeforeFeedSave onBeforeFeedDelete
onAfterFeedUpdate onAfterFeedCreate
onAfterFeedSave onAfterFeedDelete
User Events
onBeforeUserUpdate onBeforeUserCreate
onBeforeUserSave onBeforeUserDelete
onBeforeUser{subType}Update
onBeforeUser{subType}Create
onBeforeUser{subType}Save
onBeforeUser{subType}Delete
onAfterUserUpdate onAfterUserCreate
onAfterUserSave onAfterUserDelete
onAfterUser{subType}Update
onAfterUser{subType}Create
onAfterUser{subType}Save onAfterUser{subType}
Delete

Demo
Event Handler

Mura Scope
Access content attributes

Mura Scope
$.content(‘title’)
Get the page’s title

Mura Scope
$.content(‘title’)
Get the page’s title
$.content().getImageURL(‘large’)
Get the associated image

Mura Scope
Audience
Body
contentid
Created
Credits
Display
DisplayStart
Displaystop
FeatureStart
FeatureStop
FileExt
FileID
Filename
Title
HTMLTitle
URLTitle
MenuTitle
KeyPoints
LastUpdate
LastUpdateBy
MetaDesc
MetaKeyWords
Notes
ReleaseDate
Summary
Tags
Template
Type
SubType

Mura Scope
Insert Mura objects

Mura Scope
Insert Mura objects
$.dspObject(‘component’,‘Some Component’)
Insert user-editable content into your templates!

Mura Scope
Insert Mura objects
$.dspObject(‘component’,‘Some Component’)
Insert user-editable content into your templates!
$.dspThemeInclude(‘display_objects/my_object.cfm’)
Include custom files

The [mura] tag

The [mura] tag
Access Mura Scope methods in the Mura admin
[mura]$.dspObject(‘component’,‘Some Component’)[/mura]

The [mura] tag
Access custom methods created in contentRenderer.cfc
[mura]dspMyFunction()[/mura]
Access Mura Scope methods in the Mura admin
[mura]$.dspObject(‘component’,‘Some Component’)[/mura]

Demo
Mura $cope

Extended Attributes
Collect and Store Additional Data

Extended Attributes
What you can extend

Extended Attributes
What you can extend
Everything!

conﬁg.xml.cfm
Deploy custom class extensions
directly from your theme!

conﬁg.xml.cfm
<theme>
    <extensions>
        <extension type="Folder" subType="Quiz"
hasBody="0" hasSummary="0">
            <attributeset name="Attribute Set Name"
container="Basic">
                <attribute
                    name="attribute1Name"
                    label="Attribute 1"
                    type="TextBox"
                    hint="Attribute 1 Hint"
                    defaultValue="Attribute 1"
                    required="true"
                    validation=""
                    regex=""
                    message=""
                    optionList=""
                    optionLabel="" />
            </attributeset>
        </extension>
    </extensions>
</theme>

Demo
Extended Attributes

Content Iterator

Content Iterator
•Retrieve and display Mura
content

Content Iterator
content
•Utilize Mura Content Collections

Content Iterator
content
•Use your own markup

Content Iterator
content
•Use your own markup
•No need to write custom
queries

Content Iterator
Setup your feed

Content Iterator
Loop through content

Content Iterator
<cfset feed=$.getBean("feed").loadBy(name="From Our Blog",siteID=
$.event("siteid"))>
<cfset iterator=feed.getIterator()>
<cfif iterator.hasNext()>
<div>
<cfloop condition="iterator.hasNext()">
<cfset item=iterator.next()>
<div>Looped Content</div>
</cfloop>
</div>
</cfif>
Loop through content

Demo
Content Iterator

Images & Styling

Images & Styling
•Dynamic CSS Hooks

Images & Styling
•LESS

Images & Styling
•LESS
•CF Static

Images & Styling
•LESS
•CF Static
•Mura Bootstrap

Images & Styling
•LESS
•CF Static
•Mura Bootstrap
•Font Awesome

Images & Styling
•LESS
•CF Static
•Mura Bootstrap
•Font Awesome
•Robust Image Management

Dynamic CSS Hooks
Hook into top level Body ID’s,
Containers, and Nav Items

LESS CSS
• Dynamic CSS Language

LESS CSS
• Built in functions and variables

LESS CSS
• MUCH quicker!

LESS CSS
• MUCH quicker!
•If you haven’t started using
LESS, today is the day!

CF Static

CF Static
•Automatically compress and
minify CSS, LESS, Javascript &
CoffeeScript

CF Static
CoffeeScript
•Create dependencies and
alternate IE includes

CF Static
CoffeeScript
•Create dependencies and
alternate IE includes
•All minified files are saved –
automatically updated

Demo
CF Static & LESS

Mura Bootstrap

Mura Bootstrap
•Default theme for Mura 6

Mura Bootstrap
•Scaffolding

Mura Bootstrap
•Scaffolding
•Uses LESS

Mura Bootstrap
•Scaffolding
•Uses LESS
•Built in fluid, responsive layout

Mura Bootstrap
•Scaffolding
•Uses LESS
•Built in fluid, responsive layout
•Carousel function

Font Awesome

Font Awesome
•Built into Bootstrap theme

Font Awesome
•302 icons to date

Font Awesome
•Vector icons (scalability)

Font Awesome
•CSS Control

Font Awesome
•CSS Control


Robust Image Management

•Custom image sizes

•Admin image editing

•Admin image editing
•Custom sizes are cached

<img src=”#$.content().getImageURL()#” />
Use associated image in your templates

<img src=”#$.content().getImageURL(width=100,height=100)#” />
Pass in custom sizes

<img src=”#$.content().getImageURL(width=100,height=100)#” />
Pass in custom sizes
<img src=”#$.content().getImageURL(‘myCustomImgSize’)#” />
Use custom image sizes

Demo
Images

Mobile Rendering

Mobile Rendering
•Automatically detect and
serve up mobile content

Mobile Rendering
•jQuery Mobile

Mobile Rendering
•jQuery Mobile
•Admin mobile controls

Site Bundles

Site Bundles
•Distribute themes with content

Site Bundles
•Distribute themes with content
•Includes all pages, form
responses, images, version
history, plugins, users etc.

Thanks!
Ronnie Duke
 ronnie@themodmedia.com
 themodmedia.com
@modmedia

Inside Look at Mura CMS Themeing

Recommended

Recommended

More Related Content

Similar to Inside Look at Mura CMS Themeing

Similar to Inside Look at Mura CMS Themeing (20)

Recently uploaded

Recently uploaded (20)

Inside Look at Mura CMS Themeing