Style the navigation widget

1. Write the CSS file.

   Following is an example CSS file named main.css containing class named University:

   .RadTabStrip_University li {

       border-bottom: 1px solid #e3e3e3;

       height: 25px;

       line-height: 25px;

       font-size: 11px;

       font-family: Arial;

       padding: 0px;

       margin: 0px;

   }

    

   .RadTabStrip_University li a.rtsLink {

       color: #4e4e4e;

       display: block;

       width: 100%;

       text-align: left;

       background-image: url(../documentation/images/arrow.jpg);

       background-repeat: no-repeat;

       background-position: 10px 10px;

       text-indent: 3px;

   }

    

   .RadTabStrip_University li a.rtsLink:hover {

       color: White;

       background-color: #013300;

   }

    

   .RadTabStrip_University li .rtsTxt {

       text-align: left;

   }

2. Register the theme in Sitefinity.
   For more information, see Registering a theme.
   The following screenshot displays the registered theme, named test and the path to the theme and its main.css file:

   enlarge screenshot

3. Apply the theme to the template that will hold your navigation.
   For more information, see Applying a theme.
   The theme you have registered appears in the dropdown box.
4. Add the Navigation widget to the template.
5. When you configure the widget, in Design settings » Wrapper CSS class, enter the name of the CSS class you have created.
   For example, enter University, which is the name of the CSS class that you defined in Step 1.

Following is an example of how the navigation looks like:

enlarge screenshot