[Skip to content]

Search our Site
Easysite Resource Centre
Style Inheritance

Style Inheritance

Understand how Styles can inherit, allowing you to quickly deploy variant themes based on a common default.

Styles can be stacked up to inherit properties to avoid duplication of images, markup or stylesheets

– a good example would be where you want to maintain a consistent look and feel across the site but have a different colour scheme for each of your main top level sections.

Style variants
Style variants allow quick creation of themes based on your master style

So you might have a Default Style which sets out your brand defaults, including Css library files for forms, grids and other standard markup. This Style can be used across multiple web sites which may share many visual properties.

A Master Style for a specific site may determine the layout markup and from here you may create Variant Styles for the home page (no side navigation), or key landing pages (changing colour schemes).

Once you have configured your Default Style and applied to all pages for the site, you then configure the inheritance for your Master and / or Variants before applying to specific pages.

Administration > Settings > Styles > Master Style
Master style
Inheritance: Master style
Administration > Settings > Styles > Variant Style
Variant Styles
Inheritance: Style Variant
Master style
Inheritance: Master style

Administration > Settings > Styles > Variant Style


So if your Variant refers to an image, you may store this in the Master or higher up in the Default Style folder so you avoid duplicating files, and the same goes for the Page Template or Page Controls as well as Css files.

Taking Css as an example you might see in the source code:

<link type="text/css" rel="stylesheet" href="/EasySiteWeb/EasySite/StyleData/Web/Css/style.css" />
 <link type="text/css" rel="stylesheet" href="/EasySiteWeb/EasySite/StyleData/Master/CSS/master.css" />
 <link type="text/css" rel="stylesheet" href="/EasySiteWeb/EasySite/StyleData/Variant/CSS/variant.css" />