Icon Support

Most of the info below applies starting with version 1.3.2.

NavXp has built-in support for icons. Regardless of whether you assign an icon in Tab Settings window or you assign one in NavXp Add/Edit Profile window, they will be rendered by NavXp skins that support icons and have that option turned on for active theme.

Different skins support icons differently. Some skins may not support them at all (such as text-based skins) or support specific versions. NavXp allows 3 versions for each icon: 16x16, 32x32, 64x64. This implementation has two major benefits:

  • it saves bandwidth when smaller icons are used; this is the case especially when the entire tab hierarchy contains lots of icons
  • it allows different versions based on resolution (for example, a low-resolution icon may be more than just the high resolution scaled down; it could be that certain details look rough when scaled down and they are refined).

Each skin then chooses the best version to use. For example, if a skin needs 12x12 pixel icons, then it will choose the 16x16 version, but if it needs 20x20 it will choose the 32x32 one. Further scaling is made in html by using width and height attributes.

Note than when you add your own icons, you don't need to add all versions. NavXp will determine which versions are available on disk, then import the rest of the versions from the existing one(s).

Enabling Icons

Most skins that NavXp comes with support icons. However, this option is not turned on by default. This option is specified per theme, so you'll have to create your own theme (recommended) or edit an existing theme.

To turn icon rendering on:

  • open NavXp Settings window
  • go to Instance Appearance Tab and select the skin you want to use if it's not already selected in the tree to the left
  • in the Themes dropdown at the top, select the theme that you want to use
  • locate the Edit As New button and click it to open Theme Editor
  • in Theme Editor, locate Display Icons checkbox and make sure it's checked (screenshot below)
  • finally, make sure you click the Set Skin button before closing NavXp Settings window


Choosing Icons

With NavXp, you'll either be using the default profile that matches precisely the tab hierarchy you have defined in DotNetNuke or you will be using a custom profile. When using the default profile, you can only specify icons in DNN Tab Settings window. When using a custom profile, you can also specify icons in the NavXp Add/Edit Profile window.

Using Tab Icons

To associate an icon to a tab in DotNetNuke, locate and click Page Settings in DNN Control Panel, then navigate to  the Icon field in Advanced Settings > Appearance (see screenshot). The icon you select will be automatically rendered by NavXp.


Using NavXp Icons

Alternatively, when building custom profiles, you can specify an icon for each item in the profile hierarchy, including arbitrary items. The icon you specify here will override the icon in Tab Settings. NavXp comes with several icons that merely illustrate the concept. Most likely you will want to add your own icons.

To select an icon for a profile item:

  • open NavXp Settings window
  • click Create new profile
  • in the Add/Edit Profile window, input a name for your profile and click Tabs at the top
  • in the Tabs window, drag&drop a tab from the left tree of Portal Tabs to the right tree of Profile Tabs
  • in the Profile Tabs tree, click on the item you've just added; Item Properties window appears on the right
  • locate the Icon field and click change; a list with all available icons appears
  • select an icon and click Use
  • click Save to update Item Settings (the icon update will reflect in the Profile Tabs tree)
  • click Save again to save the Profile
  • bind the newly created profile to current instance by selecting it the the dropdown and click bind
  • close the NavXp Settings window; changes should now reflect on the screen
To remove icon association from a profile item, follow the steps above and select the icon labeled NO ICON.

Adding New Icons to NavXp

To install new icons, simply copy them to the /DesktopModules/avt.NavXp/icons folder. Icons are cached by NavXp, as touching the disk on each request is a slow operation. When adding new icons to the folder, hit Refresh in Icons Browser so they are loaded again from disk.

NavXp supports 3 versions for each icon, 16x16, 32x32, and 64x64. Each skin will use the version it fits best in order to save bandwidth. Naming convention is to append _16, _32, _64 at the end of the icon to indicate different versions. If you only put one version, NavXp will use it for all requirements and the resize will be made on the client side by using appropriate width and height attributes on img elements.
Comments