+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Add CssClass for Navigation

Add CssClass for Navigation

3 posts, 0 answered
  1. Andre
    Andre avatar
    23 posts
    Registered:
    07 Feb 2008
    05 Jan 2012
    Link to this post
    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
  2. Andre
    Andre avatar
    23 posts
    Registered:
    07 Feb 2008
    05 Jan 2012
    Link to this post
    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?
  3. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    08 Dec 2016
    10 Jan 2012
    Link to this post
    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
3 posts, 0 answered