By Lee Sykes
April 2010
In this tutorial we demonstrate how to use Skin Object Tokens in DotNetNuke v5 and above. Skin Object tokens are a new skinning method introduced in DotNetNuke 5 for adding tokens into a DotNetNuke skin.
A Skin Object Token is a web user control, it covers skin elements such as the logo, menu, search, login links, date, copyright, languages, links, banners, privacy, terms of use etc.
This new Object token method has been introduced into DotNetNuke with the idea of making it simpler to add a skin object into a DotNetNuke skin. The other skinning methods of HTML / XML file tokens and ASCX file tokens still work, this method is just a new alternative method.
The skinning method we demonstrate in this tutorial is the new Object Token method. This method uses a HTML file, but it no longer requires the use of an XML file. Using the Object token method you can provide all of the settings for each skin object directly within the HTML file. The idea behind this method is that for beginners to DotNetNuke skinning they can easily see at a glance what each of the Skin Object settings are without confusing the user with XML files or ASCX files.
When this Object Token HTML file is installed, DotNetNuke also converts this file into an ASCX file, so the end result is exactly the same no matter which skinning method you use. From these 3 skinning methods you can choose which method you find the easiest to use.
The method that we personally prefer is the ASCX file skinning method. This is because it is much quicker and efficient for creating skins, if you would like to learn more about the ASCX method we have covered how to create a skin using the ASCX method in this tutorial here:
DotNetNuke ASCX Skinning for Professional Skinners.
In this tutorial we begin with a barebones skin and add Skin Object Tokens into the skin. We do not demonstrate how to change the layout of the skin etc, we have covered those details in other tutorials on DNN Creative, the focus here is to show you how to use the new object token method.
If you are new to DotNetNuke skinning we would recommend you view
Issues 5 & 6 of DNN Creative which provide you with an introduction to skinning and walk you through the concepts of skinning in DotNetNuke.
The videos contain:
Video 1 - Introduction to HTML Object Token Skinning
- Introduction to Skin Object Tokens in DotNetNuke 5
- Quick overview of the current skinning methods
- HTML and XML token method
- ASCX token skinning method
- HTML Object token method overview
- How to copy the Minimal Extropy skin as a starting point
- How to open the skin files using Visual Web Developer Express
Time Length: 8min 32secs
Video 2 - Basic Styling of a Skin and Creating Multiple Content Panes
- Index.html skin file
- DOCTYPE, html, head and body tags
- How to setup some basic styling for the skin
- How to create a ContentPane using Object tokens
- Explanation of object token, codetype, codebase and parameters
- How to assign a class to the ContentPane using a parameter
- How to create a second content pane, named BottomPane using Object tokens
- How to create multiple content panes in a skin
Time Length: 7min 54secs
Video 3 - Styling, Control Panel, Login and Register Skin Object Tokens
- Admin Control panel object token code and explanation
- How to style the content area using the skin.css file
- Login and Register Links object tokens code and explanation
- Parameters
- Index.doctype.xml file explanation
Time Length: 7min 37secs
Video 4 - Packaging, Installing, Testing and Viewing the ASCX Version of the Skin
- How to package and install the skin
- How to install the skin using the standard method
- How to install the skin using the auto install method
- How to create a new page and assign the new skin to the page
- Viewing the skin on the page
- Viewing the source code and skin objects of the ASCX skin file created by DotNetNuke
Time Length: 9min 17secs
Video 5 - Viewing the Attributes for Skin Object Tokens, Logo Token, Search Token
- Skin Object Token PDF document
- Viewing the code and attributes available for skin objects
- Logo object token code and explanation
- Search object token code and explanation
- Search parameters
- How to assign an image for the search submit button
Time Length: 7min 42secs
Video 6 - Breadcrumb Token, Text Token and Localization, Links Token
- Breadcrumb object token code and explanation
- "You are Here" text
- Text object token code and explanation
- How the Text Token can be used for localized text
- Using ResourceKey and the language resource file
- How to edit the Index.ascx.resx file
- An explanation of the language resource XML file
- Links object token code and explanation
Time Length: 6min 56secs
Video 7 - More Skin Tokens and Token Replacement
- Privacy and Terms object token code and explanation
- Copyright object token code and explanation
- Banner object token code and explanation
- Help object token code and explanation
- Host Name object token code and explanation
- Signin object token code and explanation
- Text Token using Token Replacement
- Token Replacement options available
- Text Token parameters
- Nav Menu token code and explanation
Time Length: 8min 53secs
Video 8 - Demonstration of the Object Tokens and Bug Fixing
- How to re-package and install the skin
- Viewing the skin on the live website
- Demonstration of each skin object
- How to fix the token replacement bug
Time Length: 7min 36secs
Total Time Length: 64min 27secs
Comments
Resources Mentioned in this Tutorial