Inside Look at Mura CMS Themeing
Upcoming SlideShare
Loading in...5
×
 

Inside Look at Mura CMS Themeing

on

  • 1,468 views

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.

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.

Statistics

Views

Total Views
1,468
Views on SlideShare
1,439
Embed Views
29

Actions

Likes
1
Downloads
13
Comments
2

1 Embed 29

http://www.linkedin.com 29

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Ronnie, very detailed, step by step and logical.. user friendly too, especially for newcomers. Would be nice to also see the live presentation that went along with the slides.. ps: I really enjoyed the comment, 'know enough ColdFusion to be dangerous!'
    Are you sure you want to
    Your message goes here
    Processing…
  • Hey Ronnie,
    Thanks for posting the slides. Good stuff.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Inside Look at Mura CMS Themeing Inside Look at Mura CMS Themeing Presentation Transcript

    • An Inside Lookat Mura ThemingRonnie Duke • @modmediaTuesday, June 11, 13
    • About RonnieTuesday, June 11, 13
    • About Ronnie•Based in Oregon, USATuesday, June 11, 13
    • About Ronnie•Based in Oregon, USA•Working with HTML since ’99Tuesday, June 11, 13
    • About Ronnie•Based in Oregon, USA•Working with HTML since ’99•Starting using Mura (Sava) in 2008Tuesday, June 11, 13
    • About Ronnie•Based in Oregon, USA•Working with HTML since ’99•Starting using Mura (Sava) in 2008•Primarily Front EndTuesday, June 11, 13
    • About Ronnie•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
    • About Ronnie•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 Mura Theme Can:Tuesday, June 11, 13
    • A Mura Theme Can:•Extend core Mura functionalityTuesday, June 11, 13
    • A Mura Theme Can:•Extend core Mura functionality•Contain custom logicTuesday, June 11, 13
    • A Mura Theme Can:•Extend core Mura functionality•Contain custom logic•Retrieve information from theMura architectureTuesday, June 11, 13
    • A Mura Theme Can:•Extend core Mura functionality•Contain custom logic•Retrieve information from theMura architecture•Be as flexible as neededTuesday, June 11, 13
    • A Mura Theme Can:•Extend core Mura functionality•Contain custom logic•Retrieve information from theMura architecture•Be as flexible as needed•Make your site beautifulTuesday, June 11, 13
    • Tools for themesTuesday, June 11, 13
    • Tools for themes•Templates & OverridesTuesday, June 11, 13
    • Tools for themes•Templates & Overrides•Mura $copeTuesday, June 11, 13
    • Tools for themes•Templates & Overrides•Mura $cope•Extended AttributesTuesday, June 11, 13
    • Tools for themes•Templates & Overrides•Mura $cope•Extended Attributes•Content IteratorTuesday, June 11, 13
    • Tools for themes•Templates & Overrides•Mura $cope•Extended Attributes•Content Iterator•Styling and image managementTuesday, June 11, 13
    • Tools for themes•Templates & Overrides•Mura $cope•Extended Attributes•Content Iterator•Styling and image management•Mobile RenderingTuesday, June 11, 13
    • Tools for themes•Templates & Overrides•Mura $cope•Extended Attributes•Content Iterator•Styling and image management•Mobile Rendering•Site BundlesTuesday, June 11, 13
    • Theme StructureTuesday, June 11, 13
    • Theme StructureBase Frameworks(i.e. Bootstrap)Tuesday, June 11, 13
    • Theme StructureCFStatic CompiledFilesTuesday, June 11, 13
    • Theme StructureClass ExtensionsTuesday, June 11, 13
    • Theme StructureMura FunctionOverridesTuesday, June 11, 13
    • Theme StructureTheme Specific CSS/LESSTuesday, June 11, 13
    • Theme StructureDisplay ObjectOverridesTuesday, June 11, 13
    • Theme StructureOverride MuraeventsTuesday, June 11, 13
    • Theme StructureTheme SpecificImagesTuesday, June 11, 13
    • Theme StructureTheme SpecificJavascriptTuesday, June 11, 13
    • Theme StructureLanguage SettingsTuesday, June 11, 13
    • Theme StructureLayout Templates &IncludesTuesday, June 11, 13
    • Templates and OverridesTuesday, June 11, 13
    • Templates and Overrides•Custom page templatesTuesday, June 11, 13
    • Templates and Overrides•Custom page templates•Theme level overridesTuesday, June 11, 13
    • Templates and Overrides•Custom page templates•Theme level overrides•Content RendererTuesday, June 11, 13
    • Templates and Overrides•Custom page templates•Theme level overrides•Content Renderer•Event HandlerTuesday, June 11, 13
    • Custom Page TemplatesYour markup – Your wayTuesday, June 11, 13
    • Custom Page Templates<cfoutput><div>Hello World</div></cfoutput>Your markup – Your wayTuesday, June 11, 13
    • Custom Page TemplatesYour markup – Your wayTuesday, June 11, 13
    • Custom Page TemplatesStandard IncludesYour markup – Your wayTuesday, June 11, 13
    • Custom Page TemplatesBootstrap SliderYour markup – Your wayTuesday, June 11, 13
    • Custom Page TemplatesBodyYour markup – Your wayTuesday, June 11, 13
    • Custom Page TemplatesDisplay RegionsYour markup – Your wayTuesday, June 11, 13
    • Theme Level OverridesDefault display objectsControl default Mura ObjectsTuesday, June 11, 13
    • Theme Level OverridesTheme display objectsControl default Mura ObjectsTuesday, June 11, 13
    • DemoTemplates and overridesTuesday, June 11, 13
    • Content RendererTuesday, June 11, 13
    • Content Renderer•Override Mura FunctionsTuesday, June 11, 13
    • Content Renderer•Override Mura Functions•Write your own custom methodsTuesday, June 11, 13
    • Content Renderer•Override Mura Functions•Write your own custom methods•Control site settingsTuesday, June 11, 13
    • Content RendererControl Site SettingsTuesday, June 11, 13
    • 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 SettingsTuesday, June 11, 13
    • Event HandlerTuesday, June 11, 13
    • Event Handler•Override default Mura eventsTuesday, June 11, 13
    • Event Handler•Override default Mura events•Create custom actionsTuesday, June 11, 13
    • Event HandlerOverride Page BehaviorTuesday, June 11, 13
    • 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 RenderTuesday, June 11, 13
    • Event HandlerHook into other Mura eventsTuesday, June 11, 13
    • Event HandlerHook 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 submitsTuesday, June 11, 13
    • Event HandlerLots to choose from!Tuesday, June 11, 13
    • Event HandlerLots to choose from!Application EventsonApplicationLoad onSiteSessionStartonGlobalSessionStart onSiteSessionEndonSiteMissingTemplate onSiteErroronGlobalError onBeforeAutoUpdateonAfterAutoUpdate onGlobalThreatDetectAdmin Rendering EventsonDashboardPrimaryToponDashboardPrimaryBottomonDashboardSidebarToponDashboardSidebarBottomonContentEditonGroupEditonUserEditonFEToolbarAdd (renders in front end toolbaradd list)onGroupEdit (renders as a tab when editing agroup)onUserEdit (renders as a tab when editing aUser)onContentEdit (Node Level Only) (renders as atab when editing a User)10nAfterSiteDeployRender (renders above list ofsites after manually deploying a site)onAdminModuleNav (renders inside admin leftnav)Staging to Production EventsonSiteDeploy onBeforeSiteDeployonAfterSiteDeploy onAfterSiteDeployRenderLogin EventsonSiteLogin onGlobalLoginonSiteLoginSuccess onGlobalLoginSuccessonSiteLoginBlocked onGlobalLoginBlockedContent EventsonBeforeContentSave (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 (NodeLevel Only)onBefore{type}DeleteVersionHistoryonBefore{type}{subType}DeleteVersionHistoryonAfterDeleteVersionHistory (Node Level Only)onAfter{type}DeleteVersionHistoryonAfter{type}{subType}DeleteVersionHistoryonBeforeContentDeleteVersion (Node LevelOnly)onBefore{type}ContentDeleteVersiononBefore{type}{subType}ContentDeleteVersiononAfterContentDeleteVersion (Node Level Only)onAfter{type}ContentDeleteVersion (Node LevelOnly)onAfter{type}{subType}ContentDeleteVersionContent Comment EventsonBeforeCommentUpdateonBeforeCommentCreateonBeforeCommentSaveonBeforeCommentDeleteonAfterCommentUpdateonAfterCommentCreateonAfterCommentSaveonAfterCommentDeleteCategory EventsonBeforeCategoryUpdateonBeforeCategoryCreateonBeforeCategorySaveonBeforeCategoryDeleteonAfterCategoryUpdateonAfterCategoryCreateonAfterCategorySave onAfterCategoryDeleteFeed EventsonBeforeFeedUpdate onBeforeFeedCreateonBeforeFeedSave onBeforeFeedDeleteonAfterFeedUpdate onAfterFeedCreateonAfterFeedSave onAfterFeedDeleteUser EventsonBeforeUserUpdate onBeforeUserCreateonBeforeUserSave onBeforeUserDeleteonBeforeUser{subType}UpdateonBeforeUser{subType}CreateonBeforeUser{subType}SaveonBeforeUser{subType}DeleteonAfterUserUpdate onAfterUserCreateonAfterUserSave onAfterUserDeleteonAfterUser{subType}UpdateonAfterUser{subType}CreateonAfterUser{subType}Save onAfterUser{subType}DeleteTuesday, June 11, 13
    • DemoEvent HandlerTuesday, June 11, 13
    • Mura ScopeAccess content attributesTuesday, June 11, 13
    • Mura ScopeAccess content attributes$.content(‘title’)Get the page’s titleTuesday, June 11, 13
    • Mura ScopeAccess content attributes$.content(‘title’)Get the page’s title$.content().getImageURL(‘large’)Get the associated imageTuesday, June 11, 13
    • Mura ScopeAccess content attributesTuesday, June 11, 13
    • Mura ScopeAccess content attributesAudienceBodycontentidCreatedCreditsDisplayDisplayStartDisplaystopFeatureStartFeatureStopFileExtFileIDFilenameTitleHTMLTitleURLTitleMenuTitleKeyPointsLastUpdateLastUpdateByMetaDescMetaKeyWordsNotesReleaseDateSummaryTagsTemplateTypeSubTypeTuesday, June 11, 13
    • Mura ScopeInsert Mura objectsTuesday, June 11, 13
    • Mura ScopeInsert Mura objects$.dspObject(‘component’,‘Some Component’)Insert user-editable content into your templates!Tuesday, June 11, 13
    • Mura ScopeInsert Mura objects$.dspObject(‘component’,‘Some Component’)Insert user-editable content into your templates!$.dspThemeInclude(‘display_objects/my_object.cfm’)Include custom filesTuesday, June 11, 13
    • The [mura] tagTuesday, June 11, 13
    • The [mura] tagAccess Mura Scope methods in the Mura admin[mura]$.dspObject(‘component’,‘Some Component’)[/mura]Tuesday, June 11, 13
    • The [mura] tagAccess 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
    • DemoMura $copeTuesday, June 11, 13
    • Extended AttributesCollect and Store Additional DataTuesday, June 11, 13
    • Extended AttributesCollect and Store Additional DataTuesday, June 11, 13
    • Extended AttributesCollect and Store Additional DataTuesday, June 11, 13
    • Extended AttributesCollect and Store Additional DataTuesday, June 11, 13
    • Extended AttributesCollect and Store Additional DataTuesday, June 11, 13
    • Extended AttributesCollect and Store Additional DataTuesday, June 11, 13
    • Extended AttributesWhat you can extendTuesday, June 11, 13
    • Extended AttributesWhat you can extendTuesday, June 11, 13
    • Extended AttributesWhat you can extendEverything!Tuesday, June 11, 13
    • config.xml.cfmDeploy custom class extensionsdirectly from your theme!Tuesday, June 11, 13
    • config.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>Tuesday, June 11, 13
    • DemoExtended AttributesTuesday, June 11, 13
    • Content IteratorTuesday, June 11, 13
    • Content Iterator•Retrieve and display MuracontentTuesday, June 11, 13
    • Content Iterator•Retrieve and display Muracontent•Utilize Mura Content CollectionsTuesday, June 11, 13
    • Content Iterator•Retrieve and display Muracontent•Utilize Mura Content Collections•Use your own markupTuesday, June 11, 13
    • Content Iterator•Retrieve and display Muracontent•Utilize Mura Content Collections•Use your own markup•No need to write customqueriesTuesday, June 11, 13
    • Content IteratorSetup your feedTuesday, June 11, 13
    • Content IteratorSetup your feedTuesday, June 11, 13
    • Content IteratorLoop through contentTuesday, June 11, 13
    • 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 contentTuesday, June 11, 13
    • DemoContent IteratorTuesday, June 11, 13
    • Images & StylingTuesday, June 11, 13
    • Images & Styling•Dynamic CSS HooksTuesday, June 11, 13
    • Images & Styling•Dynamic CSS Hooks•LESSTuesday, June 11, 13
    • Images & Styling•Dynamic CSS Hooks•LESS•CF StaticTuesday, June 11, 13
    • Images & Styling•Dynamic CSS Hooks•LESS•CF Static•Mura BootstrapTuesday, June 11, 13
    • Images & Styling•Dynamic CSS Hooks•LESS•CF Static•Mura Bootstrap•Font AwesomeTuesday, June 11, 13
    • Images & Styling•Dynamic CSS Hooks•LESS•CF Static•Mura Bootstrap•Font Awesome•Robust Image ManagementTuesday, June 11, 13
    • Dynamic CSS HooksHook into top level Body ID’s,Containers, and Nav ItemsTuesday, June 11, 13
    • LESS CSSTuesday, June 11, 13
    • LESS CSS• Dynamic CSS LanguageTuesday, June 11, 13
    • LESS CSS• Dynamic CSS Language• Built in functions and variablesTuesday, 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 usingLESS, today is the day!Tuesday, June 11, 13
    • CF StaticTuesday, June 11, 13
    • CF Static•Automatically compress andminify CSS, LESS, Javascript &CoffeeScriptTuesday, June 11, 13
    • CF Static•Automatically compress andminify CSS, LESS, Javascript &CoffeeScript•Create dependencies andalternate IE includesTuesday, June 11, 13
    • CF Static•Automatically compress andminify CSS, LESS, Javascript &CoffeeScript•Create dependencies andalternate IE includes•All minified files are saved –automatically updatedTuesday, June 11, 13
    • DemoCF Static & LESSTuesday, June 11, 13
    • Mura BootstrapTuesday, June 11, 13
    • Mura Bootstrap•Default theme for Mura 6Tuesday, June 11, 13
    • Mura Bootstrap•Default theme for Mura 6•ScaffoldingTuesday, June 11, 13
    • Mura Bootstrap•Default theme for Mura 6•Scaffolding•Uses LESSTuesday, June 11, 13
    • Mura Bootstrap•Default theme for Mura 6•Scaffolding•Uses LESS•Built in fluid, responsive layoutTuesday, June 11, 13
    • Mura Bootstrap•Default theme for Mura 6•Scaffolding•Uses LESS•Built in fluid, responsive layout•Carousel functionTuesday, June 11, 13
    • Font AwesomeTuesday, June 11, 13
    • Font AwesomeTuesday, June 11, 13
    • Font Awesome•Built into Bootstrap themeTuesday, June 11, 13
    • Font Awesome•Built into Bootstrap theme•302 icons to dateTuesday, June 11, 13
    • Font Awesome•Built into Bootstrap theme•302 icons to date•Vector icons (scalability)Tuesday, June 11, 13
    • Font Awesome•Built into Bootstrap theme•302 icons to date•Vector icons (scalability)•CSS ControlTuesday, June 11, 13
    • Font Awesome•Built into Bootstrap theme•302 icons to date•Vector icons (scalability)•CSS ControlTuesday, June 11, 13
    • Robust Image ManagementTuesday, June 11, 13
    • Robust Image Management•Custom image sizesTuesday, June 11, 13
    • Robust Image Management•Custom image sizes•Admin image editingTuesday, June 11, 13
    • Robust Image Management•Custom image sizes•Admin image editing•Custom sizes are cachedTuesday, June 11, 13
    • Robust Image ManagementTuesday, June 11, 13
    • Robust Image Management<img src=”#$.content().getImageURL()#” />Use associated image in your templatesTuesday, June 11, 13
    • Robust Image Management<img src=”#$.content().getImageURL()#” />Use associated image in your templates<img src=”#$.content().getImageURL(width=100,height=100)#” />Pass in custom sizesTuesday, June 11, 13
    • Robust Image Management<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 sizesTuesday, June 11, 13
    • DemoImagesTuesday, June 11, 13
    • Mobile RenderingTuesday, June 11, 13
    • Mobile Rendering•Automatically detect andserve up mobile contentTuesday, June 11, 13
    • Mobile Rendering•Automatically detect andserve up mobile content•jQuery MobileTuesday, June 11, 13
    • Mobile Rendering•Automatically detect andserve up mobile content•jQuery Mobile•Admin mobile controlsTuesday, June 11, 13
    • Site BundlesTuesday, June 11, 13
    • Site Bundles•Distribute themes with contentTuesday, June 11, 13
    • Site Bundles•Distribute themes with content•Includes all pages, formresponses, images, versionhistory, plugins, users etc.Tuesday, June 11, 13
    • Site BundlesTuesday, June 11, 13
    • Thanks!Ronnie Duke ronnie@themodmedia.com themodmedia.com@modmediaTuesday, June 11, 13