Displaying Large and Small Icons From the Page Settings


There are two fields on the page settings called the Small Icon and Large Icon. The Small Icon is used for menus where icons are beside the page name. The Large Icon was being used for the Console module, which has been deprecated since Evoq 9.






Implementing in a DDR Menu


Applying the Icons in the DDR menu is simple. For example, you can look at the default Cavalier skin in Portals\_default\Skins\Cavalier\Main - you will see it defines the menu layout in SimpleTokens.txt for the nav class.

  • As this is using the token template form of the DDRMENU, you can look up the documentation and see that you could use the [ICON] or [LARGEICON] tokens.


Back to top


Implementing in an HTML Module


HTML (titled Text/HTML) is a free form module that uses the Editor control to manage content using either a Basic Text Box or Rich Text Editor. The HTML module can display the dynamic site and user data by using replacement tokens. You can display the small icon as [Tab:IconFile] and the large icon as [Tab:Iconfilelarge].

  • Check out the Tokens section of the DNN Wiki for additional information.


You will need to enable "Replace Tokens" by going into the Module Settings > HTML Module Settings of the HTML module.


Back to top


Implementing Directly Inside a Theme File to Return the ICON for the Current Page


The Theme Editor (located on the Admin > Advanced Settings > Themes page) allows Administrators to preview and apply themes and containers to the site and allows Super Users to parse and delete containers and themes. The Theme Editor can be added to any site page to permit any user with view rights to set containers and themes. The Edit Theme Attributes section can only be viewed on the Admin > Themes page. 

DNN uses a CSS (Cascading Style Sheet) to control the fonts, styles, and colors applied across the site. The CSS maintained in this editor is the default CSS applied to all site pages.

  • Administrators can modify the current stylesheet or restore the default style sheet via the Stylesheet Editor tab of the Admin > Site Settings page.


When a theme package (containing a CSS file) is applied to a page or the site, this CSS will override the CSS maintained on the Admin > Site Settings page. The default stylesheet can be edited and saved by Administrators without affecting the styles that are part of uploaded theme packages.

  • The default stylesheet can be restored at any time, but any modifications made on the page will be deleted.


You can reference the current small and large icons currently on a specific page by accessing your theme's skin file and inserting the following:

  • <img src="<%#Portalsettings.ActiveTab.IconFile%>" height="42" width="42">
  • <img src="<%#Portalsettings.ActiveTab.IconFileLarge%>" height="42" width="42">



Back to top


1 comment

  • Avatar
    Hunter Buck

    If this snippet isn't working for you: try capitalizing the 's' in '<%#PortalSettings'

    Comment actions Permalink

Please sign in to leave a comment.