Getting It Done With Mura CMS Themes

Getting It DoneWith Mura ThemesSteve Withington

Monday, 16 June 14

OverviewWhat are we talking about?

Monday, 16 June 14

What are we talking about?

Monday, 16 June 14

What are we talking about?• Mura CMS Themes

• Where do I start?• How do I create layouts?• What can I use?• Can I customize that?• Can I make my own?• Where can I learn more?

Monday, 16 June 14

Let’s GoWhere do I start?

Monday, 16 June 14

Where do I start?• SiteID

Monday, 16 June 14

Where do I start?

Monday, 16 June 14

Where do I start?• /{SiteID}/includes/themes/{ThemeName}

Monday, 16 June 14

Where do I start?

Monday, 16 June 14

Where do I start?

Monday, 16 June 14

Where do I start?

Monday, 16 June 14

Where do I start?

Monday, 16 June 14

• /templates/default.cfm

Monday, 16 June 14

Review

Monday, 16 June 14

Review• Where themes live

• /{SiteID}/includes/themes/{ThemeName}

Monday, 16 June 14

Review• Where themes live

• /{SiteID}/includes/themes/{ThemeName}• Where layout templates live

• /{SiteID}/includes/themes/{ThemeName}• /templates/default.cfm

Monday, 16 June 14

TemplatesHow do I create layouts?

Monday, 16 June 14

How do I create layouts?• Just like you always have

Monday, 16 June 14

How do I create layouts?• Place files into ‘themes’ directory

Monday, 16 June 14

How do I create layouts?• Place files into ‘themes’ directory

Monday, 16 June 14

How do I create layouts?• Create ‘templates’ directory

Monday, 16 June 14

How do I create layouts?• Create ‘templates’ directory

Monday, 16 June 14

How do I create layouts?• Rename ‘.html’ files to ‘.cfm’

Monday, 16 June 14

How do I create layouts?• Rename ‘.html’ files to ‘.cfm’

Monday, 16 June 14

How do I create layouts?• Create a ‘default.cfm’ layout template

Monday, 16 June 14

How do I create layouts?• Create a ‘default.cfm’ layout template

Monday, 16 June 14

How do I create layouts?• Use commonly used layout template names

Monday, 16 June 14

How do I create layouts?• Use commonly used layout template names

Monday, 16 June 14

How do I create layouts?• Replace any # with ##

Monday, 16 June 14

How do I create layouts?• Wrap all output with <cfoutput></cfoutput> tags

Monday, 16 June 14

How do I create layouts?• Wrap all output with <cfoutput></cfoutput> tags

Monday, 16 June 14

How do I create layouts?

Monday, 16 June 14

How do I create layouts?• Drop in template variables & code snippets

• For example, the relative link for CSS

Monday, 16 June 14

• For example, the relative link for CSSis broken

Monday, 16 June 14

• For example, the relative link for CSSis broken

Monday, 16 June 14

• Easily fixed with a simple template variable:• $.siteConfig(‘themeAssetPath’)

Monday, 16 June 14

How do I create layouts?• Template Variables (some)

Monday, 16 June 14

How do I create layouts?• Template Variables (some)

• $.siteConfig(‘assetPath’)• $.siteConfig(‘themeAssetPath’)• $.siteConfig(‘site’)• $.siteConfig(‘siteid’)• $.content(‘HTMLTitle’)• $.content(‘metaDesc’)• $.content(‘metaKeywords’)

Monday, 16 June 14

How do I create layouts?• Inspecting Available Attributes

• <cfdump var=”#someVariable#” />

Monday, 16 June 14

• <cfdump var=”#$.content().getAllValues()#” />

Monday, 16 June 14

• <cfdump var=”#$.content().getAllValues()#” />

Monday, 16 June 14

• $.content().getAllValues()• $.globalConfig().getAllValues()• $.siteConfig().getAllValues()• $.currentUser().getAllValues()• $.component().getAllValues()

Monday, 16 June 14

How do I create layouts?• Code Snippets (helper functions)

Monday, 16 June 14

• Dynamically generate Primary Navigation

Monday, 16 June 14

• Dynamically generate Primary Navigation• Output the Body/Content

Monday, 16 June 14

• Dynamically generate Primary Navigation• Output the Body/Content• Output Display Objects assigned to content regions

Monday, 16 June 14

• Dynamically generate Primary Navigation• Output the Body/Content• Output Display Objects assigned to content regions

• Display Components

Monday, 16 June 14

How do I create layouts?• Code Snippets

Monday, 16 June 14

• $.dspPrimaryNav( viewDepth=1 , id=‘navPrimary‘ , displayHome=‘always‘ , closeFolders=true)

Monday, 16 June 14

• $.dspPrimaryNav( viewDepth=1 , id=‘navPrimary‘ , displayHome=‘always‘ , closeFolders=true)

Monday, 16 June 14

• $.dspBody( body=$.content(‘body’) , pageTitle=$.content(‘title’) , showMetaImage=true , crumblist=false)

• Use this method instead of $.content(‘body’)

Monday, 16 June 14

• $.dspObjects(regionNumber)

Monday, 16 June 14

• $.dspComponent(‘Component Name or ID’)

Monday, 16 June 14

• Create CSS hooks

Monday, 16 June 14

• Create CSS hooks• <body id=”#$.getTopID()#”

class=”depth#ArrayLen($.event(‘crumbdata’))#”>

Monday, 16 June 14

class=”depth#ArrayLen($.event(‘crumbdata’))#”>• <div id=”container”

class=”#$.createCSSID($.content(‘menuTitle’))#”>

Monday, 16 June 14

class=”depth#ArrayLen($.event(‘crumbdata’))#”>• <div id=”container”

class=”#$.createCSSID($.content(‘menuTitle’))#”>

Monday, 16 June 14

How do I create layouts?• [m] Tags

• Use “Mura Tags” when you want to output dynamic code with HTML Editor content

Monday, 16 June 14

How do I create layouts?• [m] Tags

• Use “Mura Tags” when you want to output dynamic code with HTML Editor content

Monday, 16 June 14

How do I create layouts?• Optionally, include Mura’s CSS for basic styling of Mura-generated output

Monday, 16 June 14

• /{SiteID}/css/mura.X.x.x.min.css

Monday, 16 June 14

• /{SiteID}/css/mura.X.x.x.min.css• /{SiteID}/css/mura.X.x.x.skin.css

Monday, 16 June 14

Review

Monday, 16 June 14

Review• Create ‘templates’ directory

Monday, 16 June 14

Review• Create ‘templates’ directory• Rename any .html files to .cfm & create ‘default.cfm’

Monday, 16 June 14

Review• Create ‘templates’ directory• Rename any .html files to .cfm & create ‘default.cfm’• Replace any # with ##

Monday, 16 June 14

Review• Create ‘templates’ directory• Rename any .html files to .cfm & create ‘default.cfm’• Replace any # with ##• Wrap all output with <cfoutput></cfoutput> tags

Monday, 16 June 14

Review• Create ‘templates’ directory• Rename any .html files to .cfm & create ‘default.cfm’• Replace any # with ##• Wrap all output with <cfoutput></cfoutput> tags• Drop in template variables & code snippets

Monday, 16 June 14

Review• Create ‘templates’ directory• Rename any .html files to .cfm & create ‘default.cfm’• Replace any # with ##• Wrap all output with <cfoutput></cfoutput> tags• Drop in template variables & code snippets• Optionally, include Mura’s CSS for basic styling of Mura-generated output

Monday, 16 June 14

UI OptionsWhat can I use?

Monday, 16 June 14

What can I use?• Any front-end framework you want

Monday, 16 June 14

What can I use?• Any front-end framework you want

Monday, 16 June 14

What can I use?• Any JavaScript library you want

Monday, 16 June 14

What can I use?• Any JavaScript library you want

Monday, 16 June 14

What can I use?• Any JavaScript framework you want

Monday, 16 June 14

What can I use?• Any JavaScript framework you want

Monday, 16 June 14

Review• Use pretty much anything you want

Monday, 16 June 14

Review• Use pretty much anything you want

.Monday, 16 June 14

Default OutputCan I customize that?

Monday, 16 June 14

Can I customize that?• Display Objects

Monday, 16 June 14

Can I customize that?• “Site” Display Objects

• /{SiteID}/includes/display_objects/

Monday, 16 June 14

• /{SiteID}/includes/display_objects/dsp_login.cfm

Monday, 16 June 14

• /{SiteID}/includes/display_objects• /custom/dsp_login.cfm

Monday, 16 June 14

Can I customize that?• “Theme” Display Objects

• /{SiteID}/includes/themes/{ThemeName}• /display_objects/dsp_login.cfm

Monday, 16 June 14

Review

Monday, 16 June 14

Review• /{SiteID}/includes

Monday, 16 June 14

• /display_objects/custom/{displayObject}

Monday, 16 June 14

• /display_objects/custom/{displayObject}• /themes/{ThemeName}/display_objects/{displayObject}

Monday, 16 June 14

ExtensionsCan I make my own?

Monday, 16 June 14

Can I make my own?

Monday, 16 June 14

Can I make my own?• Class Extensions

Monday, 16 June 14

• New Content types

Monday, 16 June 14

• New Content types• New Component types

Monday, 16 June 14

• New Content types• New Component types• New User types

Monday, 16 June 14

• New Content types• New Component types• New User types• Related Content Sets

Monday, 16 June 14

• New Content types• New Component types• New User types• Related Content Sets

Monday, 16 June 14

Can I make my own?• Page / Home

Monday, 16 June 14

• Allow editing via Front-End

Monday, 16 June 14

• Allow editing via Front-End• $.renderEditableAttribute( attribute=‘attributeName‘ , type=‘text or HTMLEditor‘ , label=‘Some Field Label’)

Monday, 16 June 14

Can I make my own?• Component / Features

Monday, 16 June 14

• Define with UI

Monday, 16 June 14

• Define with UI

Monday, 16 June 14

• Define with XML

Monday, 16 June 14

• Define with XML• {ThemeName}/config.xml.cfm

Monday, 16 June 14

Review

Monday, 16 June 14

Review• Use Class Extensions (when needed)

Monday, 16 June 14

• Page / Home

Monday, 16 June 14

• Page / Home• Custom Component Types

Monday, 16 June 14

• Turn off Body

Monday, 16 June 14

• Turn off Body• Add more Body fields (think tabbed content)

Monday, 16 June 14

• Turn off Body• Add more Body fields (think tabbed content)

• Use config.xml.cfm to define your theme-specific extensions

Monday, 16 June 14

ResourcesWhere can I learn more?

Monday, 16 June 14

Where can I learn more?

Monday, 16 June 14

Where can I learn more?• GetMura.com• BlueRiver.com• github.com/BlueRiver• github.com/SteveWithington• gist.github.com/SteveWithington• Mura CMS Developers on Google Groups & LinkedIn• Paid Support Plans: Short-Term & Annual• Training: Hosted, On-site, & Online

Monday, 16 June 14

Thanks,you rock!

Monday, 16 June 14

Getting It Done With Mura CMS Themes

Technology

Transcript of Getting It Done With Mura CMS Themes