Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting It Done With Mura CMS Themes

1,129 views

Published on

An introduction and overview of how to create themes for Mura CMS, an open source content management system. First presented at MuraCon EU 2014 in Edinburgh, Scotland.

Published in: Technology, Business
  • Be the first to comment

Getting It Done With Mura CMS Themes

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

×