Search code examples
twitter-bootstrapskinglyphiconsdotnetnuke-7ddrmenu

How to use glpyhicons for submenu items in a DDRMenu?

I have my own DNN7 skin based on Twitter Bootstrap 3, which utilizes a DDRMenu. I would like to have a glyphicon next to some of my submenu items, like this:

example of expanded menu

The image is a mockup using just the default Twitter Bootstrap .navbar-fixed-top. A single submenu item looks like this:

<li>
  <a href="/">
    <span class="glyphicon glyphicon-home"></span>
    My sub page 1
  </a>
</li>

My skin is using the "ULTokens.txt" method for creating a DDRMenu. A typical submenu node looks like this at the moment:

[>NODE]
    <li class="item[?FIRST] first[/?][?LAST] last[/?][?SELECTED] active[/?][?NODE] haschild[/?]">
        [?ENABLED]
            <a href="[=URL]"><span class="glyphicon-none"></span> [=TEXT]</a>
        [?ELSE]
            <a><span class="glyphicon-none"></span> [=TEXT]</a>
        [/?]
    </li>
    [?NODE]
        <span style="margin-left: 10px;"></span>
        [*>NODE]
    [/?]
[/>]

Now I know I can use the [=ICON] token to place an icon, which seems to be the preferred approach. However, the screen for adding an icon to a page is like this:

add icon from site file

or

add icon from system image

In short, we can only use image files. Instead I want to use a glyphicon.

It seems my only real option is to create a PNG from the appropriate glyphicons and select them as an image for pages. The only "non-option" for sticking with glyphicons that I currently see is to use Javascript to inject them into the menu run time, but I feel dirty for even only suggesting that.

Short of creating my own menu provider and abovementioned workarounds, is there any easy way to use glyphicons for menu items?

Solution

  • Yeah, there isn't any way within the default page settings dialog to assign a class or present a list of icons. You could create a custom module or skin object that administrators could use to assign an icon (saved as a tab/page setting), but that would be outside of the main page settings, and you wouldn't be able to access it from the menu template (you'd need to switch your menu to a Razor template, so that you can execute arbitrary code and retrieve tab/page settings).

    There was a project in DNN 7.1 to introduce a section in page settings for arbitrary settings, but it was cut from the release for not being complete enough. Ideally that would get fixed up and added back (it's scoped via DNN-3175), but I don't think anyone is focusing on it.