DNN Skin module overview
DNN skin is a combination of the layout and the look and feel of a page. The term "skinning" refers to an application’s ability to change the look of the design by a setting in the application. This allows for the separation of the application logic from the user interface or object abstraction.
Skins can be created either as an .ascx file or an .html file. The designer who are not familiar with ASP.NET technology, might choose using .html to create the skin. Skin module development involve the creation and modification of the following components:
- Skin
- Container
- Style Sheet
- XML file
In DotNetNuke, skin is treated as a module. Just think like a human, skin module can be associated with the clothes. You can change your appearance by changing your clothes as many as you want. But you still remain the same person. In DNN, the content can be remain the same while the look and feel can be changed. Just go to admin module, install new skin module, then select which skin you want to select to change the DNN portal’s look and feel.
DNN Skin Package module consist of several mandatory files
| File Type |
Description | Status |
| skin.css | Style sheet file to define the look and feel of the skin | Required |
| skin.xml | XML file that identify the DNN token used in the skin packages | Required |
| *.html | HTML file that contains the DNN skin token | Required |
| *.ascx | User control file that contains the DNN skin token. This ascx file can be auto generated by DNN Portal, derived from *.html file | Optional |
| image folder | folder to store the images file used by the DNN | Required |
| css folder | folder to store extension of skin.css file | Required |
Table 1: DNN Skin Module file structure
DNN Skin module development requirement
The folder structure must consist of the element stated in table 1 above. In the skin layout, at least have to contain at least one content pane identified as ContentPane.
Common DNN Skin Token
| Token Name | Description |
| [BREADCRUMB] | Displays the path to the currently selected tab in the form of PageName1 > PageName2 > PageName3 |
| [COPYRIGHT] | Displays the copyright notice for the portal |
| [CURRENTDATE] | Displays the current date |
| [LANGUAGE] | Displays the language selector drop down list / flags |
| [LINKS] | Displays a flat menu of links related to the current tab level and parent node. |
| [LOGIN] | displays “Login” for anonymous users and “Logout” for authenticated users. |
| [LOGO] | Displays the portal logo |
| [NAV] | Displays the menu |
| [PRIVACY] | Displays a link to the Privacy Information for the portal |
| [SEARCH] | Displays the search input box |
| [SIGNIN] | Displays the signin control for providing your username and password. |
| [USER] | Displays a “Register” link for anonymous users or the users name for authenticated users. |
Table 2: DNN Skin Token
Skin.xml file
The skin.xml file contains formatting information for the tokens you added on your skin. It contains Name/Value pairs of the property and value of the token property to be customized. You need to edit this skin.xml file in order for DNN to display the skin exactly how it needs to be displayed. Otherwise, it will use the default CSS styles of DNN.
Step in DNN skin module Development
- Setup skin development environment
- Design the skin(s)
- Define/Select the content panes on the HTML
- Add the content panes identifier(s)
- Place the skin tokens on the skins
- Edit the skin.xml file
- Package the skin
