Navigator Control Changing the Sample Stylesheet

This document describes a simple technique you can use to customize the appearance of the Navigator Control. All of the Navigator Control samples use a Cascading Style Sheet (CSS or stylesheet) to format the appearance of each item in the menu. The stylesheet defines two styles for each template: one for when the cursor is over the item, and one for when the cursor is somewhere else. The easiest way to change the appearance of one of the samples is to modify the stylesheet.

All of the sample user controls use styles from the Navigator.css stylesheet that is normally installed in the Controls and ssl/Controls directories of your store. If you open this file, you will find style definitions similar to this:

.CategoryBox
{
   padding-right: 5px;
   padding-left: 5px;
   padding-bottom: 5px;
   width: 100%;
   color: white;
   padding-top: 5px;
   border-bottom: navy 1px solid;
   font-family: Arial, Sans-Serif;
   background-color: navy;
}

This entry defines the CategoryBox style. This style is used to render top-level category items in the menu when the cursor is not over the item. The complete list of styles is shown in the table below:

Item Type	Normal Style	MouseOver Style
Category	CategoryBox	OverCategoryBox
Selected Category	SelectedCategoryBox	OverSelectedCategoryBox
Subcategory	SubcategoryBox	OverSubcategoryBox
Selected Subcategory	SelectedSubcategoryBox	OverSelectedSubcategoryBox

To change the style of a menu item, all you need to do is edit the corresponding style in the stylesheet. For example, to change the text color of top-level category items, you would edit CategoryBox and OverCategoryBox.

Example

In this walk through, we will change the foreground color (used for text) and background color of top-level categories:

1. Open Controls/Navigator.css in an editor.
2. Find the following style definition:

   .CategoryBox
   {
      padding-right: 5px;
      padding-left: 5px;
      padding-bottom: 5px;
      width: 100%;
      color: white;
      padding-top: 5px;
      border-bottom: navy 1px solid;
      font-family: Arial, Sans-Serif;
      background-color: navy;
   }

3. Change color to "red" and background-color to "green" like this:

   .CategoryBox
   {
      padding-right: 5px;
      padding-left: 5px;
      padding-bottom: 5px;
      width: 100%;
      color: red;
      padding-top: 5px;
      border-bottom: navy 1px solid;
      font-family: Arial, Sans-Serif;
      background-color: green;
   }

4. Save your change and close the file.
5. Open a store page and you will see the effect of your changes.

 

 

 

 

---

Copyright © 2005 by Structured Solutions. All rights reserved.

Version 1.3.2