Quick Start

This section provides information about how to get started with NavXp. It covers all major aspects of configuration without going into too much detail.

If you haven't already installed NavXp, please follow these installation instructions before proceeding.

After you successfully create a new NavXp instance (either a module or a skin object), you will see the precise hierarchy of the tabs on your portal rendered with the default skin that resembles the windows standard menus.

Basic Appearance configuration


The first change you need to make is change the active skin. To do this, go into edit mode, locate the Manage button inside the NavXp instance (it should be the last root item on the bar) and click it. This will open the configuration screen. Everything related to appearance is located into the second tab called Instance Appearance. 

In this tab, you start by browsing skins in the tree to the left. When you click on a skin name in the tree, the page refreshes to load themes that are specific to the skin you just clicked. In the right side you should see a dropdown with all the themes of current skin. When you change the theme in the dropdown, you will see the preview area refresh to match the theme you've selected. When you are happy with the skin and the theme you've choose, hit Set Skin, then close the configuration screen. You will see the menu on the page also updating its look to the theme you've chosen. That is all the basics you need to manage appearance.


Basic Profile configuration


Now, let's move on to creating custom menus, that is display selective pages in the order and hierarchy we wish. To put this into action, we need to create a profile. A profile is basically a set of options that can be linked to any number of NavXp instances. To create a new profile open up NavXp configuration screen. In the first tab, locate the Create New Profile link and click it. This will open Add/Edit Profile screen. Give your profile a meaningful name and a description, then navigate to the second tab where we define the custom hierarchy we want to display. At this point, you should see two trees: one that displays all the pages on your portal, and another one that is empty which represents the pages that currently form the profile. In the left tree locate the pages you want displayed and drag them over the root node of the right tree (called Profile Tabs). Repeat this operation any number of times. You can drag items before, after or as children of other items.
  
By clicking on items in the Profile Tabs tree (that is the right tree), you can customize each item further by changing the title that will be displayed in menu, adding an alternative text that will be displayed when mouse is over the item and an icon. Note that alternative texts and icons are optional features of skins, so unless a skin supports these features and the theme is configured to use them, these won't have any effect. By default, most of the pre-built themes display alternative texts. Icons, though supported by the majority of skins, are not widely used in pre-built themes. However, you will learn how to create your own themes later.

There's no need to go into the Permissions tab. By default, profiles are public, therefore all items will be displayed for all users, provided they do have access to the pages you've chosen. When you are ready to go, hit Save and you will return to Instance Profiles tabs.

In the profiles dropdown at the top locate the profile you've just created, select it and hit bind. You will see it appear in the table below. Also, make sure you either remove to default profile, or you move the profile you've just created up, so it appears first in the list. Profiles are matched in the order they appear inside this table, so if two public profiles are attached to the same instance the first one will be rendered. Now close the configuration screen and you will see your menu updating itself with the items you've chosen for your profile.


Advanced Appearance configuration


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 have Root 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.
Comments