Top Banner
A I L Mr Ronnie Duke • @modmedia Tuesday, June 11, 13
148

Inside Look at Mura CMS Themeing

Aug 29, 2014

Download

Technology

Ronnie Duke

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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 2: Inside Look at Mura CMS Themeing

Ab&*) R&!!#%

Tuesday, June 11, 13

Page 3: Inside Look at Mura CMS Themeing

Ab&*) R&!!#%

•Based in Oregon, USA

Tuesday, June 11, 13

Page 4: Inside Look at Mura CMS Themeing

Ab&*) R&!!#%

•Based in Oregon, USA

•Working with HTML since ’99

Tuesday, June 11, 13

Page 5: Inside Look at Mura CMS Themeing

Ab&*) R&!!#%

•Based in Oregon, USA

•Working with HTML since ’99

•Starting using Mura (Sava) in 2008

Tuesday, June 11, 13

Page 6: Inside Look at Mura CMS Themeing

Ab&*) R&!!#%

•Based in Oregon, USA

•Working with HTML since ’99

•Starting using Mura (Sava) in 2008

•Primarily Front End

Tuesday, June 11, 13

Page 7: Inside Look at Mura CMS Themeing

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

Page 8: Inside Look at Mura CMS Themeing

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

Page 9: Inside Look at Mura CMS Themeing

A M*r( +%,% C(!:

Tuesday, June 11, 13

Page 10: Inside Look at Mura CMS Themeing

A M*r( +%,% C(!:

•Extend core Mura functionality

Tuesday, June 11, 13

Page 11: Inside Look at Mura CMS Themeing

A M*r( +%,% C(!:

•Extend core Mura functionality

•Contain custom logic

Tuesday, June 11, 13

Page 12: Inside Look at Mura CMS Themeing

A M*r( +%,% C(!:

•Extend core Mura functionality

•Contain custom logic

•Retrieve information from the Mura architecture

Tuesday, June 11, 13

Page 13: Inside Look at Mura CMS Themeing

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

Page 14: Inside Look at Mura CMS Themeing

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

Page 15: Inside Look at Mura CMS Themeing

T&&." f&r )/%,%"

Tuesday, June 11, 13

Page 16: Inside Look at Mura CMS Themeing

T&&." f&r )/%,%"

•Templates & Overrides

Tuesday, June 11, 13

Page 17: Inside Look at Mura CMS Themeing

T&&." f&r )/%,%"

•Templates & Overrides

•Mura $cope

Tuesday, June 11, 13

Page 18: Inside Look at Mura CMS Themeing

T&&." f&r )/%,%"

•Templates & Overrides

•Mura $cope

•Extended Attributes

Tuesday, June 11, 13

Page 19: Inside Look at Mura CMS Themeing

T&&." f&r )/%,%"

•Templates & Overrides

•Mura $cope

•Extended Attributes

•Content Iterator

Tuesday, June 11, 13

Page 20: Inside Look at Mura CMS Themeing

T&&." f&r )/%,%"

•Templates & Overrides

•Mura $cope

•Extended Attributes

•Content Iterator

•Styling and image management

Tuesday, June 11, 13

Page 21: Inside Look at Mura CMS Themeing

T&&." f&r )/%,%"

•Templates & Overrides

•Mura $cope

•Extended Attributes

•Content Iterator

•Styling and image management

•Mobile Rendering

Tuesday, June 11, 13

Page 22: Inside Look at Mura CMS Themeing

T&&." f&r )/%,%"

•Templates & Overrides

•Mura $cope

•Extended Attributes

•Content Iterator

•Styling and image management

•Mobile Rendering

•Site Bundles

Tuesday, June 11, 13

Page 23: Inside Look at Mura CMS Themeing

+%,% S)r*0)*r%

Tuesday, June 11, 13

Page 24: Inside Look at Mura CMS Themeing

+%,% S)r*0)*r%Base Frameworks(i.e. Bootstrap)

Tuesday, June 11, 13

Page 25: Inside Look at Mura CMS Themeing

+%,% S)r*0)*r%CFStatic CompiledFiles

Tuesday, June 11, 13

Page 26: Inside Look at Mura CMS Themeing

+%,% S)r*0)*r%

Class Extensions

Tuesday, June 11, 13

Page 27: Inside Look at Mura CMS Themeing

+%,% S)r*0)*r%

Mura Function Overrides

Tuesday, June 11, 13

Page 28: Inside Look at Mura CMS Themeing

+%,% S)r*0)*r%

Theme Specific CSS/LESS

Tuesday, June 11, 13

Page 29: Inside Look at Mura CMS Themeing

+%,% S)r*0)*r%

Display ObjectOverrides

Tuesday, June 11, 13

Page 30: Inside Look at Mura CMS Themeing

+%,% S)r*0)*r%

Override Mura events

Tuesday, June 11, 13

Page 31: Inside Look at Mura CMS Themeing

+%,% S)r*0)*r%

Theme SpecificImages

Tuesday, June 11, 13

Page 32: Inside Look at Mura CMS Themeing

+%,% S)r*0)*r%

Theme SpecificJavascript

Tuesday, June 11, 13

Page 33: Inside Look at Mura CMS Themeing

+%,% S)r*0)*r%

Language Settings

Tuesday, June 11, 13

Page 34: Inside Look at Mura CMS Themeing

+%,% S)r*0)*r%

Layout Templates &Includes

Tuesday, June 11, 13

Page 35: Inside Look at Mura CMS Themeing

T%,1.()%" (!$ Ov%rr#$%"

Tuesday, June 11, 13

Page 36: Inside Look at Mura CMS Themeing

T%,1.()%" (!$ Ov%rr#$%"

•Custom page templates

Tuesday, June 11, 13

Page 37: Inside Look at Mura CMS Themeing

T%,1.()%" (!$ Ov%rr#$%"

•Custom page templates

•Theme level overrides

Tuesday, June 11, 13

Page 38: Inside Look at Mura CMS Themeing

T%,1.()%" (!$ Ov%rr#$%"

•Custom page templates

•Theme level overrides

•Content Renderer

Tuesday, June 11, 13

Page 39: Inside Look at Mura CMS Themeing

T%,1.()%" (!$ Ov%rr#$%"

•Custom page templates

•Theme level overrides

•Content Renderer

•Event Handler

Tuesday, June 11, 13

Page 40: Inside Look at Mura CMS Themeing

C*")&, P(-% T%,1.()%"Your markup – Your way

Tuesday, June 11, 13

Page 41: Inside Look at Mura CMS Themeing

C*")&, P(-% T%,1.()%"

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

</cfoutput>

Your markup – Your way

Tuesday, June 11, 13

Page 42: Inside Look at Mura CMS Themeing

C*")&, P(-% T%,1.()%"Your markup – Your way

Tuesday, June 11, 13

Page 43: Inside Look at Mura CMS Themeing

C*")&, P(-% T%,1.()%"

Standard Includes

Your markup – Your way

Tuesday, June 11, 13

Page 44: Inside Look at Mura CMS Themeing

C*")&, P(-% T%,1.()%"

Bootstrap Slider

Your markup – Your way

Tuesday, June 11, 13

Page 45: Inside Look at Mura CMS Themeing

C*")&, P(-% T%,1.()%"

Body

Your markup – Your way

Tuesday, June 11, 13

Page 46: Inside Look at Mura CMS Themeing

C*")&, P(-% T%,1.()%"

Display Regions

Your markup – Your way

Tuesday, June 11, 13

Page 47: Inside Look at Mura CMS Themeing

+%,% L%v%. Ov%rr#$%"

Default display objects

Control default Mura Objects

Tuesday, June 11, 13

Page 48: Inside Look at Mura CMS Themeing

+%,% L%v%. Ov%rr#$%"

Theme display objects

Control default Mura Objects

Tuesday, June 11, 13

Page 49: Inside Look at Mura CMS Themeing

D%,&Templates and overrides

Tuesday, June 11, 13

Page 50: Inside Look at Mura CMS Themeing

C&!)%!) R%!$%r%r

Tuesday, June 11, 13

Page 51: Inside Look at Mura CMS Themeing

C&!)%!) R%!$%r%r

•Override Mura Functions

Tuesday, June 11, 13

Page 52: Inside Look at Mura CMS Themeing

C&!)%!) R%!$%r%r

•Override Mura Functions

•Write your own custom methods

Tuesday, June 11, 13

Page 53: Inside Look at Mura CMS Themeing

C&!)%!) R%!$%r%r

•Override Mura Functions

•Write your own custom methods

•Control site settings

Tuesday, June 11, 13

Page 54: Inside Look at Mura CMS Themeing

C&!)%!) R%!$%r%rControl Site Settings

Tuesday, June 11, 13

Page 55: Inside Look at Mura CMS Themeing

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

Page 56: Inside Look at Mura CMS Themeing

Ev%!) H(!$.%r

Tuesday, June 11, 13

Page 57: Inside Look at Mura CMS Themeing

Ev%!) H(!$.%r

•Override default Mura events

Tuesday, June 11, 13

Page 58: Inside Look at Mura CMS Themeing

Ev%!) H(!$.%r

•Override default Mura events

•Create custom actions

Tuesday, June 11, 13

Page 59: Inside Look at Mura CMS Themeing

Ev%!) H(!$.%rOverride Page Behavior

Tuesday, June 11, 13

Page 60: Inside Look at Mura CMS Themeing

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

Page 61: Inside Look at Mura CMS Themeing

Ev%!) H(!$.%rHook into other Mura events

Tuesday, June 11, 13

Page 62: Inside Look at Mura CMS Themeing

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

Page 63: Inside Look at Mura CMS Themeing

Ev%!) H(!$.%rLots to choose from!

Tuesday, June 11, 13

Page 64: Inside Look at Mura CMS Themeing

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

Page 65: Inside Look at Mura CMS Themeing

D%,&Event Handler

Tuesday, June 11, 13

Page 66: Inside Look at Mura CMS Themeing

M*r( S0&1%Access content attributes

Tuesday, June 11, 13

Page 67: Inside Look at Mura CMS Themeing

M*r( S0&1%Access content attributes

$.content(‘title’)

Get the page’s title

Tuesday, June 11, 13

Page 68: Inside Look at Mura CMS Themeing

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

Page 69: Inside Look at Mura CMS Themeing

M*r( S0&1%Access content attributes

Tuesday, June 11, 13

Page 70: Inside Look at Mura CMS Themeing

M*r( S0&1%Access content attributes

AudienceBodycontentidCreatedCredits DisplayDisplayStartDisplaystopFeatureStartFeatureStop

FileExtFileIDFilenameTitleHTMLTitleURLTitleMenuTitleKeyPoints LastUpdateLastUpdateBy

MetaDescMetaKeyWordsNotes ReleaseDateSummaryTagsTemplateTypeSubType

Tuesday, June 11, 13

Page 71: Inside Look at Mura CMS Themeing

M*r( S0&1%Insert Mura objects

Tuesday, June 11, 13

Page 72: Inside Look at Mura CMS Themeing

M*r( S0&1%Insert Mura objects

$.dspObject(‘component’,‘Some Component’)

Insert user-editable content into your templates!

Tuesday, June 11, 13

Page 73: Inside Look at Mura CMS Themeing

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

Page 74: Inside Look at Mura CMS Themeing

+% [,*r(] )(-

Tuesday, June 11, 13

Page 75: Inside Look at Mura CMS Themeing

+% [,*r(] )(-

Access Mura Scope methods in the Mura admin

[mura]$.dspObject(‘component’,‘Some Component’)[/mura]

Tuesday, June 11, 13

Page 76: Inside Look at Mura CMS Themeing

+% [,*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

Page 77: Inside Look at Mura CMS Themeing

D%,&Mura $cope

Tuesday, June 11, 13

Page 78: Inside Look at Mura CMS Themeing

2)%!$%$ A))r#b*)%"Collect and Store Additional Data

Tuesday, June 11, 13

Page 79: Inside Look at Mura CMS Themeing

2)%!$%$ A))r#b*)%"Collect and Store Additional Data

Tuesday, June 11, 13

Page 80: Inside Look at Mura CMS Themeing

2)%!$%$ A))r#b*)%"Collect and Store Additional Data

Tuesday, June 11, 13

Page 81: Inside Look at Mura CMS Themeing

2)%!$%$ A))r#b*)%"Collect and Store Additional Data

Tuesday, June 11, 13

Page 82: Inside Look at Mura CMS Themeing

2)%!$%$ A))r#b*)%"Collect and Store Additional Data

Tuesday, June 11, 13

Page 83: Inside Look at Mura CMS Themeing

2)%!$%$ A))r#b*)%"Collect and Store Additional Data

Tuesday, June 11, 13

Page 84: Inside Look at Mura CMS Themeing

2)%!$%$ A))r#b*)%"What you can extend

Tuesday, June 11, 13

Page 85: Inside Look at Mura CMS Themeing

2)%!$%$ A))r#b*)%"What you can extend

Tuesday, June 11, 13

Page 86: Inside Look at Mura CMS Themeing

2)%!$%$ A))r#b*)%"What you can extend

Everything!

Tuesday, June 11, 13

Page 87: Inside Look at Mura CMS Themeing

0&!3-.4,..0f,

Deploy custom class extensions directly from your theme!

Tuesday, June 11, 13

Page 88: Inside Look at Mura CMS Themeing

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

Page 89: Inside Look at Mura CMS Themeing

D%,&Extended Attributes

Tuesday, June 11, 13

Page 90: Inside Look at Mura CMS Themeing

C&!)%!) I)%r()&r

Tuesday, June 11, 13

Page 91: Inside Look at Mura CMS Themeing

C&!)%!) I)%r()&r

•Retrieve and display Mura content

Tuesday, June 11, 13

Page 92: Inside Look at Mura CMS Themeing

C&!)%!) I)%r()&r

•Retrieve and display Mura content

•Utilize Mura Content Collections

Tuesday, June 11, 13

Page 93: Inside Look at Mura CMS Themeing

C&!)%!) I)%r()&r

•Retrieve and display Mura content

•Utilize Mura Content Collections

•Use your own markup

Tuesday, June 11, 13

Page 94: Inside Look at Mura CMS Themeing

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

Page 95: Inside Look at Mura CMS Themeing

C&!)%!) I)%r()&rSetup your feed

Tuesday, June 11, 13

Page 96: Inside Look at Mura CMS Themeing

C&!)%!) I)%r()&rSetup your feed

Tuesday, June 11, 13

Page 97: Inside Look at Mura CMS Themeing

C&!)%!) I)%r()&rLoop through content

Tuesday, June 11, 13

Page 98: Inside Look at Mura CMS Themeing

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

Page 99: Inside Look at Mura CMS Themeing

D%,&Content Iterator

Tuesday, June 11, 13

Page 100: Inside Look at Mura CMS Themeing

I,(-%" & S)5.#!-

Tuesday, June 11, 13

Page 101: Inside Look at Mura CMS Themeing

I,(-%" & S)5.#!-

•Dynamic CSS Hooks

Tuesday, June 11, 13

Page 102: Inside Look at Mura CMS Themeing

I,(-%" & S)5.#!-

•Dynamic CSS Hooks

•LESS

Tuesday, June 11, 13

Page 103: Inside Look at Mura CMS Themeing

I,(-%" & S)5.#!-

•Dynamic CSS Hooks

•LESS

•CF Static

Tuesday, June 11, 13

Page 104: Inside Look at Mura CMS Themeing

I,(-%" & S)5.#!-

•Dynamic CSS Hooks

•LESS

•CF Static

•Mura Bootstrap

Tuesday, June 11, 13

Page 105: Inside Look at Mura CMS Themeing

I,(-%" & S)5.#!-

•Dynamic CSS Hooks

•LESS

•CF Static

•Mura Bootstrap

•Font Awesome

Tuesday, June 11, 13

Page 106: Inside Look at Mura CMS Themeing

I,(-%" & S)5.#!-

•Dynamic CSS Hooks

•LESS

•CF Static

•Mura Bootstrap

•Font Awesome

•Robust Image Management

Tuesday, June 11, 13

Page 107: Inside Look at Mura CMS Themeing

D5!(,#0 CSS H&&'"

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

Tuesday, June 11, 13

Page 108: Inside Look at Mura CMS Themeing

LESS CSS

Tuesday, June 11, 13

Page 109: Inside Look at Mura CMS Themeing

LESS CSS

• Dynamic CSS Language

Tuesday, June 11, 13

Page 110: Inside Look at Mura CMS Themeing

LESS CSS

• Dynamic CSS Language

• Built in functions and variables

Tuesday, June 11, 13

Page 111: Inside Look at Mura CMS Themeing

LESS CSS

• Dynamic CSS Language

• Built in functions and variables

• MUCH quicker!

Tuesday, June 11, 13

Page 112: Inside Look at Mura CMS Themeing

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

Page 113: Inside Look at Mura CMS Themeing

CF S)()#0

Tuesday, June 11, 13

Page 114: Inside Look at Mura CMS Themeing

CF S)()#0

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

Tuesday, June 11, 13

Page 115: Inside Look at Mura CMS Themeing

CF S)()#0

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

•Create dependencies and alternate IE includes

Tuesday, June 11, 13

Page 116: Inside Look at Mura CMS Themeing

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

Page 117: Inside Look at Mura CMS Themeing

D%,&CF Static & LESS

Tuesday, June 11, 13

Page 118: Inside Look at Mura CMS Themeing

M*r( B&&)")r(1

Tuesday, June 11, 13

Page 119: Inside Look at Mura CMS Themeing

M*r( B&&)")r(1

•Default theme for Mura 6

Tuesday, June 11, 13

Page 120: Inside Look at Mura CMS Themeing

M*r( B&&)")r(1

•Default theme for Mura 6

•Scaffolding

Tuesday, June 11, 13

Page 121: Inside Look at Mura CMS Themeing

M*r( B&&)")r(1

•Default theme for Mura 6

•Scaffolding

•Uses LESS

Tuesday, June 11, 13

Page 122: Inside Look at Mura CMS Themeing

M*r( B&&)")r(1

•Default theme for Mura 6

•Scaffolding

•Uses LESS

•Built in fluid, responsive layout

Tuesday, June 11, 13

Page 123: Inside Look at Mura CMS Themeing

M*r( B&&)")r(1

•Default theme for Mura 6

•Scaffolding

•Uses LESS

•Built in fluid, responsive layout

•Carousel function

Tuesday, June 11, 13

Page 124: Inside Look at Mura CMS Themeing

F&!) Aw%"&,%

Tuesday, June 11, 13

Page 125: Inside Look at Mura CMS Themeing

F&!) Aw%"&,%

Tuesday, June 11, 13

Page 126: Inside Look at Mura CMS Themeing

F&!) Aw%"&,%

•Built into Bootstrap theme

Tuesday, June 11, 13

Page 127: Inside Look at Mura CMS Themeing

F&!) Aw%"&,%

•Built into Bootstrap theme

•302 icons to date

Tuesday, June 11, 13

Page 128: Inside Look at Mura CMS Themeing

F&!) Aw%"&,%

•Built into Bootstrap theme

•302 icons to date

•Vector icons (scalability)

Tuesday, June 11, 13

Page 129: Inside Look at Mura CMS Themeing

F&!) Aw%"&,%

•Built into Bootstrap theme

•302 icons to date

•Vector icons (scalability)

•CSS Control

Tuesday, June 11, 13

Page 130: Inside Look at Mura CMS Themeing

F&!) Aw%"&,%

•Built into Bootstrap theme

•302 icons to date

•Vector icons (scalability)

•CSS Control

Tuesday, June 11, 13

Page 131: Inside Look at Mura CMS Themeing

R&b*") I,(-% M(!(-%,%!)

Tuesday, June 11, 13

Page 132: Inside Look at Mura CMS Themeing

R&b*") I,(-% M(!(-%,%!)

•Custom image sizes

Tuesday, June 11, 13

Page 133: Inside Look at Mura CMS Themeing

R&b*") I,(-% M(!(-%,%!)

•Custom image sizes

•Admin image editing

Tuesday, June 11, 13

Page 134: Inside Look at Mura CMS Themeing

R&b*") I,(-% M(!(-%,%!)

•Custom image sizes

•Admin image editing

•Custom sizes are cached

Tuesday, June 11, 13

Page 135: Inside Look at Mura CMS Themeing

R&b*") I,(-% M(!(-%,%!)

Tuesday, June 11, 13

Page 136: Inside Look at Mura CMS Themeing

R&b*") I,(-% M(!(-%,%!)

<img src=”#$.content().getImageURL()#” />

Use associated image in your templates

Tuesday, June 11, 13

Page 137: Inside Look at Mura CMS Themeing

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

Page 138: Inside Look at Mura CMS Themeing

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

Page 139: Inside Look at Mura CMS Themeing

D%,&Images

Tuesday, June 11, 13

Page 140: Inside Look at Mura CMS Themeing

M&b#.% R%!$%r#!-

Tuesday, June 11, 13

Page 141: Inside Look at Mura CMS Themeing

M&b#.% R%!$%r#!-•Automatically detect and

serve up mobile content

Tuesday, June 11, 13

Page 142: Inside Look at Mura CMS Themeing

M&b#.% R%!$%r#!-•Automatically detect and

serve up mobile content

•jQuery Mobile

Tuesday, June 11, 13

Page 143: Inside Look at Mura CMS Themeing

M&b#.% R%!$%r#!-•Automatically detect and

serve up mobile content

•jQuery Mobile

•Admin mobile controls

Tuesday, June 11, 13

Page 144: Inside Look at Mura CMS Themeing

S#)% B*!$.%"

Tuesday, June 11, 13

Page 145: Inside Look at Mura CMS Themeing

S#)% B*!$.%"

•Distribute themes with content

Tuesday, June 11, 13

Page 146: Inside Look at Mura CMS Themeing

S#)% B*!$.%"

•Distribute themes with content

•Includes all pages, form responses, images, version history, plugins, users etc.

Tuesday, June 11, 13

Page 147: Inside Look at Mura CMS Themeing

S#)% B*!$.%"

Tuesday, June 11, 13

Page 148: Inside Look at Mura CMS Themeing

+(!'"!Ronnie Duke

[email protected]

themodmedia.com

@modmedia

Tuesday, June 11, 13