Switching Orchard Theme Styles and Colors

Switching Orchard Theme Styles and Colors

Orchard CMS is an excellent content management system based on ASP.NET MVC. I absolutely love creating custom Orchard Themes and Modules for my clients. One particularly nice thing about Orchard is that although it can be very opinionated in the HTML it renders, it will get out of your way! This makes Orchard an absolute joy for creating custom themes for clients. Often these custom themes come in multiple styles / colors and the client wants to switch between those theme variations easily. As with all things in Orchard, this is easily done and I do it with my default theme in Orchard - Twitter Bootstrap.

Default Orchard Theme - Twitter Bootstrap

I have a couple of default Orchard Themes I use with Orchard and one of them is Twitter Bootstrap. I just love Twitter Bootstrap because

  1. It is free.
  2. It is constantly being updated.
  3. It is responsive ( displays well on desktops, smartphones, and tablets ).
  4. It comes with nice typography and JavaScript components.
  5. etc...

You get the point. Twitter Bootstrap is pretty amazing.

By default, Twitter Bootstrap is your basic black, white, and blue website that is a really nice starter website template for your personal or small business website. However, wouldn't it be nice if we could use Twitter Bootstrap as our default Orchard Theme but have the ability to switch between various styles of the theme? I think so.

Twitter Bootstrap Orchard Theme

Switching Orchard Theme Styles and Colors with Twitter Bootstrap

So we want to use Twitter Bootstrap as our Orchard Theme, but we want to vary the colors or style of the theme on-the-fly. This is really just about switching the CSS used by the current Orchard Theme and I do this with a simple Theme Settings Module I created for Orchard. My goal here isn't to go through the development of the module, but just explain that this sort of thing is possible and really cool. It is especially useful for my clients who host Orchard as a CMS and they want their clients to have the ability not only to switch themes, but to vary the colors and styles of those themes, too.

I've got some pretty sophisticated Theme Settings Modules, but the simplest one I have just allows you to switch the style of the current Orchard Theme to other styles / colors it supports. So, the basic module with Twitter Bootstrap shows something like the following.

Orchard Theme Style Selector

If you're logged in as admin, a similar dropdown menu gets injected into the top of the website, too, allowing you to switch theme styles without having to go to the dashboard all the time. It works very similar to previewing an Orchard Theme.

The beauty is that as you select the style of the Twitter Bootstrap Orchard Theme, the style of your website changes on the fly. With one theme you have numerous style options that can look completely different with absolutely no effort.

Custom Orchard Theme Styles Based on Twitter Bootstrap

Again, this is the same content and same custom Twitter Bootstrap Orchard Theme just with a variation in the style and colors. Takes 2 seconds to switch from style-to-style and the website looks really different.

Twitter Bootstrap Orchard Recipe

Now Twitter Bootstap is extremely cool and the ability to switch between the different styles by a click-of-a-button is even more awesome. But these are just themes and what people really want are websites. Here is where Orchard Receipes come in. Clients want a Boostrap Starter Website that includes sliders, blog, portfolio, contact form, FAQ, social networking widgets, and everything else. You build these and toss them into a recipe along with the Twitter Bootstrap Theme Switcher and they're pretty much in heaven. I'll save the Orchard Recipe discussion for a later time.

Twitter Bootstrap Orchard Recipe

Conclusion

It's really fun building websites, themes, and modules for Orchard. Hopefully the discussion of Twitter Bootstrap and changing styles of the theme on-the-fly encourages you to tinker with Orchard Theme and Module Development!

If you are interested in upgrading your existing website, creating a new website, or looking for a custom Orchard Theme or Orchard Module, please email me.

Email Me