[Skip to content]

Search our Site
Easysite Resource Centre
Creating a new Theme

Building a new Theme

What are the essential steps to create your own new Easysite Theme?
building blocks

To create a new Master theme:

Copy

Copy your Master starter theme within the EasySiteWeb folder on your pc or development server. Example file path:

C:\Development\Data\EasySite_v6_0\Application\EasySiteWeb\EasySite\StyleData\

Rename

Give the Style an appropriate and easily identifiable name, for example, ER_Master (the client or site’s initials in caps, then an underscore, then the style type.

For style variants you might use HP for homepage or LG for low graphics).

Find and replace

Find and replace all references to the previous style name, for example:

/EasySiteWeb/EasySite/StyleData/Training_Master/Images/background.png

changes to:

/EasySiteWeb/EasySite/StyleData/ER_Master/Images/ background.png

This file path will be used in various css files when referencing background images. It may also be used in ascx file to reference script files.

Import

Import the style into Easysite, making sure to set the relevant inheritance properties.

Create

Create a new page in Easysite and apply the style.

Change

Make changes to the css, code files and page controls as appropriate in order to achieve your design.

Test & validate

View the changes in your browser. Make sure to test your styles across a variety of browsers and operating systems. You may also want to test mobile devices.

Check that the html and css validate.

To create a new Variant theme:

Remember, for a variant theme you only need to include those files which are different to the Master theme. For instance this might be /PageControls/DocumentMasthead.ascx. Or it might be just /CSS/Variant.css.

If copying page controls, then you will probably want to begin by copying your Master style and deleting those things you don't need.

If all you need is a CSS file then there is no need to copy anything. Just create a new folder (for instance, ER_HP), a sub folder and a file: /CCS/variant.css

Starter themes

When you attend Style Training you will be given a number of base themes which you can use as the starting point for future integrations.

These will include a Default, Master and Variant theme. They will have names beginning either Starter_ or Training_

You may also have a folder called System_Default. This is purely for reference, and shouldn't be used for integrations.

These themes are not part of your base installation of Easysite.

Remember:

You only need to include the files which will differ from the inherited style. Others can and should be deleted.