Add CssClass for Navigation

Hi,

I like to change the CSS of a Navigation.
The output for my Navigation is this:
<div class="rtsLevel rtsLevel1">
<ul class="rtsUL">
<li class="rtsLI rtsFirst rtsLast">
<a class="rtsLink" href="../../../testseite">
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">TestSeite</span>
</span>
</span>
</a>
</li>
</ul>
</div>

Now I simple like to set the CSS to class topMenu.
So I edit the Navigation choose advanced (in German Erweitert) and can enter the new class name into the dialog ...

This is the CSS for:
#topMenu ul

margin: 0;
padding: 0;
list-style-type: none;
background-color: #007DB1;


#topMenu a

display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: .2em .8em;
text-decoration: none;


#topMenu a:hover

background-color: #369;
color: #FFF;


Now the PlaceHolder for becomes the CSS:
<div id="StatusPlaceHolder_T6875ACFA001" class="topMenu">

But this has no effect - the output looks like before.

Are there anymore steps to do for or is my CSS wrong for?

Thanks

Andre

I found this issue www.sitefinity.com/.../overriding-radtabstrip-styling.aspx about a simular problem.

Is there really need for using an own widget to overwrite the default CSS?

Hi,

It is not needed to use custom controls.
To style the navigation use the navigation ID`s rtsLevel rtsLevel1, rtsUL. The ids are different for the different modes of the navigation control(horizontal, vertical, etc). The id`s and classes are different because for differnt navigation types different RadControls are used. 

When you create a page you are asked to select a template for the page. by default all templates are using the basicFrontentTheme which is adding styles to widgets and the navigation. I have attached the theme for reference.

To style the navigation you have dofferent approaches.
Create a new frontent theme by addressing all styles for the navigation classes and ids. Here you can find the documentation for this. Refer to the navigation classes from the Frontend Theme (the frontend theme is also available in Sitefinity SDK). 

Alternatively place css widget on the page and enter styles manually (in case not using a theme). Use !important to overwrite the styles applied from the frontend theme.

To style this navigation