View source for How to create a new Skin

[[Category:Howto]]
[[Category:Portal builders]]
{{FeatureInfo
|editions=wcm,ecm,comm
|fromversion=6.0
|wikicomplete=100%
|interest=enduser,builder
|enduserlink=
|builderlink=
|developerlink=
|sysoplink=
}}
 
{| style="margin-left:2em;" align="right"
| __TOC__
|}

=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 [[The Skin System - for Portal builders|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. 
{{Screenshot|Addnewskin.png|Add new Skin}}
With the given name you can set your Skin as the Skin of your Site.
{{Screenshot|Createnewskin.png|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.
{{Screenshot|Skinfolder.png|Skin folder}}

===2. Add skin specific folders to the Skin folder===
To customize your Skin you have to add some [[System Folder|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 Template | Page Templates]] which cannot be skin specific.
{{Screenshot|Skinfolders.png|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. 

{{Screenshot|Skinspecificcarcontentview.png|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=
*[[The Skin System - for Portal builders]]
*[[How to create skinnable pages]]

=References=