Appearance

Everything related to appearance is located in the second tab of NavXp management, called Instance Appearance. This page is divided into several sections. There is the tree on the left that contains all the skins in your NavXp installations. When you click on a skin name, you will see all the themes loaded in the right dropdown. Below, it's the preview window, where the theme is rendered real-time with the first profile bound to current instance. There is a second dropdown on the screen, labeled Profile to preview. By selecting a different profile, the preview area refreshes to reflect your option. You should always preview with profiles that are most demanding, that is profiles that either have too few options or too much. This will help you choose the best theme for your needs. For example, it will be useless to use an horizontal bar menu when your profile displays 20 items. There will be no room for so many items.

Once you are happy with the theme you've selected, hit Set Skin button, close the configuration screen and you will notice how the menu gets updated to the theme you've selected.

Skins

A NavXp skin is a layout that supports several levels of customization. The layout is defined in an XSL file called skin.xsl. This is rendered against the profile XML. Except for this transformation, there are other things happening in the background.

A skin may support the following features:


  • theming - In the skin definition file (skin.xml), there is a section named properties that specify that is customizable. Each option has a default value which form the default theme. The rest of the themes are built by giving other values to these options, which end up replacing some tokens in the skin styles (located in skin.css file)
  • icons - When this feature is activated, the skin supports rendering icons for each item. If that really happens or not depends of whether items have icons attached and if the current skin has the feature activated
  • alternative texts - This will display alternative texts when the mouse move over items. This too depends whether the items have alts attached and if the feature is activated in current theme.
  • javascript code - The framework will automatically load skin.js file if it exists and call init method. This is useful when writing complex skins that use effects or need additional initialization tweaking

Themes


As mentioned in the previous section, theming basically means replacing some tokens in skin css file. Tokens are dynamic and represent options described in skin.xml file. Each option has a default value which form the default theme. This options translate to CSS styles.

There several types of options:

  • fonts
  • colors (also used for background colors)
  • units
  • borders
  • margins
  • paddings
  • images

Based on current theme, NavXp will load the appropriate tokenized CSS file. By design, the CSS of different themes won't collide. That is because class names are also tokenized to include theme name.

Themes are saved in themes.xml file.
Creating Themes

Suppose you've got to the point where you want your own flavor of a pre-built skin. That is, you want the appearance to reflect the colors of your website. To accomplish this, open up the configuration screen and go into Instance Appearance Tab. Locate the skin you want in the left tree and click on it. In our scenario we will create a theme from scratch, so we'll click the New Theme button. From scratch basically means that we will create our theme starting from the default theme.

After you hit New Theme, you will get to the Theme Editor screen. A theme consists of a number of options that mainly affect css styles of the menu. The options are categorized by what they refer to. All skins haveRoot Items, so we'll change their font. In NavXp, there are three states of fonts for most of the skins: off (inactive), hover and selected (applies to the item that identifies the page the user is currently on).

Each option has two modes, the preview mode (that appears when you move the mouse over the icon of an option) and edit mode represented by the dialog that opens when you click the link below the icon. Let's click on the links for all 3 fonts and edit each of them to match the colors we need. The font dialog is very intuitive even if you don't have knowledge about css. You choose font families, size, weight, color (which in turn opens the color picker dialog), etc. The font dialog also has a preview area where you can see how your font looks like. Note that this may not be 100% accurate, because in the menu there could be other styles in effect that are inherited from higher nodes. When you are happy with each font, hit Apply. The font dialog closes. If you move your mouse over the icon of the font you've just changed, you should also see this preview updated with your changes. Repeat this operation for all fonts or any other theming options you want to adjust.

When you are happy with your changes, make sure you gave your theme a name, then hit Save. You will be taken back to the Instance Appearance Screen. You will see your new theme automatically selected in the dropdown and rendered inside the Preview Area. If you want to take further modification, locate and click the Edit Theme button. This will take you back to the Theme Editor, this time you'll be editing an existing theme instead of creating a new one. Repeat these steps until you are satisfied with the appearance. When done, click Set Skin button at the bottom and close the configuration screen. You will see the menu updating itself to the theme you've just created.

Porting NavXp Instances

NavXp implements IPortable so it allows for content to be ported to different instances.

There are several occasions when that happens:
  • you manually Export Content of a NavXp instance; you can then import content into another instance that could be on the same DNN installationg / portal or not
  • you create a new page and choose to copy from another page that contains NavXp instances.
  • you save portal template to deploy to another server
What you need to know is NavXp will only export module related content. That is, profiles will not be exported. At this point, we decided it's safer this way, because profiles rely on tab ids, role ids and user ids, which could be different on other profiles. We'll address this in the future though. Until then, you will have to recreate profiles on target machine manually or do a sql export of the NavXp profile tables. Note that profile ids don't need to match. Import operation matches profiles by their name.

Except this issue which affects deploying to other DNN installations, NavXp is fully portable on the same portal. The following data will be exported:
  • profiles attached to instance (they are exported by name, this is good to know when you need it deployed on another machine and need to recreate profiles)
  • appearance (skin & theme)
Comments