Customizing Vertical Navigation in Artisteer’s Skin

In order to customize individual navigation button in Artisteer’s DNN skin can be done by assigning class (or id) to each list item (i.e. <li> tag). After doing that, it’s matter of applying CSS to the particular class/id.

By default each list item does not have any class/id assigned. In order to add either id or class attributes (in this example a class attribute is used):

  1. Go to [applicable skin folder]/VMenu/ULtokens.txt
  2. Insert replace  <li> with <li class=”page-[=ID]“> (“page-[=ID]” will insert the applicable page id as a class name (note: I added a string “page-” in the front since a number is NOT a valid class name for css)
  3. Save the ULtokens.txt

That’s it. After that just apply css with the class associated with the list item.

More on how to customize ULtokens.txt read http://www.dotnetnuke.com/Resources/Wiki/Page/DDRMenu-token-templates.aspx