Customize CISS Sidemenu templates and CSS

Prefer template arguments for supported behavior and a site stylesheet for visual overrides. Keep modified copies in the skin when you need to own the template files.

Configure template arguments

For VMenuPro, a DNN skin can select the style and pass arguments such as the theme, arrow style, glass mode, entrance animation, stagger and border mode.

<dnn:MENU runat="server"
  MenuStyle="Menus/VMenuPro"
  NodeSelector="*,0,5">
  <TemplateArguments>
    <dnn:TemplateArgument name="Theme" value="ocean" />
    <dnn:TemplateArgument name="ArrowStyle" value="plus" />
    <dnn:TemplateArgument name="Glass" value="true" />
    <dnn:TemplateArgument name="EnterAnim" value="slide-left" />
  </TemplateArguments>
</dnn:MENU>

Override CSS variables

.vm {
  --vm-width: 300px;
  --vm-radius: 8px;
  --vm-font-size: 14px;
  --vm-item-gap: 2px;
  --vm-stagger: 40ms;
}

Own a custom template

1. Copy the style folder into your skin's Menus directory.
2. Rename the folder and update menudef.xml references.
3. Merge production CSS and JavaScript into the skin pipeline where appropriate.
4. Test active, ancestor, disabled, separator and nested-node states.
5. Retest after DNN, jQuery or skin framework upgrades.