Style Control Navigation - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Style Control Navigation

  • Style Control Navigation
  • 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


  • 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
  • Jordan,

    Thank's very murch!

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

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