Upload
ronnie-duke
View
1.496
Download
5
Tags:
Embed Size (px)
DESCRIPTION
Themes in Mura CMS can do so much more than make your site pretty. This presentation goes into some of the tools that themes can provide you to perform advanced tasks in your Mura sites.
Citation preview
A! I!"#$% L&&' () M*r( +%,#!-
Ronnie Duke • @modmedia
Tuesday, June 11, 13
Ab&*) R&!!#%
Tuesday, June 11, 13
Ab&*) R&!!#%
•Based in Oregon, USA
Tuesday, June 11, 13
Ab&*) R&!!#%
•Based in Oregon, USA
•Working with HTML since ’99
Tuesday, June 11, 13
Ab&*) R&!!#%
•Based in Oregon, USA
•Working with HTML since ’99
•Starting using Mura (Sava) in 2008
Tuesday, June 11, 13
Ab&*) R&!!#%
•Based in Oregon, USA
•Working with HTML since ’99
•Starting using Mura (Sava) in 2008
•Primarily Front End
Tuesday, June 11, 13
Ab&*) R&!!#%
•Based in Oregon, USA
•Working with HTML since ’99
•Starting using Mura (Sava) in 2008
•Primarily Front End
•Enough CFML to be dangerous (Frogrammer)
Tuesday, June 11, 13
Ab&*) R&!!#%
•Based in Oregon, USA
•Working with HTML since ’99
•Starting using Mura (Sava) in 2008
•Primarily Front End
•Enough CFML to be dangerous (Frogrammer)
•Self-proclaimed Muravangelist™
Tuesday, June 11, 13
A M*r( +%,% C(!:
Tuesday, June 11, 13
A M*r( +%,% C(!:
•Extend core Mura functionality
Tuesday, June 11, 13
A M*r( +%,% C(!:
•Extend core Mura functionality
•Contain custom logic
Tuesday, June 11, 13
A M*r( +%,% C(!:
•Extend core Mura functionality
•Contain custom logic
•Retrieve information from the Mura architecture
Tuesday, June 11, 13
A M*r( +%,% C(!:
•Extend core Mura functionality
•Contain custom logic
•Retrieve information from the Mura architecture
•Be as flexible as needed
Tuesday, June 11, 13
A M*r( +%,% C(!:
•Extend core Mura functionality
•Contain custom logic
•Retrieve information from the Mura architecture
•Be as flexible as needed
•Make your site beautiful
Tuesday, June 11, 13
T&&." f&r )/%,%"
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
•Mura $cope
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
•Mura $cope
•Extended Attributes
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
•Mura $cope
•Extended Attributes
•Content Iterator
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
•Mura $cope
•Extended Attributes
•Content Iterator
•Styling and image management
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
•Mura $cope
•Extended Attributes
•Content Iterator
•Styling and image management
•Mobile Rendering
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
•Mura $cope
•Extended Attributes
•Content Iterator
•Styling and image management
•Mobile Rendering
•Site Bundles
Tuesday, June 11, 13
+%,% S)r*0)*r%
Tuesday, June 11, 13
+%,% S)r*0)*r%Base Frameworks(i.e. Bootstrap)
Tuesday, June 11, 13
+%,% S)r*0)*r%CFStatic CompiledFiles
Tuesday, June 11, 13
+%,% S)r*0)*r%
Class Extensions
Tuesday, June 11, 13
+%,% S)r*0)*r%
Mura Function Overrides
Tuesday, June 11, 13
+%,% S)r*0)*r%
Theme Specific CSS/LESS
Tuesday, June 11, 13
+%,% S)r*0)*r%
Display ObjectOverrides
Tuesday, June 11, 13
+%,% S)r*0)*r%
Override Mura events
Tuesday, June 11, 13
+%,% S)r*0)*r%
Theme SpecificImages
Tuesday, June 11, 13
+%,% S)r*0)*r%
Theme SpecificJavascript
Tuesday, June 11, 13
+%,% S)r*0)*r%
Language Settings
Tuesday, June 11, 13
+%,% S)r*0)*r%
Layout Templates &Includes
Tuesday, June 11, 13
T%,1.()%" (!$ Ov%rr#$%"
Tuesday, June 11, 13
T%,1.()%" (!$ Ov%rr#$%"
•Custom page templates
Tuesday, June 11, 13
T%,1.()%" (!$ Ov%rr#$%"
•Custom page templates
•Theme level overrides
Tuesday, June 11, 13
T%,1.()%" (!$ Ov%rr#$%"
•Custom page templates
•Theme level overrides
•Content Renderer
Tuesday, June 11, 13
T%,1.()%" (!$ Ov%rr#$%"
•Custom page templates
•Theme level overrides
•Content Renderer
•Event Handler
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"Your markup – Your way
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"
<cfoutput><div>Hello World</div>
</cfoutput>
Your markup – Your way
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"Your markup – Your way
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"
Standard Includes
Your markup – Your way
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"
Bootstrap Slider
Your markup – Your way
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"
Body
Your markup – Your way
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"
Display Regions
Your markup – Your way
Tuesday, June 11, 13
+%,% L%v%. Ov%rr#$%"
Default display objects
Control default Mura Objects
Tuesday, June 11, 13
+%,% L%v%. Ov%rr#$%"
Theme display objects
Control default Mura Objects
Tuesday, June 11, 13
D%,&Templates and overrides
Tuesday, June 11, 13
C&!)%!) R%!$%r%r
Tuesday, June 11, 13
C&!)%!) R%!$%r%r
•Override Mura Functions
Tuesday, June 11, 13
C&!)%!) R%!$%r%r
•Override Mura Functions
•Write your own custom methods
Tuesday, June 11, 13
C&!)%!) R%!$%r%r
•Override Mura Functions
•Write your own custom methods
•Control site settings
Tuesday, June 11, 13
C&!)%!) R%!$%r%rControl Site Settings
Tuesday, June 11, 13
C&!)%!) R%!$%r%r<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
Tuesday, June 11, 13
Ev%!) H(!$.%r
Tuesday, June 11, 13
Ev%!) H(!$.%r
•Override default Mura events
Tuesday, June 11, 13
Ev%!) H(!$.%r
•Override default Mura events
•Create custom actions
Tuesday, June 11, 13
Ev%!) H(!$.%rOverride Page Behavior
Tuesday, June 11, 13
Ev%!) H(!$.%rOverride 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
Tuesday, June 11, 13
Ev%!) H(!$.%rHook into other Mura events
Tuesday, June 11, 13
Ev%!) H(!$.%rHook into other Mura events
<cffunction name="onAfterFormSubmitSave"> <cfargument name="$"> <cfif $.content('title') eq "Contact Us"> <cfmail to="#request.SUBMITTEREMAIL#" from="[email protected]" 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
Tuesday, June 11, 13
Ev%!) H(!$.%rLots to choose from!
Tuesday, June 11, 13
Ev%!) H(!$.%rLots to choose from!Application EventsonApplicationLoad onSiteSessionStartonGlobalSessionStart onSiteSessionEndonSiteMissingTemplate onSiteErroronGlobalError onBeforeAutoUpdateonAfterAutoUpdate onGlobalThreatDetectAdmin Rendering EventsonDashboardPrimaryToponDashboardPrimaryBottomonDashboardSidebarToponDashboardSidebarBottomonContentEditonGroupEditonUserEditonFEToolbarAdd (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 EventsonSiteDeploy onBeforeSiteDeployonAfterSiteDeploy onAfterSiteDeployRender Login EventsonSiteLogin onGlobalLoginonSiteLoginSuccess onGlobalLoginSuccessonSiteLoginBlocked onGlobalLoginBlockedContent Events
onBeforeContentSave (Node Level Only)onBefore{type}SaveonBefore{type}{subType}SaveonAfter{type}SaveonAfter{type}{subType}SaveonAfterContentSave (Node Level Only)onBeforeContentDelete (Node Level Only)onBefore{type}deleteonBefore{type}{subType}deleteonAfterContentDelete (Node Level Only)onAfter{type}deleteonAfter{type}{subType}deleteonBeforeContentSortonAfterContentSortonBeforeContentDeleteVersionHistory (Node Level Only)onBefore{type}DeleteVersionHistoryonBefore{type}{subType}DeleteVersionHistoryonAfterDeleteVersionHistory (Node Level Only)onAfter{type}DeleteVersionHistoryonAfter{type}{subType}DeleteVersionHistoryonBeforeContentDeleteVersion (Node Level Only)onBefore{type}ContentDeleteVersiononBefore{type}{subType}ContentDeleteVersiononAfterContentDeleteVersion (Node Level Only)onAfter{type}ContentDeleteVersion (Node Level Only)onAfter{type}{subType}ContentDeleteVersionContent Comment EventsonBeforeCommentUpdate onBeforeCommentCreate
onBeforeCommentSave onBeforeCommentDeleteonAfterCommentUpdate onAfterCommentCreateonAfterCommentSave onAfterCommentDeleteCategory EventsonBeforeCategoryUpdate onBeforeCategoryCreateonBeforeCategorySave onBeforeCategoryDeleteonAfterCategoryUpdate onAfterCategoryCreateonAfterCategorySave onAfterCategoryDeleteFeed EventsonBeforeFeedUpdate onBeforeFeedCreateonBeforeFeedSave onBeforeFeedDeleteonAfterFeedUpdate onAfterFeedCreateonAfterFeedSave onAfterFeedDeleteUser EventsonBeforeUserUpdate onBeforeUserCreateonBeforeUserSave onBeforeUserDeleteonBeforeUser{subType}Update onBeforeUser{subType}CreateonBeforeUser{subType}Save onBeforeUser{subType}DeleteonAfterUserUpdate onAfterUserCreateonAfterUserSave onAfterUserDeleteonAfterUser{subType}Update onAfterUser{subType}CreateonAfterUser{subType}Save onAfterUser{subType}Delete
Tuesday, June 11, 13
D%,&Event Handler
Tuesday, June 11, 13
M*r( S0&1%Access content attributes
Tuesday, June 11, 13
M*r( S0&1%Access content attributes
$.content(‘title’)
Get the page’s title
Tuesday, June 11, 13
M*r( S0&1%Access content attributes
$.content(‘title’)
Get the page’s title
$.content().getImageURL(‘large’)
Get the associated image
Tuesday, June 11, 13
M*r( S0&1%Access content attributes
Tuesday, June 11, 13
M*r( S0&1%Access content attributes
AudienceBodycontentidCreatedCredits DisplayDisplayStartDisplaystopFeatureStartFeatureStop
FileExtFileIDFilenameTitleHTMLTitleURLTitleMenuTitleKeyPoints LastUpdateLastUpdateBy
MetaDescMetaKeyWordsNotes ReleaseDateSummaryTagsTemplateTypeSubType
Tuesday, June 11, 13
M*r( S0&1%Insert Mura objects
Tuesday, June 11, 13
M*r( S0&1%Insert Mura objects
$.dspObject(‘component’,‘Some Component’)
Insert user-editable content into your templates!
Tuesday, June 11, 13
M*r( S0&1%Insert Mura objects
$.dspObject(‘component’,‘Some Component’)
Insert user-editable content into your templates!
$.dspThemeInclude(‘display_objects/my_object.cfm’)
Include custom files
Tuesday, June 11, 13
+% [,*r(] )(-
Tuesday, June 11, 13
+% [,*r(] )(-
Access Mura Scope methods in the Mura admin
[mura]$.dspObject(‘component’,‘Some Component’)[/mura]
Tuesday, June 11, 13
+% [,*r(] )(-
Access custom methods created in contentRenderer.cfc
[mura]dspMyFunction()[/mura]
Access Mura Scope methods in the Mura admin
[mura]$.dspObject(‘component’,‘Some Component’)[/mura]
Tuesday, June 11, 13
D%,&Mura $cope
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"Collect and Store Additional Data
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"Collect and Store Additional Data
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"Collect and Store Additional Data
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"Collect and Store Additional Data
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"Collect and Store Additional Data
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"Collect and Store Additional Data
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"What you can extend
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"What you can extend
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"What you can extend
Everything!
Tuesday, June 11, 13
0&!3-.4,..0f,
Deploy custom class extensions directly from your theme!
Tuesday, June 11, 13
0&!3-.4,..0f,<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>
Tuesday, June 11, 13
D%,&Extended Attributes
Tuesday, June 11, 13
C&!)%!) I)%r()&r
Tuesday, June 11, 13
C&!)%!) I)%r()&r
•Retrieve and display Mura content
Tuesday, June 11, 13
C&!)%!) I)%r()&r
•Retrieve and display Mura content
•Utilize Mura Content Collections
Tuesday, June 11, 13
C&!)%!) I)%r()&r
•Retrieve and display Mura content
•Utilize Mura Content Collections
•Use your own markup
Tuesday, June 11, 13
C&!)%!) I)%r()&r
•Retrieve and display Mura content
•Utilize Mura Content Collections
•Use your own markup
•No need to write custom queries
Tuesday, June 11, 13
C&!)%!) I)%r()&rSetup your feed
Tuesday, June 11, 13
C&!)%!) I)%r()&rSetup your feed
Tuesday, June 11, 13
C&!)%!) I)%r()&rLoop through content
Tuesday, June 11, 13
C&!)%!) I)%r()&r<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
Tuesday, June 11, 13
D%,&Content Iterator
Tuesday, June 11, 13
I,(-%" & S)5.#!-
Tuesday, June 11, 13
I,(-%" & S)5.#!-
•Dynamic CSS Hooks
Tuesday, June 11, 13
I,(-%" & S)5.#!-
•Dynamic CSS Hooks
•LESS
Tuesday, June 11, 13
I,(-%" & S)5.#!-
•Dynamic CSS Hooks
•LESS
•CF Static
Tuesday, June 11, 13
I,(-%" & S)5.#!-
•Dynamic CSS Hooks
•LESS
•CF Static
•Mura Bootstrap
Tuesday, June 11, 13
I,(-%" & S)5.#!-
•Dynamic CSS Hooks
•LESS
•CF Static
•Mura Bootstrap
•Font Awesome
Tuesday, June 11, 13
I,(-%" & S)5.#!-
•Dynamic CSS Hooks
•LESS
•CF Static
•Mura Bootstrap
•Font Awesome
•Robust Image Management
Tuesday, June 11, 13
D5!(,#0 CSS H&&'"
Hook into top level Body ID’s, Containers, and Nav Items
Tuesday, June 11, 13
LESS CSS
Tuesday, June 11, 13
LESS CSS
• Dynamic CSS Language
Tuesday, June 11, 13
LESS CSS
• Dynamic CSS Language
• Built in functions and variables
Tuesday, June 11, 13
LESS CSS
• Dynamic CSS Language
• Built in functions and variables
• MUCH quicker!
Tuesday, June 11, 13
LESS CSS
• Dynamic CSS Language
• Built in functions and variables
• MUCH quicker!
•If you haven’t started using LESS, today is the day!
Tuesday, June 11, 13
CF S)()#0
Tuesday, June 11, 13
CF S)()#0
•Automatically compress and minify CSS, LESS, Javascript & CoffeeScript
Tuesday, June 11, 13
CF S)()#0
•Automatically compress and minify CSS, LESS, Javascript & CoffeeScript
•Create dependencies and alternate IE includes
Tuesday, June 11, 13
CF S)()#0
•Automatically compress and minify CSS, LESS, Javascript & CoffeeScript
•Create dependencies and alternate IE includes
•All minified files are saved – automatically updated
Tuesday, June 11, 13
D%,&CF Static & LESS
Tuesday, June 11, 13
M*r( B&&)")r(1
Tuesday, June 11, 13
M*r( B&&)")r(1
•Default theme for Mura 6
Tuesday, June 11, 13
M*r( B&&)")r(1
•Default theme for Mura 6
•Scaffolding
Tuesday, June 11, 13
M*r( B&&)")r(1
•Default theme for Mura 6
•Scaffolding
•Uses LESS
Tuesday, June 11, 13
M*r( B&&)")r(1
•Default theme for Mura 6
•Scaffolding
•Uses LESS
•Built in fluid, responsive layout
Tuesday, June 11, 13
M*r( B&&)")r(1
•Default theme for Mura 6
•Scaffolding
•Uses LESS
•Built in fluid, responsive layout
•Carousel function
Tuesday, June 11, 13
F&!) Aw%"&,%
Tuesday, June 11, 13
F&!) Aw%"&,%
Tuesday, June 11, 13
F&!) Aw%"&,%
•Built into Bootstrap theme
Tuesday, June 11, 13
F&!) Aw%"&,%
•Built into Bootstrap theme
•302 icons to date
Tuesday, June 11, 13
F&!) Aw%"&,%
•Built into Bootstrap theme
•302 icons to date
•Vector icons (scalability)
Tuesday, June 11, 13
F&!) Aw%"&,%
•Built into Bootstrap theme
•302 icons to date
•Vector icons (scalability)
•CSS Control
Tuesday, June 11, 13
F&!) Aw%"&,%
•Built into Bootstrap theme
•302 icons to date
•Vector icons (scalability)
•CSS Control
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
•Custom image sizes
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
•Custom image sizes
•Admin image editing
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
•Custom image sizes
•Admin image editing
•Custom sizes are cached
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
<img src=”#$.content().getImageURL()#” />
Use associated image in your templates
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
<img src=”#$.content().getImageURL()#” />
Use associated image in your templates
<img src=”#$.content().getImageURL(width=100,height=100)#” />
Pass in custom sizes
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
<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(‘myCustomImgSize’)#” />
Use custom image sizes
Tuesday, June 11, 13
D%,&Images
Tuesday, June 11, 13
M&b#.% R%!$%r#!-
Tuesday, June 11, 13
M&b#.% R%!$%r#!-•Automatically detect and
serve up mobile content
Tuesday, June 11, 13
M&b#.% R%!$%r#!-•Automatically detect and
serve up mobile content
•jQuery Mobile
Tuesday, June 11, 13
M&b#.% R%!$%r#!-•Automatically detect and
serve up mobile content
•jQuery Mobile
•Admin mobile controls
Tuesday, June 11, 13
S#)% B*!$.%"
Tuesday, June 11, 13
S#)% B*!$.%"
•Distribute themes with content
Tuesday, June 11, 13
S#)% B*!$.%"
•Distribute themes with content
•Includes all pages, form responses, images, version history, plugins, users etc.
Tuesday, June 11, 13
S#)% B*!$.%"
Tuesday, June 11, 13
+(!'"!Ronnie Duke
themodmedia.com
@modmedia
Tuesday, June 11, 13