How to create a new Skin

From Sense/Net Wiki
Jump to: navigation, search
  •  
  •  
  •  
  •  
  • 100%
  • 6.0
  • Enterprise
  • Community
  • Planned

Overview

Skins can be used to customize the look and feel of your pages. In practice this means that the stylesheets of the pages can be overridden and customized. The Sense/Net Skin system however is capable of much more: besides individual CSS stylesheets you can override ContentViews, FieldControlTemplates and javascript files as well. For example if you have a ContentView for a Car content in the base skin, then you can specify another ContentView in another skin folder to differentiate the look of Car content according to whether it is displayed on a page using the base skin or your skin. For this reason whenever you use a CSS or a javascript on a page or reference a ContentView, you have to use the $skin/ path prefix and in case of CSS or javascript files you need to use some special controls to reference them.

Steps

In this section I will show you how to create a Skin step-by-step.


1. Add a new skin into the Skins folder

To create a new skin you have to add a new Skin which is also a content like everything else in Sense/Net. Skins are stored in the Skins folder, so you have to add you skin to /Root/Skins.

Add new Skin

With the given name you can set your Skin as the Skin of your Site.

Create new Skin

Skin content is actually a System Folder which will contain the required folders to store all the skin specific files, images, css and js files, content views, etc.

Skin folder

2. Add skin specific folders to the Skin folder

To customize your Skin you have to add some System Folders to it to store the skin specific files. Only those files will be overridden by your skin which are stored in your custom Skin others will be used from the base Skin. The files of the based Skin are stored in /Root/Global folder grouped in folders by their types. If you want to overide them you have to create the same System Folders under your custom Skin folder except Page Templates which cannot be skin specific.

Skin folders

3. Add a skin specific content view to the Skin folder

For example you want to display your Car content differently on one of your Site which uses a custom Skin. Firstly you have to create a contentviews System Folder in your Skin if it is not exist yet. In this folder create another folder with a name of the Content Type which you want to customize (in this case the folders name will be Car). Now you can add a new Content View (an .ascx file) to this folder or copy an existing one from /Root/Global/contentviews/Car and customize it.

Skin folders

After that Sites and Pages which use your custom Skin will display Car content based on your custom Content View and on other Pages Car content will be look like before based on the base Skin.

Related links

References