Orchard CMSFront-End Styling

Rebecca Pleshaw Cloud Construct, LLC

June 20, 20126:00pm – 8:00pm

Microsoft N.E.R.D. Buildinghttp://orchardcmsboston.org

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

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.

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

Copyright 2012 Cloud Construct, LLC

Layout.cshtml

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

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

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

Copyright 2012 Cloud Construct, LLC

Questions?