Introduction

EPiServer CMS introduces support for the .NET based theming technology whereby you can attach stylesheet properties to controls by associating them through properties. A number of web controls will have a default skin telling the browser what specific look each of these controls should have. The default skin can be replaced with a custom skin.

EPiServer Themes and Your Implementations

It is important to be aware of the EPiServer theming implementation when developing your own controls or EPiServer pages for the EPiServer GUI (usually the Edit or Admin mode). If you design your own page and add a control that is mapped to the EPiServer theming, any style you applied manually will be overriden by the EPiServer theme. To apply your own look and feel to this control you need to create a style sheet and bind this to the control with the SkinId property (see below).

Applying Your Own Skin - Example

Developer skins need to be defined in a .skin file and placed in the ~/App_Themes/<YourThemeFolder> folder.
For EPiServer to recognize your skin you are required to map your stylesheet to your id in the skin file.

A control
As an example we will create a custom plugin consisting of an editbox with blue background. First we create our user control, "MyControl.ascx" that will appear as a tab in Edit mode:

CopyC#
namespace EPiServerSample
{
    [GuiPlugIn(DisplayName = "MyControl",
        Description = "A test plugin to demonstrate skins",
        Area = PlugInArea.EditPanel,
        Url = "~/MyControl.ascx",
        RequiredAccess = EPiServer.Security.AccessLevel.Edit)]
    public partial class MyControl : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
    }
}

A stylesheet
We now have a plugin that we can attach skins to. In our sample we will create a TextBox with blue background. To do this we need a stylesheet that defines our background color:

"mystyle.css", placed in ~/EPiServerSample/App_Themes/Default/Styles. All stylesheets in this folder will be included automatically when an EPiServer site is loaded.

Copy 
.textboxblueskin
{
    background-color: Blue;
}

A skin
When we have our styles defined, we need to map a SkinId to a stylesheet in order for EPiServer CMS to know what styles to use. We do this by defining our skinID in a .skin file as demonstrated below.

A sample skin for the TextBox control - "myskin.skin" placed in ~\EPiServerSample\App_Themes\Default\.

Copy 

After defining our skin and style we can use these on the .ascx by setting the SkinID property:

Copy 
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyControl.ascx.cs" 
    Inherits="EPiServerSample.MyControl" %>

And we are done! Restarting EPiServer and clicking a page in Edit mode will reveal a new tab containing our control:



Enabling Theming on an .aspx Page Plugin

To demonstrate how to use the default EPiserver theme as well as implementing your own skins on an EPiServer .aspx page we will show you an example on creating an .aspx plugin for the administration interface.

We start off with creating a new web form and changing its base class to EPiServer.UI.SystemPageBase. First we need the following using directives:

CopyC#
using EPiServer;
using EPiServer.UI;
using EPiServer.PlugIn;

After including the correct namespaces we need to switch the base class of our class from System.Web.UI.Page to EPiServer.UI.SystemPageBase. By doing this we enable theming for our page by default since this is handled further up the chain of inheritance.

When we have the correct class of the correct type we can add the plugin attributes:

CopyC#
[GuiPlugIn(DisplayName = "MyAspxControlTest",
Description = "A test plugin to demonstrate skins on an .aspx page",
Area = PlugInArea.AdminMenu,
Url = "~/AspxControlTest.aspx",
RequiredAccess = EPiServer.Security.AccessLevel.Edit)]

Finally we add a heading to our page in the Page_Load function:

CopyC#
SystemMessageContainer.Heading = "My Heading";

The class should now look something like this:

CopyC#
using EPiServer;
using EPiServer.UI;
using EPiServer.PlugIn;

namespace EPiServerSample.templates
{

    [GuiPlugIn(DisplayName = "MyAspxControlTest",
    Description = "A test plugin to demonstrate skins on an .aspx page",
    Area = PlugInArea.AdminMenu,
    Url = "~/AspxControlTest.aspx",
    RequiredAccess = EPiServer.Security.AccessLevel.Edit)]
    public partial class AspxControlTest : SystemPageBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            SystemMessageContainer.Heading = "My Heading";
        }
    }
}

On our page we will have a TextBox that will receive its layout from our predefined skin and a Button that will inherit the default EPiServer theme.

The markup of AspxControlTest.aspx.
Copy 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AspxControlTest.aspx.cs" 
    Inherits="EPiServerSample.templates.AspxControlTest" 
    MasterPageFile="~/ui/masterpages/episerverui.master" %>


        

If you compile and run this you will now have a new menu option on the Admin tab named "MyAspxControlTest". Clicking this should show a page similar to this: