DotNetNuke Skinning Reference by ThinkofDesign.com

Skin Objects

Container Objects

[CONTENTPANE]
<div runat="server" id="ContentPane"></div>
Injects a placeholder for module content
- id : ContentPaneThe content pane key identifier to be displayed in the user interface and stored in the database.

[COPYRIGHT]
<dnn:Copyright runat="server" id="dnnCopyright" />
Displays the copyright notice for the portal
- CssClass : SelectedTabThe style name of portal copyright link.

[CURRENTDATE]
<dnn:CurrentDate runat="server" id="dnnCurrentDate" />
Displays the current date
- CssClass : SelectedTabThe style name of date text.
- DateFormat : MMMM dd, yyyyThe format of the date text.

[DOTNETNUKE]
<dnn:DotNetNuke runat="server" id="dnnDotnetNuke" />
Displays the Copyright notice for DotNetNuke (not required)
- CssClass : NormalThe style name of DotNetNuke portal engine copyright text.

[HELP]
<dnn:Help runat="server" id="dnnHelp" />
Displays a link for Help which will launch the users email client and send mail to the portal Administrator
- CssClass : OtherTabsThe style name of help link.

[HOSTNAME]
<dnn:HostName runat="server" id="dnnHostName" />
Displays the Host Title linked to the Host URL
- CssClass : OtherTabsThe style name of host link.

[LANGUAGE]
<dnn:Language runat="server" id="dnnLanguage" />
Displays the language selector drop down list
- CssClass : no default valueThe style name of the drop down list.

[LINKS]
<dnn:Links runat="server" id="dnnLinks" />
Displays a flat menu of links related to the current tab level and parent node. This is useful for search engine spiders and robots
- CssClass : CommandButtonThe style name of the links.
- Separator :   The separator between links. This can include custom skin images, text, and HTML. ( i.e. <![CDATA[ <img src="file.gif"> ]]> ).
- Alignment : HorizontalThe links menu alignment. Possible values: Horizontal, Vertical.
- Level : SameDetermines the menu level to display. Possible values: Same, Child, Parent, Root).

[LOGIN]
<dnn:Login runat="server" id="dnnLogin">
Dual state control - displays "Login" for anonymous users and "Logout" for authenticated users
- Text : LoginThe text of the login link.
- CssClass : OtherTabsThe style of the login link.
- LogoffText : LogoffThe text for the logoff link.

[LOGO]
<dnn:Logo runat="server" id="dnnLogo" />
Displays the portal logo
- BorderWidth : 0The border width around the logo.

[PRIVACY]
<dnn:Privacy runat="server" id="dnnPrivacy" />
Displays a link to the Privacy Information for the portal
- Text : Privacy StatementThe text of the privacy link.
- CssClass : OtherTabsThe style name of privacy link.

[SEARCH]
<dnn:Search runat="server" id="dnnSearch" />
Displays the search input box
- Submit : SubmitHTML to activate the search lookup i.e "Search" or "Go" or <img src="mybutton.gif">.
- CssClass : no default valueThe style name of the search control.

[SOLPARTMENU]
<dnn:SolPartMenu runat="server" id="dnnSolPartMenu" />
Displays the hierarchical navigation menu (formerly [MENU])
- - Settings
  - Colors
  - Dimensions
  - Effects
  - Fonts
  - CSS
  - Arrows
  - HTML
  - Separators
- - separatecss : trueUse CSS defined in a style sheet. Possible values: true, false.
  - moveable : falseFlag to determine if menu can be moved. Possible values: true, false.
  - display : horizontalDetermines how the menu is displayed. Possible values: horizontal, vertical.
  - menualignment : LeftAlignment of the menu within the menu bar. Possible values: Left, Center, Right, Justify.
  - forcedownlevel : falseFlag to force the downlevel menu to display. Possible values: true, false.
  - forcefullmenulist : falseDisplays the full menu as an indented list of normal hyperlinks, like a sitemap. Possible values: true, false.
  - level : RootRoot level of the menu in relationship to the current active tab. Possible values: Root, Same, Child.
  - rootonly : falseindicator to turn off submenus. Possible values: true, false.
  - tooltip : no default valueTooltips added to the menu items. These come from the tab object properties which are filled from the tabs table. Possible values: Name, Title, Description.
  - mouseouthidedelay : 1Number of milliseconds to wait until menu is hidden on mouse out. 0 = disable.
  - cleardefaults : falseIf true, this setting will clear/empty the default color settings of the menu so that they can be left empty and not just overridden with another value.
  - delaysubmenuload : falseIf true this setting delays the loading of the menu until the rest of the page has rendered. This avoids the IE error "Operation Aborted". Possible values: true, false.
- - backcolor : #333333Background color.
  - forecolor : whiteFore color of menu item when selected.
  - highlightcolor : whiteColor of top and left border to give a highlight effect.
  - iconbackgroundcolor : #333333Background color in area where icon is displayed.
  - selectedbordercolor : no default valueColor of border surrounding selected menu item.
  - selectedcolor : #CCCCCCBackground color of menu item when selected.
  - selectedforecolor : whiteFore color of menu item when selected.
- - menubarheight : 16Menu bar height in pixels.
  - menuborderwidth : 1Menu border width in pixels.
  - menuitemheight : 21Menu item height in pixels.
  - iconwidth : 0Width of icon column in pixels.
- - menueffectsshadowdirection : Lower RightDetermines which direction the shadow will fall. Possible values: None, Top, Upper Right, Right, Lower Right, Bottom, Lower Left, Left, Upper Left.
  - menueffectsshadowstrength : 3Determines how many pixels the shadow extends.
  - menueffectsshadowcolor : dimgrayColor of the shadow.
  - menueffectsmenutransition : NoneDetermines which direction the shadow will fall. Possible values: None, AlphaFade, AlphaFadeBottomRight, Barn, Blinds, Checkerboard, ConstantWave, Fade, GradientWipe, Inset, Iris, RadialWipe, Random, RandomBars, Slide, Spiral, Stretch, Strips, Wave, Wheel, Zigzag.
  - menueffectsmenutransitionlength : 0.3Number of seconds the transition will take.
  - menueffectsmouseouthidedelay : 500Number of milliseconds to wait until menu is hidden on mouse out. 0 = disable.
  - menueffectsmouseoverdisplay : HighlightAdjusts effect when mouse moves over menu bar item. Possible values: Outset, Highlight, None.
  - menueffectsmouseoverexpand : trueMakes menu expand on mouse over. Possible values: true, false.
  - menueffectsstyle : filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3);IE only property for SubMenu styles and transitions.
- - fontnames : ArialMenu font name.
  - fontsize : 12Menu font size.
  - fontbold : falseMenu font weight. Possible values: true, false.
- - menucontainercssclass : MainMenu_MenuContainerMenu Container CSS Class.
  - menubarcssclass : MainMenu_MenuBarMenu Bar CSS Class.
  - menuitemcssclass : MainMenu_MenuItemMenu Item CSS Class.
  - menuiconcssclass : MainMenu_MenuIconMenu Icon CSS Class.
  - menuitemselcssclass : MainMenu_MenuItemSelMenu Item CSS Class for mouse-over.
  - menubreakcssclass : MainMenu_MenuBreakMenu Break CSS Class.
  - submenucssclass : MainMenu_SubMenuSubMenu CSS Class.
  - rootmenuitembreadcrumbcssclass : no default valueCSS Class used for root menu items when they are found in the breadcrumb array list.
  - submenuitembreadcrumbcssclass : no default valueCSS Class used for sub menu items when they are found in the breadcrumb array list.
  - rootmenuitemcssclass : no default valueCSS Class used for root menu items.
  - rootmenuitemactivecssclass : no default valueCSS Class used for root menu items when they are the active tab.
  - submenuitemactivecssclass : no default valueCSS Class used for sub menu items when they are the active tab.
  - rootmenuitemselectedcssclass : no default valueCSS Class used for root menu items when they moused-over.
  - submenuitemselectedcssclass : no default valueCSS Class used for sub menu items when they moused-over.
- - usearrows : trueUse arrows to indicate child submenus. Possible values: true, false.
  - downarrow : menu_down.gifarrow image used for downward facing arrows indicating child submenus.
  - rightarrow : breadcrumb.gifarrow image used for right facing arrows indicating child submenus.
  - menuarrowcssclass : MainMenu_MenuArrowMenu Arrow CSS Class.
  - menurootarrowcssclass : MainMenu_MenuRootArrowMenu Root Arrow CSS Class.
  - useskinpatharrowimages : falseUse arrow images located in the skin and not those in the root images folder. Possible values: true, false.
  - userootbreadcrumbarrow : trueUse a breadcrumb arrow to identify the root tab that is listed in the breadcrumb array list. Possible values: true, false.
  - usesubmenubreadcrumbarrow : falseUse a breadcrumb arrow to identify the submenu tabs that are listed in the breadcrumb array list. Possible values: true, false.
  - rootbreadcrumbarrow : no default valueImage used for root level menu breadcrumb arrows i.e file.gif.
  - submenubreadcrumbarrow : no default valueImage used for submenu menu breadcrumb arrows i.e file.gif.
- - rootmenuitemlefthtml : no default valueHTML text added to the beginning of the Root menu items.
  - rootmenuitemrighthtml : no default valueHTML text added to the end of the Root menu items.
  - submenuitemlefthtml : no default valueHTML text added to the beginning of the sub menu items.
  - submenuitemrighthtml : no default valueHTML text added to the end of the sub menu items.
- - separator : no default valueThe separator between Root level menu items. This can include custom skin images, text, and HTML i.e <![CDATA[ <imgsrc="file.gif"> ]]>.
  - separatorcssclass : no default valueCSS class used for the root level menu item separator.
  - leftseparator : no default valueThe separator used just before a root level menu item. A use for this might be a left edge of a tab image for example.
  - leftseparatorcssclass : no default valueCSS class used for leftseparator.
  - rightseparator : no default valueThe separator used just after a root level menu item. A use for this might be a right edge of a tab image for example.
  - rightseparatorcssclass : no default valueCSS class used for rightseparator.
  - leftseparatoractive : no default valueThe separator used just before an active root level menu item.
  - leftseparatoractivecssclass : no default valueCSS class used for leftseparatoractive.
  - rightseparatoractive : no default valueThe separator used just before an active root level menu item.
  - rightseparatoractivecssclass : no default valueCSS class used for rightseparatoractive.
  - leftseparatorbreadcrumb : no default valueThe separator used just before a root level menu item found in the breadcrumb array list.
  - leftseparatorbreadcrumbcssclass : no default valueCSS class used for leftseparatorbreadcrumb.
  - rightseparatorbreadcrumb : no default valueThe separator used just before a root level menu item found in the breadcrumb array list.
  - rightseparatorbreadcrumbcssclass : no default valueCSS class used for rightseparatorbreadcrumb.

[TERMS]
<dnn:Terms runat="server" id="dnnTerms" />
Displays a link to the Terms Conditions for the portal
- Text : Terms of UseThe text of the terms link.
- CssClass : OtherTabsThe style name of terms link.

[TREEVIEWMENU]
<dnn:TreeViewMenu runat="server" id="dnnTreeViewMenu" />
Display a navigation Menu using the DNN Treeview Control to provide a Windows Explore like Menu
- BodyCssClass : no default valueCss class for the body of the treeview menu.
- CssClass : no default valueCss class for the treeview control.
- HeaderCssClass : no default valueCss class for the header.
- HeaderTextCssClass : HeadCss class for the header text.
- HeaderText : no default valueText for the header of the tree menu.
- IncludeHeader : TrueTurn on/off header. Possible values: true, false.
- Level : no default valueIndicates the root level of the tree menu, blank = root. Possible values: parent, child, same.
- NodeChildCssClass : NormalCss class for a child node.
- NodeClosedImage : folderclosed.gifImage for a closed (not in current breadcrumbs but has children) node.
- NodeCollapseImage : min.gifImage to shown that will activate a collapse of the menu node.
- NodeCssClass : NormalCss class for the nodes.
- NodeExpandImage : max.gifImage to shown that will activate an expansion of the menu node.
- NodeLeafImage : file.gifImage used for a "leaf" node (no children).
- NodeOpenImage : folderopen.gifImage for an opened (in current breadcrumbs and has children) node.
- NodeOverCssClass : NormalCss class for a node on mouseover.
- NodeSelectedCssClass : NormalCss class for the selected node.
- NoWrap : falseReplaces spaces in the text of the node with non breaking spaces.
- ResourceKey : no default valueResource Key to localize the Title text. If blank Text property will be used.
- RootOnly : falseShow only the root menu (no children).
- TreeCssClass : no default valueCss class for the tree.
- TreeGoUpImage : folderup.gifImage to go up a level on the tree.
- TreeIndentWidth : 10Addition width to indent each tree level.
- Width : 100%With of tree control.

[USER]
<dnn:User runat="server" id="dnnUser" />
Dual state control - displays a "Register" link for anonymous users or the users name for authenticated users
- Text : RegisterThe text of the register/user link.
- CssClass : OtherTabsThe style name of register/user link.

[ACTIONBUTTON]
<dnn:ActionButton runat="server" id="dnnActionButton" />
Generic Button control used for various actions involving a module
- CommandName : no default valuemaps to ModuleActionType in DotNetNuke.Entities.Modules. Actions: AddContent, EditContent, ContentOptions, SyndicateModule, ImportModule, ExportModule, OnlineHelp, ModuleHelp, HelpText, PrintModule, ModuleSettings, DeleteModule, ClearCache, MoveTop, MoveUp, MoveDown, MoveBottom, MovePane, MoveRoot.
- CssClass : CommandButtonCssclass for the button.
- DisplayLink : TrueDisplay the localized text for the command. Possible values: True, False.
- DisplayIcon : FalseDisplay the icon for the command. Possible values: True, False.
- IconFile : no default valueFile to use for command icon if not using the built in command icon i.e. myicon.gif.

[CONTENTPANE]
<div runat="server" id="ContentPane"></div>
Injects a placeholder for module content
- id : ContentPaneThe content pane key identifier to be displayed in the user interface and stored in the database.

[DROPDOWNACTIONS]
<dnn:DropDownActions runat="server" id="dnnDropDownActions" />
Simple dropdown combobox for module actions
- no attributes available.

[ICON]
<dnn:Icon runat="server" id="dnnIcon" />
Displays the icon related to the module
- BorderWidth : 0The border width around the icon.

[LINKACTIONS]
<dnn:LinkActions runat="server" id="dnnLinkActions" />
Links list of module actions
- no attributes available.

[PRINTMODULE]
<dnn:PrintModule runat="server" id="dnnPrintModule" />
Displays a new window with only the module content displayed. Depreciated - use [ACTIONBUTTON] instead
- PrintIcon : print.gifThe custom print icon file located in the skin file.

[SOLPARTACTIONS]
<dnn:SolPartActions runat="server" id="dnnSolPartActions" />
Popup module actions menu (formerly [ACTIONS])
- no attributes available.

[TITLE]
<dnn:Title runat="server" id="dnnTitle" />
Displays the title of the module
- CssClass : HeadThe style name of title.

[VISIBILITY]
<dnn:Visibility runat="server" id="dnnVisibility" />
Displays an icon representing the minimized or maximized state of a module.
- BorderWidth : 0The border width around the icon.
- MinIcon : min.gifThe custom min icon file located in the skin file.
- MaxIcon : max.gifThe custom max icon file located in the skin file.

[Token]
Control
Description
- Attribute : Default ValueDescription
Welcome fellow! This is an interactive DotNetNuke skinning reference. You can select one or more objects from the left column to see their description and more importantly the attributes you can use to customize the objects upon your skinning needs.

The above is an example so you can understand how the object information has been formatted. As you can see, the light gray area includes the skin object as you can use it in your HTML skins (token - blue) or ASCX skins (control - red). In the dark gray area you can read the description of the object. Click the cross on the left to expand the light blue area with the attributes. The black bold text in that area is the attribute name as you can use it in your skins. With green you can see the default value and the gray text below is the description of that attribute.

I hope you find this resource helpful. You can always visit the forums at the main site to post your comments, questions or suggestions. I'll be really glad to hear from you.