1

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?

Jeroen
  • 60,696
  • 40
  • 206
  • 339
  • This looks pretty old but it may help you: http://albe.ihnet.it/but/Features – Christina Oct 08 '14 at 20:22
  • Thanks for the tip. However, I don't see it yet: which part of that tool would help me accomplish my goal? – Jeroen Oct 08 '14 at 21:09
  • Isn't that the same menu system using Font Icons? If not, then sorry – Christina Oct 08 '14 at 21:11
  • No worry, I just thought I misunderstood. Haven't looked into linked site too much yet, but seems it uses font awesome, and is more about the menu itself than about setting icons for pages. Thanks though for taking the time to respond! – Jeroen Oct 08 '14 at 21:45
  • It's a shame that the menu is behind on the times, using images will be blurry on non-retina unless you load twice the size or detect retina with js and so forth. Too bad you can't add a class at least to the a href then insert the span that matches it with jQuery or something. – Christina Oct 08 '14 at 21:48

1 Answers1

1

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.

bdukes
  • 152,002
  • 23
  • 148
  • 175
  • Thanks for finding my question and taking the time to provide these insights. For now I guess the answer indeed then is this can't be done. If the priority for these icons gets high enough I can consider creating a skin object or module for this, since we have more of those anyways. In addition, I guess I have to look at the Razor templated menu's, hadn't seen much of that yet. Anyways: cheers! – Jeroen Oct 10 '14 at 21:28