View source for Skin anatomy

[[Category:Features]]
[[Category:Skin system]]
[[Category:Portal builders]]
{{FeatureInfo
|editions=wcm,ecm,comm
|fromversion=6.0
|wikicomplete=100%
|interest=builder
}}
 
{{SNTOC}}

=Overview=
Sense/Net provides a skin system for customizing pages appearance. Builders may define new skins with custom styles, javascript functions, views and control templates that allow the looks of individual pages to be fully customized. With the override mechanism of our skin system you can redefine the global files easily in your skins using the same folder structure and filenames as the globals.

=Details=
The system provides a global tree structure for skin related files (''/Root/Global''). It contains every template, style and script files that are responsible for the client side output. If you want to override one of the global files you have to use the same folder structure and node name. Skins (''/Root/Skins/'''Skinname''''') contain the same structure as the global (except some system related files). You can override the global files in the skins by defining specific content (ie. a style css file) under the same name and in the same folder as it is defined in the ''/Root/Global'' folder.

The folder structure of a skin is the following:

* /Root
** '''/Global'''
*** /scripts - Thematic folders for different JS libraries
**** /Jquery
**** /JqueryUI
**** /SWFObject
**** /TinyMCE
**** /SWFUpload
**** /sn - SN specific javascripts
***** SN.Utils.js - Common utility functions
***** SN.PRC.js
**** ...etc...
**** init.js - Main initializer script for every page
**** ...etc...
*** /images - folder for global images
**** /icons
***** /16 - 16x16 icons and overlay images
***** /32 - 32x32 icons and overlay images
**** /widgets - widget related images with prefix 
***** prc-''XXXX'' - example: PRC related images with prefix: prc-
*** /styles - folder for global styles
**** /jqueryui - generic ui theme for the skin elements
**** /widgets - PRC, verbs, other floating elements over the end-user interface
***** /jqueryui - a different jquery theme for the widgets on the page (PRC, dialogs..etc)
***** prc.css - example: prc styles
**** sn-layout.css - styles for the default pagetemplates with the 10 predefined layouts
**** skin.css - Global styles for SN controls based on the SN CSS Framework classes
*** /pagetemplates - Common folder for the pagetemplates (10 default layout + internet/intranet demo site)
*** /renderers - Common folder for Xslt renderers
*** /contentviews - Common folder for contentviews by content types
**** /ContentType 1-''N''
*** /fieldcontroltemplates - Common folder for fieldcontrol templates
**** /FieldControlName 1-''N''
*** /plugins - Common folder for plugins, folders, modules... etc.
**** ''/PLUGINNAME'' - Plugin related stuff
***** /images
***** /styles
***** /scripts
** '''/Skins'''
*** ''/SKINNAME'' - base skin for custom designs / overwrite the global stuff with the same relativ path
**** /scripts
***** init.js - example: overwrite the global init.js with a skin specific version here
**** /images
**** /styles
***** /jqueryui - example: overwrite the global jquery theme with a skin specific version here
***** /widgets - example: overwrite the global widget theme with a skin specific version here
***** skin.css - example: overwrite the global skin styles with a custom version here
**** /media - Common folder for skin specific media files (swf, video..etc)
**** /renderers
**** /contentviews
**** /fieldcontroltemplates
**** /plugins

=Related links=
* [[The Skin System | Skin System overview]]
* [[The Skin System - for End users]]
* [[The Skin System - for Portal builders]]
* [[The Skin System - for Developers]]
* [[The Sense/Net CSS Framework]]

=References=