Getting It Done With Mura Themes

An introduction and overview of how to create themes for Mura CMS, an open-source content management system.

Transcript

1. Getting It Done With Mura Themes Steve Withington Monday, 16 June 14
2. Monday, 16 June 14
3. Overview What are we talking about? Monday, 16 June 14
4. What are we talking about? Monday, 16 June 14
5. 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
6. Let’s Go Where do I start? Monday, 16 June 14
7. Where do I start? • SiteID Monday, 16 June 14
8. Where do I start? • SiteID Monday, 16 June 14
9. Where do I start? • SiteID Monday, 16 June 14
10. Where do I start? Monday, 16 June 14
11. Where do I start? • /{SiteID}/includes/themes/{ThemeName} Monday, 16 June 14
12. Where do I start? • /{SiteID}/includes/themes/{ThemeName} Monday, 16 June 14
13. Where do I start? Monday, 16 June 14
14. Where do I start? Monday, 16 June 14
15. Where do I start? Monday, 16 June 14
16. Where do I start? Monday, 16 June 14
17. Where do I start? • /{SiteID}/includes/themes/{ThemeName} • /templates/default.cfm Monday, 16 June 14
18. Where do I start? • /{SiteID}/includes/themes/{ThemeName} • /templates/default.cfm Monday, 16 June 14
19. Where do I start? • /{SiteID}/includes/themes/{ThemeName} • /templates/default.cfm Monday, 16 June 14
20. Where do I start? • /{SiteID}/includes/themes/{ThemeName} • /templates/default.cfm Monday, 16 June 14
21. Where do I start? • /{SiteID}/includes/themes/{ThemeName} • /templates/default.cfm Monday, 16 June 14
22. Where do I start? • /{SiteID}/includes/themes/{ThemeName} • /templates/default.cfm Monday, 16 June 14
23. Where do I start? • /{SiteID}/includes/themes/{ThemeName} • /templates/default.cfm Monday, 16 June 14
24. Where do I start? • /{SiteID}/includes/themes/{ThemeName} • /templates/default.cfm Monday, 16 June 14
25. Where do I start? • /{SiteID}/includes/themes/{ThemeName} • /templates/default.cfm Monday, 16 June 14
26. Review Monday, 16 June 14
27. Review • Where themes live • /{SiteID}/includes/themes/{ThemeName} Monday, 16 June 14
28. Review • Where themes live • /{SiteID}/includes/themes/{ThemeName} • Where layout templates live • /{SiteID}/includes/themes/{ThemeName} • /templates/default.cfm Monday, 16 June 14
29. Templates How do I create layouts? Monday, 16 June 14
30. How do I create layouts? • Just like you always have Monday, 16 June 14
31. How do I create layouts? • Just like you always have Monday, 16 June 14
32. How do I create layouts? • Just like you always have Monday, 16 June 14
33. How do I create layouts? • Place files into ‘themes’ directory Monday, 16 June 14
34. How do I create layouts? • Place files into ‘themes’ directory Monday, 16 June 14
35. How do I create layouts? • Create ‘templates’ directory Monday, 16 June 14
36. How do I create layouts? • Create ‘templates’ directory Monday, 16 June 14
37. How do I create layouts? • Rename ‘.html’ files to ‘.cfm’ Monday, 16 June 14
38. How do I create layouts? • Rename ‘.html’ files to ‘.cfm’ Monday, 16 June 14
39. How do I create layouts? • Create a ‘default.cfm’ layout template Monday, 16 June 14
40. How do I create layouts? • Create a ‘default.cfm’ layout template Monday, 16 June 14
41. How do I create layouts? • Use commonly used layout template names Monday, 16 June 14
42. How do I create layouts? • Use commonly used layout template names Monday, 16 June 14
43. How do I create layouts? • Replace any # with ## Monday, 16 June 14
44. How do I create layouts? • Replace any # with ## Monday, 16 June 14
45. How do I create layouts? • Replace any # with ## Monday, 16 June 14
46. How do I create layouts? • Wrap all output with <cfoutput></cfoutput> tags Monday, 16 June 14
47. How do I create layouts? • Wrap all output with <cfoutput></cfoutput> tags Monday, 16 June 14
48. How do I create layouts? Monday, 16 June 14
49. How do I create layouts? • Drop in template variables & code snippets • For example, the relative link for CSS Monday, 16 June 14
50. How do I create layouts? • Drop in template variables & code snippets • For example, the relative link for CSS is broken Monday, 16 June 14
51. How do I create layouts? • Drop in template variables & code snippets • For example, the relative link for CSS is broken Monday, 16 June 14
52. How do I create layouts? • Drop in template variables & code snippets • Easily fixed with a simple template variable: • $.siteConfig(‘themeAssetPath’) Monday, 16 June 14
53. How do I create layouts? • Drop in template variables & code snippets • Easily fixed with a simple template variable: • $.siteConfig(‘themeAssetPath’) Monday, 16 June 14
54. How do I create layouts? • Drop in template variables & code snippets • Easily fixed with a simple template variable: • $.siteConfig(‘themeAssetPath’) Monday, 16 June 14
55. How do I create layouts? • Drop in template variables & code snippets • Easily fixed with a simple template variable: • $.siteConfig(‘themeAssetPath’) Monday, 16 June 14
56. How do I create layouts? • Template Variables (some) Monday, 16 June 14
57. 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
58. How do I create layouts? • Inspecting Available Attributes • <cfdump var=”#someVariable#” /> Monday, 16 June 14
59. How do I create layouts? • Inspecting Available Attributes • <cfdump var=”#$.content().getAllValues()#” /> Monday, 16 June 14
60. How do I create layouts? • Inspecting Available Attributes • <cfdump var=”#$.content().getAllValues()#” /> Monday, 16 June 14
61. How do I create layouts? • Inspecting Available Attributes Monday, 16 June 14
62. How do I create layouts? • Inspecting Available Attributes • $.content().getAllValues() • $.globalConfig().getAllValues() • $.siteConfig().getAllValues() • $.currentUser().getAllValues() • $.component().getAllValues() Monday, 16 June 14
63. How do I create layouts? • Code Snippets (helper functions) Monday, 16 June 14
64. How do I create layouts? • Code Snippets (helper functions) • Dynamically generate Primary Navigation Monday, 16 June 14
65. How do I create layouts? • Code Snippets (helper functions) • Dynamically generate Primary Navigation • Output the Body/Content Monday, 16 June 14
66. 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
67. 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
68. How do I create layouts? • Code Snippets Monday, 16 June 14
69. How do I create layouts? • Code Snippets • $.dspPrimaryNav( viewDepth=1 , id=‘navPrimary‘ , displayHome=‘always‘ , closeFolders=true ) Monday, 16 June 14
70. How do I create layouts? • Code Snippets • $.dspPrimaryNav( viewDepth=1 , id=‘navPrimary‘ , displayHome=‘always‘ , closeFolders=true ) Monday, 16 June 14
71. 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
72. How do I create layouts? • Code Snippets • $.dspObjects(regionNumber) Monday, 16 June 14
73. How do I create layouts? • Code Snippets • $.dspObjects(regionNumber) Monday, 16 June 14
74. How do I create layouts? • Code Snippets • $.dspObjects(regionNumber) Monday, 16 June 14
75. How do I create layouts? • Code Snippets • $.dspComponent(‘Component Name or ID’) Monday, 16 June 14
76. How do I create layouts? • Code Snippets • $.dspComponent(‘Component Name or ID’) Monday, 16 June 14
77. How do I create layouts? • Code Snippets • $.dspComponent(‘Component Name or ID’) Monday, 16 June 14
78. How do I create layouts? • Code Snippets • Create CSS hooks Monday, 16 June 14
79. How do I create layouts? • Code Snippets • Create CSS hooks • <body id=”#$.getTopID()#” class=”depth#ArrayLen($.event(‘crumbdata’))#”> Monday, 16 June 14
80. 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
81. 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
82. 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
83. 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
84. How do I create layouts? • Optionally, include Mura’s CSS for basic styling of Mura-generated output Monday, 16 June 14
85. 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
86. 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
87. 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
88. 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
89. 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
90. Review Monday, 16 June 14
91. Review • Create ‘templates’ directory Monday, 16 June 14
92. Review • Create ‘templates’ directory • Rename any .html files to .cfm & create ‘default.cfm’ Monday, 16 June 14
93. Review • Create ‘templates’ directory • Rename any .html files to .cfm & create ‘default.cfm’ • Replace any # with ## Monday, 16 June 14
94. 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
95. 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
96. 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
97. UI Options What can I use? Monday, 16 June 14
98. What can I use? • Any front-end framework you want Monday, 16 June 14
99. What can I use? • Any front-end framework you want Monday, 16 June 14
100. What can I use? • Any JavaScript library you want Monday, 16 June 14
101. What can I use? • Any JavaScript library you want Monday, 16 June 14
102. What can I use? • Any JavaScript framework you want Monday, 16 June 14
103. What can I use? • Any JavaScript framework you want Monday, 16 June 14
104. Review • Use pretty much anything you want Monday, 16 June 14
105. Review • Use pretty much anything you want . Monday, 16 June 14
106. Default Output Can I customize that? Monday, 16 June 14
107. Can I customize that? • Display Objects Monday, 16 June 14
108. Can I customize that? • Display Objects Monday, 16 June 14
109. Can I customize that? • Display Objects Monday, 16 June 14
110. Can I customize that? • Display Objects Monday, 16 June 14
111. Can I customize that? • Display Objects Monday, 16 June 14
112. Can I customize that? • Display Objects Monday, 16 June 14
113. Can I customize that? • “Site” Display Objects • /{SiteID}/includes/display_objects/ Monday, 16 June 14
114. Can I customize that? • “Site” Display Objects • /{SiteID}/includes/display_objects/ Monday, 16 June 14
115. Can I customize that? • “Site” Display Objects • /{SiteID}/includes/display_objects/ Monday, 16 June 14
116. Can I customize that? • “Site” Display Objects • /{SiteID}/includes/display_objects/dsp_login.cfm Monday, 16 June 14
117. Can I customize that? • “Site” Display Objects • /{SiteID}/includes/display_objects/dsp_login.cfm Monday, 16 June 14
118. Can I customize that? • “Site” Display Objects • /{SiteID}/includes/display_objects/dsp_login.cfm Monday, 16 June 14
119. Can I customize that? • “Site” Display Objects • /{SiteID}/includes/display_objects • /custom/dsp_login.cfm Monday, 16 June 14
120. Can I customize that? • “Site” Display Objects • /{SiteID}/includes/display_objects • /custom/dsp_login.cfm Monday, 16 June 14
121. Can I customize that? • “Site” Display Objects • /{SiteID}/includes/display_objects • /custom/dsp_login.cfm Monday, 16 June 14
122. Can I customize that? • “Theme” Display Objects • /{SiteID}/includes/themes/{ThemeName} • /display_objects/dsp_login.cfm Monday, 16 June 14
123. Can I customize that? • “Theme” Display Objects • /{SiteID}/includes/themes/{ThemeName} • /display_objects/dsp_login.cfm Monday, 16 June 14
124. Can I customize that? • “Theme” Display Objects • /{SiteID}/includes/themes/{ThemeName} • /display_objects/dsp_login.cfm Monday, 16 June 14
125. Review Monday, 16 June 14
126. Review • /{SiteID}/includes Monday, 16 June 14
127. Review • /{SiteID}/includes • /display_objects/custom/{displayObject} Monday, 16 June 14
128. Review • /{SiteID}/includes • /display_objects/custom/{displayObject} • /themes/{ThemeName}/display_objects/{displayObject} Monday, 16 June 14
129. Extensions Can I make my own? Monday, 16 June 14
130. Can I make my own? Monday, 16 June 14
131. Can I make my own? • Class Extensions Monday, 16 June 14
132. Can I make my own? • Class Extensions • New Content types Monday, 16 June 14
133. Can I make my own? • Class Extensions • New Content types • New Component types Monday, 16 June 14
134. Can I make my own? • Class Extensions • New Content types • New Component types • New User types Monday, 16 June 14
135. Can I make my own? • Class Extensions • New Content types • New Component types • New User types • Related Content Sets Monday, 16 June 14
136. Can I make my own? • Class Extensions • New Content types • New Component types • New User types • Related Content Sets Monday, 16 June 14
137. Can I make my own? • Page / Home Monday, 16 June 14
138. Can I make my own? • Page / Home Monday, 16 June 14
139. Can I make my own? • Page / Home Monday, 16 June 14
140. Can I make my own? • Page / Home Monday, 16 June 14
141. Can I make my own? • Page / Home Monday, 16 June 14
142. Can I make my own? • Page / Home Monday, 16 June 14
143. Can I make my own? • Page / Home • Allow editing via Front-End Monday, 16 June 14
144. 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
145. 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
146. 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
147. Can I make my own? • Page / Home Monday, 16 June 14
148. Can I make my own? • Page / Home Monday, 16 June 14
149. Can I make my own? • Page / Home Monday, 16 June 14
150. Can I make my own? • Component / Features Monday, 16 June 14
151. Can I make my own? • Component / Features Monday, 16 June 14
152. Can I make my own? • Component / Features Monday, 16 June 14
153. Can I make my own? • Class Extensions • Define with UI Monday, 16 June 14
154. Can I make my own? • Class Extensions • Define with UI Monday, 16 June 14
155. Can I make my own? • Class Extensions • Define with XML Monday, 16 June 14
156. Can I make my own? • Class Extensions • Define with XML • {ThemeName}/config.xml.cfm Monday, 16 June 14
157. Can I make my own? • Class Extensions • Define with XML • {ThemeName}/config.xml.cfm Monday, 16 June 14
158. Can I make my own? • Class Extensions • Define with XML • {ThemeName}/config.xml.cfm Monday, 16 June 14
159. Review Monday, 16 June 14
160. Review • Use Class Extensions (when needed) Monday, 16 June 14
161. Review • Use Class Extensions (when needed) • Page / Home Monday, 16 June 14
162. Review • Use Class Extensions (when needed) • Page / Home • Custom Component Types Monday, 16 June 14
163. Review • Use Class Extensions (when needed) • Page / Home • Custom Component Types • Turn off Body Monday, 16 June 14
164. 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
165. 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
166. Resources Where can I learn more? Monday, 16 June 14
167. Where can I learn more? Monday, 16 June 14
168. 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
169. Thanks, you rock! Monday, 16 June 14