Forums

Home / Developer Network / Forums / Sitefinity: Designing & Styling > Add CssClass for Navigation

• Andre

  Posted on Jan 5, 2012 (permalink)

  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

  Reply

• Andre

  Posted on Jan 5, 2012 (permalink)

  I found this issue http://www.sitefinity.com/devnet/forums/sitefinity-4-x/designing-styling/overriding-radtabstrip-styling.aspx about a simular problem.
  
  Is there really need for using an own widget to overwrite the default CSS?

  Reply

• Stanislav Velikov Stanislav Velikov

  Posted on Jan 10, 2012 (permalink)

  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

  <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>

  
  style .rtsUL .rtsTxt .rtsLevel as the classes applied from the navigation control
         Regards,
  Stanislav Velikov
  the Telerik team

  Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Attached files

  • BasicFrontendTheme.rar

  Reply

Home / Developer Network / Forums / Sitefinity: Designing & Styling > Add CssClass for Navigation