Getting It Done With Mura CMS Themes

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

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

17. 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

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

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

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

75. 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

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

113. 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

119. 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

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

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

150. 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

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

Getting It Done With Mura CMS Themes

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

Getting It Done With Mura CMS Themes