The document provides an overview of theming capabilities in Mura CMS. Key points include:
- Mura themes can extend core functionality, contain custom logic, retrieve information from Mura, and be flexible.
- Tools for themes include templates & overrides, Mura scope, extended attributes, content iterator, styling/images, and mobile rendering.
- Theme structure involves frameworks, CSS/LESS, overrides, images, JavaScript, and templates/includes.
- Templates and overrides allow custom page templates, theme overrides, and content rendering control.
- Event handlers can override Mura events and create custom actions.
- Mura scope accesses content attributes and inserts Mura objects
5. About Ronnie
•Based in Oregon, USA
•Working with HTML since ’99
•Starting using Mura (Sava) in 2008
Tuesday, June 11, 13
6. About Ronnie
•Based in Oregon, USA
•Working with HTML since ’99
•Starting using Mura (Sava) in 2008
•Primarily Front End
Tuesday, June 11, 13
7. 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
8. 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
10. A Mura Theme Can:
•Extend core Mura functionality
Tuesday, June 11, 13
11. A Mura Theme Can:
•Extend core Mura functionality
•Contain custom logic
Tuesday, June 11, 13
12. A Mura Theme Can:
•Extend core Mura functionality
•Contain custom logic
•Retrieve information from the
Mura architecture
Tuesday, June 11, 13
13. A Mura Theme Can:
•Extend core Mura functionality
•Contain custom logic
•Retrieve information from the
Mura architecture
•Be as flexible as needed
Tuesday, June 11, 13
14. A Mura Theme Can:
•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
62. Event Handler
Hook 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 submits
Tuesday, June 11, 13
68. Mura Scope
Access content attributes
$.content(‘title’)
Get the page’s title
$.content().getImageURL(‘large’)
Get the associated image
Tuesday, June 11, 13
75. The [mura] tag
Access Mura Scope methods in the Mura admin
[mura]$.dspObject(‘component’,‘Some Component’)[/mura]
Tuesday, June 11, 13
76. The [mura] tag
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
93. Content Iterator
•Retrieve and display Mura
content
•Utilize Mura Content Collections
•Use your own markup
Tuesday, June 11, 13
94. Content Iterator
•Retrieve and display Mura
content
•Utilize Mura Content Collections
•Use your own markup
•No need to write custom
queries
Tuesday, June 11, 13
110. LESS CSS
• Dynamic CSS Language
• Built in functions and variables
Tuesday, June 11, 13
111. LESS CSS
• Dynamic CSS Language
• Built in functions and variables
• MUCH quicker!
Tuesday, June 11, 13
112. 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
136. Robust Image Management
<img src=”#$.content().getImageURL()#” />
Use associated image in your templates
Tuesday, June 11, 13
137. 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
Tuesday, June 11, 13
138. 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 sizes
Tuesday, June 11, 13
146. Site Bundles
•Distribute themes with content
•Includes all pages, form
responses, images, version
history, plugins, users etc.
Tuesday, June 11, 13