By Lee Sykes
July 2009
In this tutorial we demonstrate the ASCX method of DotNetNuke skinning. This is the method that the professional DotNetNuke skinners use as it is much quicker to build skins in this way.
Creating skins using the ASCX method has several benefits; the main one is that it is much faster to create a DotNetNuke skin using the ASCX method rather than the HTML/XML method. You can make changes live on the website without re-parsing or re-installing the skin, you can instantly see edits and changes you make to your skin code, you can view at a glance all of a skin tokens properties, and a really useful feature is that if you are using
Visual Web Developer Express it will suggest the attributes that are available for each of the DotNetNuke tokens.
If you are new to skinning we suggest you first of all begin skinning using the html method as it will be quicker to learn and you can get used to the concepts involved with DotNetNuke skinning. If you are new to skinning, we suggest you begin by looking at the skinning tutorials in
issues 5 + 6 as these explain the initial concepts of DotNetNuke skinning.
If you already understand the concepts of DotNetNuke skinning and you have created one or two skins then we would encourage you to ‘have a go’ at skinning using the ASCX method as you will find this a much quicker and efficient way of creating DotNetNuke skins.
In this tutorial we explain the concepts of DotNetNuke ASCX skinning, how to setup Visual Web Developer Express to enable the skin token attribute suggestions, how to use ASCX skin tokens, how to make quick edits to tokens and instantly see them on your DotNetNuke website, how to display two tokens of the same type - for instance two menus, how to use skinpath for images, how to view the attributes that are available for a skin token, how to speed edit CSS code, how to quickly create additional skins using the ASCX method and instantly view them within your DotNetNuke installation, and finally how to work with ASCX Containers.
After viewing this tutorial you should have a good grasp on DotNetNuke ASCX skinning and you should be able to create DotNetNuke skins much more quickly and efficiently.
The videos cover:
Video 1 - Introduction, Pros and Cons of ASCX Skinning
- Introduction
- An overview of the HTML and XML skinning method
- An overview of the ASCX skin file
- The Pros and Cons of HTML / XML file skinning
- The Pros and Cons of ASCX file skinning
- How to begin ASCX file skinning as a beginner
- How to install the SEO Layouts HTML skin
Time Length: 9min 54secs
Video 2 - Introduction to ASCX Skin Code and Setup in VWD Express
- Viewing the location of the installed Skin files
- Using Visual Web Developer Express for token attribute suggestions
- How to open the DotNetNuke installation as a web site in VWD Express
- How to view all of the folders and files in the Solution Explorer
- How to navigate to the Skins folder and open the ASCX skin file
- An overview of the code in an ASCX skin
- The Register directives
- The ASCX skin tokens
- How to use VWD Express to auto suggest the attributes available for a DotNetNuke skin token
Time Length: 7min 27secs
Video 3 - How to Edit The ASCX Tokens, Configuring the Search Token
- Explanation of the ASCX tokens and Register directive
- dnn: prefix
- TagName
- Register Src
- runat=”server” and token id
- How to edit the Search token in an ASCX skin
- How to view the attributes available for the Search token
- How to remove the Site and Web radio buttons for the Search token
- How to change the menu from SolPartMenu to NavMenu
- How to identify the Source for a token
Time Length: 8min 33secs
Video 4 - How to Display 2 Nav Menus, How to Use SKINPATH for Images
- How to add two skin tokens of the same type
- How to add two Nav Menus to a skin
- How to create the Register directive
- How to add the second menu token to the skin
- How to view the attributes available for the Nav menu
- How to set the second Nav menu to Vertical
- How to place images in a skin using SKINPATH
- How to replace the LOGO token with an image and link to prevent duplicate content issues
Time Length: 11min 42secs
Video 5 - Skin CSS Code Speed Editing in ASCX skins
- CSS code speed editing
- How to remove the borders around the logo using CSS
- How to quickly create additional skins using the ASCX method
- How to quickly create a 1 pane skin
- How to remove the Left and Right panes
- How to set the width of the main Content pane
- How to apply the new skin to a page immediately
- Using the Web Developers Toolbar for viewing the CSS files
Time Length: 11min 14secs
Video 6 - Containers ASCX skinning
- Containers ASCX skinning
- Downloading the Andreas 01 skin
- How to upload the DNNC html containers
- How to find the containers folder and view them in VWD Express
- Explanation of a Container ASCX file
- Control Language and Register directives
- Explanation of the container tokens
- Action tokens
- Packaging your ASCX skin files
Time Length: 9min 32secs
Total Time Length: 58min 22secs