Orchard CMS Front-End Styling Rebecca Pleshaw Cloud Construct, LLC June 20, :00pm – 8:00pm Microsoft N.E.R.D. Building Copyright 2012 Cloud Construct, LLC Orchard CMS Boston User Group

Styling Orchard CMS Easy! – Learning curve like everything else in development – Requires strong CSS knowledge to employ best practices – Minimalist styling yields a solid website product Very Structured Little HTML – CSS already packaged to target all areas of the layout True CSS – Cascading Styles in zones and widgets – CMS class ability for exceptions Newest Technology – HTML5, CSS3 – html5.js – Header, Nav, Aside, Article, Footer Copyright 2012 Cloud Construct, LLC

Customize Your Theme Begin with the TheThemeMachine theme and then manipulate that to build your own. Site.css is built to be flexible, adjusting depending on active zones. Copyright 2012 Cloud Construct, LLC

Theme Preview Copyright 2012 Cloud Construct, LLC

Theme.txt Defines what zones are in the theme (Widget Screen) Modifications change what is displayed on the widget screen. Define your Parent Theme With Layout.cshtml we put all those zones in there and render content for them – Masterpage Copyright 2012 Cloud Construct, LLC

Layout.cshtml Copyright 2012 Cloud Construct, LLC

Installing a Theme Within CMS interface Download and drop into Themes directory From CMS Dashboard > Themes, select installed option. Duplicated TheThemeMachine and renamed. Modify applicable zones in Themes.txt Copyright 2012 Cloud Construct, LLC

Parent vs. Child Themes BaseTheme – Set in theme.txt – Set the Parent site to inherit from – Child themes would then be modifications to the Parent theme Parent Company with Subsidiaries Copyright 2012 Cloud Construct, LLC

Images Keep your site files organized! Media – Sits above Themes Propagate throughout all theme switches – Images relative to content What users would have control over in the CMS – Bio Photos – Page Banners – Gallery Images – Product Screengrabs Themes/OrchardBos/Content/images – Images relative to styling – Site design Copyright 2012 Cloud Construct, LLC

In Conclusion Each site worked on brings new lessons and new aspects to take advantage of. Each version of Orchard brings great improvements, making it even easier! – Additional classes in the CMS Example: Aside Second unique on one page Helps target special cases – Avoid modifying markup Copyright 2012 Cloud Construct, LLC

Questions? Copyright 2012 Cloud Construct, LLC