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

Forums / Designing & Styling / Style Control Navigation

Style Control Navigation

5 posts, 1 answered
  1. Thiago
    Thiago avatar
    9 posts
    Registered:
    11 Jan 2011
    11 Feb 2011
    Link to this post
    Hey Guys,

    I need help to style the menu in my website I'm creating and I am dealing with some problems, first in style the Navigation control. The side menu it offers could see that his style is dynamic, but some how would define my own style to it?

    Follows a screen of the current formatand he's the format I want it to.

    menu-navigation-padrao.jpg (Style default).
    menu-navigation-desejavel.jpg (Own Style).

    Thank you for your attention,

    I await a return,

    Regards,
    Thiago Triunfo
    XP Investimentos CCVM
    Brazil

  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    14 Feb 2011
    Link to this post
    Hello Thiago,

    To apply a custom style to your navigation you should use the Wrapper CSS Class(skin) property - see the attached screen. I've made a test and the result is also attached. The CSS that i have used is below:



    body
    {
        font-family: Verdana;
        font-size: 11px;
    }
     
    a
    {
        color: #161616;
        text-decoration: none;
        width: 100%;
    }
     
    .RadTreeView_main
    {
     
    }
    .RadTreeView_main .rtUL
    {
     
    }
     
    .RadTreeView_main .rtUL li
    {
        border-bottom: 1px dotted #ccc;
    }
     
    .RadTreeView_main .rtUL li li
    {
        border: none;
    }
     
    .RadTreeView_main .rtUL li li li a.rtIn
    {
        font-weight: normal;
        font-size: 10px;
    }
    .RadTreeView_main .rtUL li li a.rtIn
    {
        font-size: 11px;
    }
     
     
    .RadTreeView_main .rtUL li li a.rtIn:hover
    {
        background-color: #e7a800;
    }
     
    .RadTreeView_main .rtUL li .rtPlus, .RadTreeView_main .rtUL li .rtMinus
    {
        background-image: url(../Images/arrow.jpg);
        background-repeat: no-repeat;
        width: 14px;
        height: 25px;
        margin-top: 0px;
         
    }
     
    .RadTreeView_main .rtUL li .rtPlusHover
    {
        background-position: 0 -25px;
    }
     
    .rtPlus, .RadTreeView_main .rtUL li .rtMinus
    {
        background-position: 0 -25px;
    }
     
    .RadTreeView_main a.rtIn
    {
        font-weight:bold;
        font-size: 12px;
    }
     
     
     
    .RadTreeView_main .rtSelected a.rtIn, .RadTreeView_main a.rtIn:hover
    {
        border: none !important;
         
    }


    Best wishes,
    Jordan
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  3. Thiago
    Thiago avatar
    9 posts
    Registered:
    11 Jan 2011
    14 Feb 2011
    Link to this post
    Jordan,

    Thank's very murch!

    Regards,
    Thiago Triunfo
    XP Investimentos - BRAZIL
    www.xpi.com.br

  4. XP Investimentos
    XP Investimentos avatar
    16 posts
    Registered:
    10 Jan 2011
    21 Feb 2011
    Link to this post
    I'm having the same problem and did not understand what to do. I have to put "main" in wrapperclass, follow these steps but I do not help much. Can I explain?
  5. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    22 Feb 2011
    Link to this post
    Hi Bruno,

    Can you give me some more details about your problem.
    • Please send the CSS you have applied to your page,
    • send your master page,
    • send screenshot of how you have configured the navigation control,
    • send screenshot of how your navigation looks like at the moment,
    • send screenshot of how you want it to be.


    All the best,
    Katia
    the Telerik team
5 posts, 1 answered