CMS Driven Theming in Sitecore.

Task

Recently I came across an interesting challenge on one of our projects. As a result, I would like to share my experience by running through step-by-step theming for Sitecore EXM templates.

Problems

Before starting implementation my first thought was that we could simply reuse a previously implemented theming from another part of the project. However, it wasn’t possible as that approach wasn’t suitable for EXM emails. So we had to reinvent the wheel!

As you may know, probably the best approach on the implementation of email layouts for supporting the different email agents is to use table layout. That usually gives good results at supporting old browsers and agents however it isn’t that simple to make this layout component-based or to provide proper components theming to it.

Here is a piece of the cross-browser email markup so you can understand how complex it really is:

Requirements

After we broke the main layout down to components and bound them to data, we had two main requirements:

the particular theme for component should allow us to set different component backgrounds, text colours and to have different buttons styling
number of themes is defined, however, it should be possible to extend that in future.

Challenge

My main challenge was to provide a handy solution for the customer which would allow modifying and adding themes right in Sitecore, as I strongly believe this is one of the main goals of proper Content Management System.

Solution

Data template

From the CMS perspective I had to prepare a Sitecore data template theme, taking into account all possible theming variables:

Data sources

The next step was to create a bunch of themes basing on a previously created data template. This approach allowed us to leave the content manager with all the flexibility they need, allowing them to create new themes and to modify values of existing ones:

Parameter template

We also needed to create a parameter template for the renderings with “Theme” drop link field which then allow us to select a theme on a particular rendering.

Then I set ID of “Exm Themes” item from the previous step as a source for this field. In this way, we would have a possibility to select any of created themes via rendering parameters after this template is connected to component rendering by “Parameter Template” field.

View

The next step was to pick up the information from CMS and to use it in proper places in the .cshtml:

As it's shown on the above example we can either use these values in any places we need inside the corresponding component or skip any of them if they are redundant in the specific component.