An Introduction to Easysite Themes

What is the difference between a Default, Master and Variant theme? How is each used?

Easysite is a .Net application, written in C#.

Themes are built onto the C# framework, but it is not necessary to have any great understanding of C# in order to edit and create your own Easysite Themes. All you need is a good understanding of CSS and HTML.

A little familiarity with XSLT, Javascript, jQuery or C# may well be of benefit, but it is certainly not essential.

What makes a theme?

Easysite theme folders contain a number of sub folders:

CSS
Images
Page Controls
Page Template
XSLT
Scripts

All of these folders (with the possible exception of Scripts) will exist in Default and probably in Master styles. A variant style might only contain the CSS or Page Controls folder (see the Inheritance section below).

The page template folder contains just one file: default.aspx. This contains some basic html, and a number of placeholders for other page controls.

The page controls are like include files, inserting pieces of html and other code into default.aspx.

All graphics and imagery (other than content-controlled assets) are kept within the Images folder.

The XSLT folder contains a number of a files which transform raw xml data into useable HTML.

The CSS folder contains a number of CSS files, and is where you will probably spend most of your time.

The optional Scripts folder contains any custom pieces of code which your theme uses.

Inheritance

Easysite takes advantage of the cascading nature of CSS to offer flexibility and efficiency in managing your themes.

There are three levels of inheritance within Easysite Themes:

What is a theme?

A theme is the name we give to the set of files which control how a site looks, its branding information, navigation and other site furniture.*

* by 'furniture' we mean those things which are consistent from one page to another across the site: footer links, logos, search boxes, login boxes, copyright statements, etc.

Remember:

Avoid duplicating code. Whenever possible, use inheritance.
The names of the theme folders, and all the files they contain (except for images) are set within Easysite, and mustn't be changed - exceptions are where you have created, for instance, an additional stylesheet for responsive behaviour, and called it in to one of the system files.

Because of the cascading nature of CSS, these themes stack up, one on top of the other. So everything in the Default theme is available to the Master theme; everything in the Master AND Default themes is also available to the Variant.

This means that a Variant theme only ever needs to include code which is different to the themes it inherits from. Managing multiple themes over a long period of time will be far easier if code is not duplicated between themes.

Stylesheets

As well as this main stylesheet, a Master theme will also contain a variety of library stylesheets which control various page elements and modules. In addition, it might contain browser specific stylesheets, and some additional content controlling stylesheets (see graphic, right).

In a Default theme the main stylesheet is called style.css.
In a Master theme the main stylesheet is called master.css.
In a Variant theme the main stylesheet is called variant.css.

There is no need to include any of the library stylesheets in a Variant theme. Just overwrite discrete pieces of code in the variant.css. You can also include browser specific stylesheets, if necessary.