Download - Getting It Done With Mura CMS Themes
Getting It DoneWith Mura ThemesSteve Withington
Monday, 16 June 14
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?• SiteID
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?• /{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
Where do I start?• /{SiteID}/includes/themes/{ThemeName}
• /templates/default.cfm
Monday, 16 June 14
Where do I start?• /{SiteID}/includes/themes/{ThemeName}
• /templates/default.cfm
Monday, 16 June 14
Where do I start?• /{SiteID}/includes/themes/{ThemeName}
• /templates/default.cfm
Monday, 16 June 14
Where do I start?• /{SiteID}/includes/themes/{ThemeName}
• /templates/default.cfm
Monday, 16 June 14
Where do I start?• /{SiteID}/includes/themes/{ThemeName}
• /templates/default.cfm
Monday, 16 June 14
Where do I start?• /{SiteID}/includes/themes/{ThemeName}
• /templates/default.cfm
Monday, 16 June 14
Where do I start?• /{SiteID}/includes/themes/{ThemeName}
• /templates/default.cfm
Monday, 16 June 14
Where do I start?• /{SiteID}/includes/themes/{ThemeName}
• /templates/default.cfm
Monday, 16 June 14
Where do I start?• /{SiteID}/includes/themes/{ThemeName}
• /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?• Just like you always have
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?• Replace any # with ##
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
How do I create layouts?• Drop in template variables & code snippets
• For example, the relative link for CSSis broken
Monday, 16 June 14
How do I create layouts?• Drop in template variables & code snippets
• For example, the relative link for CSSis broken
Monday, 16 June 14
How do I create layouts?• Drop in template variables & code snippets
• Easily fixed with a simple template variable:• $.siteConfig(‘themeAssetPath’)
Monday, 16 June 14
How do I create layouts?• Drop in template variables & code snippets
• Easily fixed with a simple template variable:• $.siteConfig(‘themeAssetPath’)
Monday, 16 June 14
How do I create layouts?• Drop in template variables & code snippets
• Easily fixed with a simple template variable:• $.siteConfig(‘themeAssetPath’)
Monday, 16 June 14
How do I create layouts?• Drop in template variables & code snippets
• 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
How do I create layouts?• Inspecting Available Attributes
• <cfdump var=”#$.content().getAllValues()#” />
Monday, 16 June 14
How do I create layouts?• Inspecting Available Attributes
• <cfdump var=”#$.content().getAllValues()#” />
Monday, 16 June 14
How do I create layouts?• Inspecting Available Attributes
Monday, 16 June 14
How do I create layouts?• Inspecting Available Attributes
• $.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
How do I create layouts?• Code Snippets (helper functions)
• Dynamically generate Primary Navigation
Monday, 16 June 14
How do I create layouts?• Code Snippets (helper functions)
• Dynamically generate Primary Navigation• Output the Body/Content
Monday, 16 June 14
How do I create layouts?• Code Snippets (helper functions)
• Dynamically generate Primary Navigation• Output the Body/Content• Output Display Objects assigned to content regions
Monday, 16 June 14
How do I create layouts?• Code Snippets (helper functions)
• 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
How do I create layouts?• Code Snippets
• $.dspPrimaryNav( viewDepth=1 , id=‘navPrimary‘ , displayHome=‘always‘ , closeFolders=true)
Monday, 16 June 14
How do I create layouts?• Code Snippets
• $.dspPrimaryNav( viewDepth=1 , id=‘navPrimary‘ , displayHome=‘always‘ , closeFolders=true)
Monday, 16 June 14
How do I create layouts?• Code Snippets
• $.dspBody( body=$.content(‘body’) , pageTitle=$.content(‘title’) , showMetaImage=true , crumblist=false)
• Use this method instead of $.content(‘body’)
Monday, 16 June 14
How do I create layouts?• Code Snippets
• $.dspObjects(regionNumber)
Monday, 16 June 14
How do I create layouts?• Code Snippets
• $.dspObjects(regionNumber)
Monday, 16 June 14
How do I create layouts?• Code Snippets
• $.dspObjects(regionNumber)
Monday, 16 June 14
How do I create layouts?• Code Snippets
• $.dspComponent(‘Component Name or ID’)
Monday, 16 June 14
How do I create layouts?• Code Snippets
• $.dspComponent(‘Component Name or ID’)
Monday, 16 June 14
How do I create layouts?• Code Snippets
• $.dspComponent(‘Component Name or ID’)
Monday, 16 June 14
How do I create layouts?• Code Snippets
• Create CSS hooks
Monday, 16 June 14
How do I create layouts?• Code Snippets
• Create CSS hooks• <body id=”#$.getTopID()#”
class=”depth#ArrayLen($.event(‘crumbdata’))#”>
Monday, 16 June 14
How do I create layouts?• Code Snippets
• Create CSS hooks• <body id=”#$.getTopID()#”
class=”depth#ArrayLen($.event(‘crumbdata’))#”>• <div id=”container”
class=”#$.createCSSID($.content(‘menuTitle’))#”>
Monday, 16 June 14
How do I create layouts?• Code Snippets
• Create CSS hooks• <body id=”#$.getTopID()#”
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
How do I create layouts?• Optionally, include Mura’s CSS for basic styling of Mura-generated output
• /{SiteID}/css/mura.X.x.x.min.css
Monday, 16 June 14
How do I create layouts?• Optionally, include Mura’s CSS for basic styling of Mura-generated output
• /{SiteID}/css/mura.X.x.x.min.css• /{SiteID}/css/mura.X.x.x.skin.css
Monday, 16 June 14
How do I create layouts?• Optionally, include Mura’s CSS for basic styling of Mura-generated output
• /{SiteID}/css/mura.X.x.x.min.css• /{SiteID}/css/mura.X.x.x.skin.css
Monday, 16 June 14
How do I create layouts?• Optionally, include Mura’s CSS for basic styling of Mura-generated output
• /{SiteID}/css/mura.X.x.x.min.css• /{SiteID}/css/mura.X.x.x.skin.css
Monday, 16 June 14
How do I create layouts?• Optionally, include Mura’s CSS for basic styling of Mura-generated output
• /{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?• Display Objects
Monday, 16 June 14
Can I customize that?• Display Objects
Monday, 16 June 14
Can I customize that?• Display Objects
Monday, 16 June 14
Can I customize that?• Display Objects
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
Can I customize that?• “Site” Display Objects
• /{SiteID}/includes/display_objects/
Monday, 16 June 14
Can I customize that?• “Site” Display Objects
• /{SiteID}/includes/display_objects/
Monday, 16 June 14
Can I customize that?• “Site” Display Objects
• /{SiteID}/includes/display_objects/dsp_login.cfm
Monday, 16 June 14
Can I customize that?• “Site” Display Objects
• /{SiteID}/includes/display_objects/dsp_login.cfm
Monday, 16 June 14
Can I customize that?• “Site” Display Objects
• /{SiteID}/includes/display_objects/dsp_login.cfm
Monday, 16 June 14
Can I customize that?• “Site” Display Objects
• /{SiteID}/includes/display_objects• /custom/dsp_login.cfm
Monday, 16 June 14
Can I customize that?• “Site” Display Objects
• /{SiteID}/includes/display_objects• /custom/dsp_login.cfm
Monday, 16 June 14
Can I customize that?• “Site” Display Objects
• /{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
Can I customize that?• “Theme” Display Objects
• /{SiteID}/includes/themes/{ThemeName}• /display_objects/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
Review• /{SiteID}/includes
• /display_objects/custom/{displayObject}
Monday, 16 June 14
Review• /{SiteID}/includes
• /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
Can I make my own?• Class Extensions
• New Content types
Monday, 16 June 14
Can I make my own?• Class Extensions
• New Content types• New Component types
Monday, 16 June 14
Can I make my own?• Class Extensions
• New Content types• New Component types• New User types
Monday, 16 June 14
Can I make my own?• Class Extensions
• New Content types• New Component types• New User types• Related Content Sets
Monday, 16 June 14
Can I make my own?• Class Extensions
• 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
Can I make my own?• Page / Home
Monday, 16 June 14
Can I make my own?• Page / Home
Monday, 16 June 14
Can I make my own?• Page / Home
Monday, 16 June 14
Can I make my own?• Page / Home
Monday, 16 June 14
Can I make my own?• Page / Home
Monday, 16 June 14
Can I make my own?• Page / Home
• Allow editing via Front-End
Monday, 16 June 14
Can I make my own?• Page / Home
• 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?• Page / Home
• 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?• Page / Home
• 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?• Page / Home
Monday, 16 June 14
Can I make my own?• Page / Home
Monday, 16 June 14
Can I make my own?• Page / Home
Monday, 16 June 14
Can I make my own?• Component / Features
Monday, 16 June 14
Can I make my own?• Component / Features
Monday, 16 June 14
Can I make my own?• Component / Features
Monday, 16 June 14
Can I make my own?• Class Extensions
• Define with UI
Monday, 16 June 14
Can I make my own?• Class Extensions
• Define with UI
Monday, 16 June 14
Can I make my own?• Class Extensions
• Define with XML
Monday, 16 June 14
Can I make my own?• Class Extensions
• Define with XML• {ThemeName}/config.xml.cfm
Monday, 16 June 14
Can I make my own?• Class Extensions
• Define with XML• {ThemeName}/config.xml.cfm
Monday, 16 June 14
Can I make my own?• Class Extensions
• 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
Review• Use Class Extensions (when needed)
• Page / Home
Monday, 16 June 14
Review• Use Class Extensions (when needed)
• Page / Home• Custom Component Types
Monday, 16 June 14
Review• Use Class Extensions (when needed)
• Page / Home• Custom Component Types
• Turn off Body
Monday, 16 June 14
Review• Use Class Extensions (when needed)
• Page / Home• Custom Component Types
• Turn off Body• Add more Body fields (think tabbed content)
Monday, 16 June 14
Review• Use Class Extensions (when needed)
• Page / Home• Custom Component Types
• 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
