The sliding door skin object is used as part of the www.dotnetnuke.dk skin version 4. The module is used to display a single level menu of icons (images). The module can use the standard menu icons, or use an alternative image if an image prefix is defined. The menu is also able to show images for menus that do not have an icon defined, like the admin and host menu.
General information
This skin object is used to generate XHTML for a single menu level, which can be the root level menu or any sub level menu in your site. The generated mark up text contains style sheet class identifiers and tags that allow you to style the generated menu using standard style sheets. The menu is generated as an unordered list (UL) with each menu item as a list item (LI). This makes it easy to style the menu as either a horizontal or a vertical image menu.
The skin object is installed by uploading the sliding door skin object package in the module manager, as described in appendix A. The package is named SlidingDoorSO-4.x.zip where x is the minor version number.
Using the skin object
Using the module is very simple, you just add the tag [SLIDINGDOOR] to you html skin page definition in the place where the menu should be shown.
The Skin Object can be configured in the skin, by adding a skin.xml file in your skin definition. The parameters defined in the skin.xml will be added to the control definition when DotNetNuke creates a skin control from your skin html file. The available settings are defined in the Skin Object configuration section.
Menu definition
The skin object uses the pages defined in DotNetNuke and does not require any special page or menu definitions. In the default configuration, the module will display the root menu with links, using the page icon for each of the pages that the user has access to.
Image prefix
You are able to define an image prefix, which enables you to use an alternate set of images for this menu. For example if the page has an icon named “sample.gif” and the prefix is set to “menu”, the skin object will generate a page link with the image “menusample.gif”. Even if you use separate folders for your icons to organize your portal files like “icons/sample.gif”, then the page link will be generated as “icons/menusample.gif”.
Image types
If your page does not have an icon defined, the module will generate an image link using the name of the menu. To generate the image, the skin object will use the defined image type. The default type is “.gif”, but if you prefer PNG or JPEG images you can change this setting. This feature is handy, as the dynamic menus for the portal and host administration (“Admin” and “Host”) does not have any icons defined, but you are still able to create good looking root menus which include the admin and host menus. In the default setting the Admin menu will be created with an image name of “Admin.gif”.
Selecting the menu identifier
If the menu identifier has not been configured, the skin object will show the portals root menu. To select another level, you need to know the ID of the page which must be the root of the menu. The module will then use this page and generate a menu of all the subpages that this page has.
To find the ID of a page, simply navigate to the page in your portal, and look at the URL that is displayed in your browser. The URL will contain the tabid (the ID of the page) either as a part of the path (/tabid/16/) or as a parameter (&tabid=16). Pages were originally called Tabs in DotNetNuke, that’s why they are still referenced by the old key name. The page navigation will use path to store the page ID if you enabled friendly URLs in the portal settings.
XHTML Generation
The skin object creates markup texts that are fully compliant with the XHTML specification, even though it actually adds an extra tag to make it much easier to style.
The root tag for the generated text is the unordered list (UL) tags, which has a unique ID to identify it for styling and manipulation by java script functions. Remember that if you place more than one instance of the skin object or a page, you must use the configuration to set different IDs for each instance.
Inside the unordered list is a number of list items (LI). These have no other markup, but can be styled using the ID of the UL tag followed by the LI keyword.
Inside each line item is a link (A) which points to the submenu item. If the subpage or one of its subpages is active, the skin object will add a class definition “selected” to the link. This enables you to style the selected item different from the other menu items.
Inside each link is first an empty EM tag for styling, and then the image.
The image URL is build using the icon or page name, optionally extended with an image prefix. Each image has the page name defined as an alternate and title text to display a tooltip in normal browsers, and help in browsers that is not able to display the image.
When generating the text, the skin object will ensure that the text is properly escaped to comply with the XHTML standard.
Sample markup text
Here is a sample of generated text for a menu on the dotnetnuke.dk site in development:
<ul id="dk4modules">
<li>
<a class="selected" href="/Home/Modules/tabid/54/Default.aspx">
<em></em><img src="/Portals/0/menus/tabdnnmodule.gif" alt="Modules" title=”Modules”/>
</a>
</li>
<li>
<a href="/Home/Information/tabid/55/Default.aspx">
<em></em><img src="/Portals/0/menus/tabdnninfo.gif" alt="Information" title=”Information” />
</a>
</li>
<li>
<a href="/Home/Forum/tabid/56/Default.aspx">
<em></em><img src="/Portals/0/menus/tabdnnforum.gif" alt="Forum" title=”Forum” />
</a>
</li>
</ul>
Styling the menu
If you see this generated menu in a browser, it will be a simple dotted list of link to the pages.
This is actually a very nice way to downscale for less capable browsers, but together with a style sheet, the menu can be styled into a good looking menu.
In the sample image here, you can see that the list has been styled to be a vertical sliding door menu type.
The active page (or if one of its child pages are active) has been styled from the “selected” class to have the same background color as the content area. This way the menu visually helps the user to know in which major area of the dotnetnuke.dk site he is.
As the menu is styled from simple link tags, you can also easily style mouse over hover effects as well as different styling for links that the user has already visited.
Here are a sample styling of the skin object
#dk4modules { list-style:none; padding:0; margin:0; width:85px; padding-left: 1px; }
#dk4modules li { display:block; width:84px; margin-bottom:-2px; }
#dk4modules li a { text-decoration:none; }
#dk4modules li a em {
display:block; width:84px; height:9px; background:url(vertical.gif) left top; font-style:normal;
}
#dk4modules li a img {
display:block; width:68px; padding:0 9px 9px 7px; text-align:center; text-decoration:none;
background:url(vertical.gif) left bottom; color:#fff;
}
Skin object configuration
Set the ID of the UL tag
Setting name: HtmlULID
Default value: dk4modules
This is the ID that is set on the surrounding UL tag. The ID is used for styling the menu, and for finding the menu from java script if you want to manipulate the menu in the browser using client side scripting.
The ID must be unique, which implies that if you place multiple instances of the skin object on the same page, you must provide a unique ID to all the instances.
The ID of the parent page
Setting name: TabMenuID
Default value: 0 (root menu)
This is the ID of the page, which is used when generating the menu. Each subpage the page has will be used when generating the menu list. The default value of 0 identifies the root of the current portal.
If you browse to the page which is the root of your menu, you can see the page (tab) ID in the URL, either as part of the path ( /tabid/16 ) or as parameters ( tabid=16 ).
Prefix icon names to use separate images
Setting name: ImagePrefix
Default value:
The default value for the image prefix is blank (nothing), which configures the skin object to use the image that is defined as the page icon. But typically the icon images are small, like 16*16 or 20*20 pixel images, and for a sliding door image based menu you might want to use larger images. This can be done by specifying an image prefix. This prefix will be inserted into the icon image name, so if the original image is “home.gif” and the prefix is “menu”, the generated image name is “menuhome.gif”.
The image prefix will respect the path information in your icon images, and only rename the image name.
Note that the prefix is also used when creating image from page names, so if you use the default root menu, default image extension, and the image prefix is “menu”, then the Admin menu will have the image “menuAdmin.gif” in the menu link. So remember to create this and upload it to the portal file folder, and do create an image for the host menu as well.
Extension of images created from menu names
Setting name: ImageExtension
Default value: gif
When you have sub pages that does not have a defined icon, the module will build an image name using the name of the page, the image prefix and the image extension.
A menu with the name “Admin”, the image prefix “menu”, and the extension “png”, will create a link with the image “menuAdmin.png”. Note that you should not include the period in the name.
Use name as image names.
Setting name: UseNamesAsImageName
Default value: yes
By default the skin object will generate image names from the page name if no icon is defined for the page. But if you set this configuration to “no”, the skin object will simply skip all pages that do not have a defined icon.
Sample configuration
All the above defined settings are used in your skin.xml file in this way:
<Object>
<Token>[SLIDINGDOOR]</Token>
<Settings>
<Setting>
<Name>HtmlULID</Name>
<Value>dk4modules</Value>
</Setting>
<Setting>
<Name>TabMenuID</Name>
<Value>16</Value>
</Setting>
<Setting>
<Name>ImagePrefix</Name>
<Value>menu</Value>
</Setting>
<Setting>
<Name>ImageExtension</Name>
<Value>png</Value>
</Setting>
<Setting>
<Name>UseNamesAsImageName</Name>
<Value>no</Value>
</Setting>
</Settings>
</Object>
You can of cause declare the control directly, but using the html as source and define the parameters in the skin XML file, you ensure that your skin will install without errors in almost any DotNetNuke version.