I’ve been a front-end developer for over a decade now and some of my favorite sites to style-up have been Orchard CMS sites. The reason for this is the out-of-the-box structure that comes with this Open Source CMS. There are varying types of skillsets needed in order to hammer out a successful Orchard site. In some cases, you may not be a CSS wiz, but the ease and variety of Orchard Themes gives you flexibility and some nicely packaged designs. On the other side of the fence, you’re a CSS prodigy and you can highly customize the default styles that come with your solution.

After you put your feelers out there and start digging in, you will be customizing your Site.css file just like any other website you’re used to building. The setup of an Orchard site provides you with HTML and class names already cooked into the site. This essentially allows you to use the best CSS practices in order to completely style a website without adding any extra markup.  Your CSS should truly cascade and target the varying zones and widgets around the site. However, it’s not uncommon to run into a site-wide zone that you might need to single-out on a particular page. In this instance, the new Orchard 1.4 lets you apply a class to a zone without having to add any markup to the code behind the scenes. So exceptions are still possible, it’s just now easier for a front-end developer to control this customization.

Orchard is based upon the newest technology, which makes it a flexible solution for the modern web demand. Sites are all HTML5, using CSS3 as the styling standard. As a fallback, html5.js is built into the solution to ensure the newer HTML tags (such as Header, Nav, Aside, Article and Footer) are properly read by older browsers.

In setting up your website, you’re able to customize the layout of your theme. First you’ll begin with the TheThemeMachine theme and then manipulate that to build up your own. The Site.css file is setup to be flexible depending what zones you have activated.  You will specify your active zones in your Themes.txt file, where you list which zones you will have available to you. This directly translates to your Widget dashboard when you log into your Orchard CMS website. The Layout.cshtml file will contain the HTML necessary for all possible zones, to be displayed only when zones contain content. This layout file is probably most similar to an ASP.Net master page.

If you don’t want to tackle a custom design with new CSS development, you can very easily install an Orchard theme.  This can be done in a few different ways. If you visit http://gallery.orchardproject.net/List/Themes/  you can browse the themes gallery, download your favorite and manually drop that theme into the Themes folder of your Orchard site.  Once you log into your Admin Dashboard, click on the Themes link to the left and you’ll see the Current Theme choice, and also the available Themes. In this section you can see the Theme that you had just placed into the file directory. Selecting “Set Current” will switch your site’s design. It’s that easy! Another option is to browse the available themes from the Gallery tab in the Themes section of the Admin Dashboard. Once you find a theme, simply click “Install” and you can go through the previous steps to “Set Current” and apply your newly installed theme.

One final note that I feel is important is the location of site images.  Now that we have an understanding of how Themes work, it is important that we properly categorize images used on our site. First we have the Media folder, which sits above the Themes directory. These images should be thought of as content that users would otherwise control via the CMS, such as bio photos, page banners, gallery images, product screenshots, etc. The other category of images would be those related to the actual design and styling of the site. These images would remain relative to the applied theme and would be located within that theme’s Content/images folder.

As Orchard is a constantly improving CMS solution, there are continuing developments which make designing and building a site better, stronger and in some cases even easier. Front-end developers are able to dive into the CSS portion without having to tamper with any of the back-end files that accompany the project. You can get as creative as you’d like, or sit back and easily apply some already professionally designed themes. Regardless of your route, you’ll end up with a solid website backed by the latest in development technology.

About the Author:

Rebecca heads up Cloud Construct's Marketing side of the house and is the team's Front End Development Lead. She graduated from Bentley University and received a Bachelor's Degree in Information Design and Corporate Communication with a chosen focus on Web Design. In addition, Rebecca minored in Information Technology.

With a unique mix of left and right brain, she has mastered both front end development as well as visual design, lending itself to a dynamic user experience background.