Click here to Skip to main content
13,861,926 members
Click here to Skip to main content
Add your own
alternative version


56 bookmarked
Posted 11 Jul 2005

Creating tabbed navigation for DotNetNuke 3.0

, 11 Jul 2005
Rate this:
Please Sign up or sign in to vote.
This article is a step by step guide on how to create tabbed navigation for DotNetNuke 3.0.



The following tutorial describes the process of creating tabbed navigation in DotNetNuke 3.0. Creating a tabbed look isn't difficult, but there is a slight learning curve if you are new to DotNetNuke skinning.


It is assumed you have a working installation of DotNetNuke 3.0 and Visual Studio 2003 installed and some understanding of HTML and ASP.NET.


There are a few ways to create a skin project for DotNetNuke, but for this tutorial I will be demonstrating the creation of a separate distribution skin project. There are also two flavors of skin creation: ASCX and HTML. For this tutorial I will be demonstrating the HTML approach.

Creating the skin project

The first step is to create our skin project in Visual Studio 2003. Begin by opening up Visual Studio and creating a new "Empty Project". I have named my project "TabSkin". Following DNN's recommended folder structure, I have set up my project as follows:

Creating the skin template

Next, we need to create the HTML file that will serve as our skin. To make it easy I copied C:\Projects\DotNetNuke\Portals\_default\Skins\DNN-Blue\Horizontal Menu - Full Width.htm to my local skins folder and renamed it TabSkin.htm since it already has a good basic structure to start from.

After opening TabSkin.htm, you should see something similar to the following in design mode:

Looking at the above layout, you will notice that there are 12 elements contained within the brackets. Each of these bracketed values is known as skin objects. When installed, DotNetNuke converts the HTML skins into ASCX user control skins by replacing each of the skin objects with ASP.NET controls. Our HTML skin is really just a template for creating the final ASCX file. If we examine the HTML source for the [MENU] section, we will see the following:


<TABLE class="skingradient" cellSpacing="0" 

       cellPadding="3" width="100%" border="0">
    <TD width="100%" vAlign="middle" align="left" nowrap>
    <TD class="skingradient" 

        vAlign="middle" align="right" nowrap>[SEARCH]


The [MENU] skin object is what we will be modifying to produce our tabs. In order to accomplish this, we need to tell the [MENU] skin object how we want it to behave. We do this by specifying attributes for each of the skin objects we wish to modify. These attributes ultimately become attributes of the user control created from the skin object. Because embedding the attributes directly within the HTML would become messy and cumbersome to work with for a visual designer, DotNetNuke facilitates the ability to specify these attributes through an accompanying Skin.xml file.

Creating the attributes file

To specify our attributes, create a new file named "Skin.xml" with the following contents:

                <Value><![CDATA[<img valign="top" 

The attributes specified within the above listing are as follows:

UseArrowsuse arrows to indicate child submenus.
UseSkinPathArrowImagesUse arrow images located in the skin rather than those in the /images folder.
RootBreadCrumbArrowimage used for root level menu breadcrumb arrows.
RightSeparatorThe separator used just after a root level menu item. A use for this might be a right edge of a tab image for example.
RootMenuItemCssClassCSS Class used for root menu items.
RootMenuItemActiveCssClassCSS Class used for root menu items when they are the active tab.
MenuBreakCssClassMenu break CSS Class.
MenuRootArrowCssClassMenu root arrow CSS Class.

<A name=Aboutthe[MENU]SkinObject6>About the [MENU] skin object

While not essential to our tutorial, it may be helpful to understand what output DotNetNuke actually creates when producing the menu. The menu is enclosed within an HTML <TABLE> element containing a single row with multiple cells. There are two cells for each menu item: one for the actual menu item and one for the menu item separator.

The menu item cell encloses the menu within an additional nested HTML <TABLE> element. This table contains a single row with two cells. The first cell is for the main menu item elements. This cell contains four possible elements: the root menu item's optional left HTML, the root breadcrumb arrow (if the tab is currently active), the menu title, and the root menu item's optional right HTML. The second cell contains the root menu arrow image which is present if submenus are available.

The following illustrates the layout for a menu containing one menu item:

Cell 1Cell 2
Cell 1
Cell 2

Note: The root menu item's left and right HTML could be used to produce a tab look as well by specifying a left and right image around the title, however for the tab style I am demonstrating it is cleaner to just utilize the menu separator cell. After following this tutorial, you should be adequately equipped to develop more advanced tab images.

Creating the style sheet

Our next step is to provide a style sheet containing the CSS Class selectors designated within our Skin.xml file. This can be specified globally for the skin package by providing a file named "skin.css". Create this file within your skin folder. Referring back to our attributes there are three class selectors we need to provide.

The first class selector we need to create is RootMenuItems. This is referenced by both the RootMenuItemCssClass and RootMenuItemActiveCssClass attributes and is intended to affect the main root menu item cells (refer to Cell 1 of the first gray inner table above). For this tutorial, I have chosen to use the same style for both active and inactive tabs for simplicity. To begin our tab look, we need the top, bottom, and left borders to be visible and the right border left open. This side of the cell will be closed visually with a GIF image. To match the size and color of our image, we also need to make the border color a dark grey, the background color white, and the height 21 pixels. This is accomplished with the following class selector:

    border-left: 1px solid #666666;
    border-bottom: 1px solid #666666; 
    border-top: 1px solid #666666;
    border-right: 0px solid #666666;
    height: 21;
    background-color: White;

The next class selector we need to create is MenuBreak. The purpose of this selector is to affect the table containing the root menu item separator which in our case is the cell containing our closing tab image. For our purposes we need to ensure there are no visible borders for this table. This is accomplished with the following class selector:

    border: none;

The final class selector we need to create is RootArrow. The purpose of this selector is to affect the cell containing the arrow indicator image which appears when the root menu item has submenus available. Since this cell appears between the menu item and the menu separator, this needs to have a top and bottom border but no left or right borders. We also need to ensure that it is of the same height and background color as the other elements. This is accomplished with the following class selector:

    border-top: solid 1px #666666;
    border-bottom: solid 1px #666666;
    border-left: none;
    border-right: none;
    height: 21px;
    background-color: White;

Creating the images

The next step will be to create our custom root arrow, root breadcrumb, and right tab images. You can use the images provided in the source download, or create your own and adjust the skin.css styles accordingly. Place these images within your skin folder. You also need to provide a 1x1 pixel transparent GIF image named spacer.gif within your package. You can copy this over from the DotNetNuke images directory. While your skin templates may not directly reference spacer.gif, DotNetNuke uses this image in its final rendering of the menu and may not display correctly in all browsers without it (e.g. Firefox).

Packaging your skins

The next step is to package up our skins into a zip file. You can do this with any zip utility compatible with the PKZip format. The name of the zip file should be the name of your skin (i.e. ""). The documentation that comes with DNN 3.0 for packaging skins seems out of date or incorrect as it suggests that you can just zip up your skins folder. My experience is that the zip file should only contain the contents of the skins folder and not the skins folder itself (which is what you receive following the DNN documentation). If the skins folder itself is contained within the zip file, DNN 3.0 doesn't correctly apply your skin.css. While I have not covered the creation of container skins in this tutorial, there is another format you may use for creating a bundled package containing both portal and container skins. For this format, create your portal skin zip file as before except this time name it Do the same for the container folder naming it Next, zip both of these zip files into a zip with the name of your skin package (i.e. For this step I had to use a different utility, as the built in Windows compressing utility doesn't seem to allow bundling zip files within another zip file due to naming conflicts. When uploaded through DNN this will create a TabSkin folder both under the Containers and Skins folders.


The next step is to upload your skin package. Log into your DNN site as the user host and proceed to the Skins page under the Host menu item. Select the upload Skin link. Next, browse to the location of your packaged zip file and click "Add". Next, click "Upload New File". Clicking the Upload link before clicking the Add will not upload the file. The next screen you should see is a diagnostics screen displaying the results of the upload.

Selecting your skin

Now that you have created and installed your skin, you can proceed to the Site link under "Common Tasks" and select your TabSkin under the Portal Skin and Admin Skin dropdowns. Click the "Update" link and your skin will be installed. Viola, you now have tabs!


OK, perhaps your tabs aren't turning out like I said they would. If your tabs look like the above image it's likely due to a bug in DotNetNuke 3.0. This particular image was taken from a DotNetNuke 3.0.13 installation. The problem is that the JavaScript which governs the creation of the tabs does not correctly apply the RootMenuItemCssClass class selector to the cell containing the menu item elements. Rather than setting the class of the enclosing <TD> element, the JavaScript sets the class of the containing <TR> element which doesn't allow you to affect the borders of the cell. I have included a patched version of the spmenu.js file which corrects the problem. Make a backup of your DotNetNuke\controls\SolpartMenu\spmenu.js file and replace the original with the corrected spmenu.js file. If you aren't using version 3.0.13 of DNN then I can't say what the behavior will be, so you might want to do a diff between my version and the original. I've reported this as a bug to DNN, so perhaps this may be corrected in a future version. After replacing this file, you should see the proper tab images as seen below:


Creating skins and even tabbed menus is pretty easy through DotNetNuke. My thanks to the DNN developers for such a cool product!


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Derek Greer
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

Questionimage load problem Pin
Packet8i11-Oct-07 0:15
memberPacket8i11-Oct-07 0:15 
Generaltab menu problem Pin
vickypips24-Sep-07 9:29
membervickypips24-Sep-07 9:29 
Generalhorizontal align pb [modified] Pin
Nizar Abdeljaoued27-May-07 23:49
memberNizar Abdeljaoued27-May-07 23:49 
Generalsub menu Pin
lionelluo21-May-06 23:39
memberlionelluo21-May-06 23:39 
Generalmenu like macromedia site Pin
aj_shubhi8-Nov-05 16:26
memberaj_shubhi8-Nov-05 16:26 
mennolaan7-Nov-05 4:08
membermennolaan7-Nov-05 4:08 
Derek Greer9-Nov-05 4:55
memberDerek Greer9-Nov-05 4:55 
Generalchild tab row Pin
weinstein_josh29-Jul-05 6:04
memberweinstein_josh29-Jul-05 6:04 
GeneralRe: child tab row Pin
Derek Greer9-Nov-05 4:37
memberDerek Greer9-Nov-05 4:37 
GeneralThanks! Pin
Spiff Dog20-Jul-05 7:34
memberSpiff Dog20-Jul-05 7:34 
GeneralThanks a bunch Pin
slickhanoi19-Jul-05 10:09
memberslickhanoi19-Jul-05 10:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190214.1 | Last Updated 11 Jul 2005
Article Copyright 2005 by Derek Greer
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid