How to use to different base stylesheets for two tree views on the same page

8 posts, 1 answers
  1. Tilak
    Tilak avatar
    15 posts
    Member since:
    Aug 2009

    Posted 20 Feb 2010 Link to this post

    Hi Telerik team,

    Is there no way I can use two different base stylesheets for two different trees?

    I need to change the base stylesheet of the treeview control for my master page menu to reduce padding's and things like that and use my custom skin with custom images. I get it working simply great when there are no more tree controls on the page. Once I have another tree control on the page using the embedded base style sheet my treeview in the master page is messed up because the .RadTreeview class is loaded fresh from the Telerik DLL. How do I achieve this?

    Below are the few changes I made to the Base stylesheet
     
    .RadTreeView .rtUL .rtLI .rtUL  
    {  
        padding-left5px;  
    }  
     
    .RadTreeView .rtTop,   
    .RadTreeView .rtMid,   
    .RadTreeView .rtBot  
    {  
        padding0px 0 0px 0px;  
    }  
    .RadTreeView .rtPlus,   
    .RadTreeView .rtMinus  
    {  
        font-size: 0;  
        padding: 0;  
        display: -moz-inline-box;  
        displayinline-block;  
        vertical-aligntop;  
        cursorpointer;  
        margin6px 1px 0 -18px;  
        width11px;  
        height11px;  
        background-repeatno-repeat;  
    }  
     
    .RadTreeView .rtSp  
    {  
        display: -moz-inline-box;  
        displayinline-block;  
        width1px;  
        height16px;  
    }  
     
    .RadTreeView .rtIn  
    {  
        margin-left1px;  
        padding4px 3px 3px 10px 
        text-decoration:none;  

    Thanks,
    Tilak
  2. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 22 Feb 2010 Link to this post

    Hi Tilak M,

    You can easily apply these changes only to the RadTreeView skin you want by raising the CSS selector specificity and use the skin ones:
    div.RadTreeView_YourSkin .rtUL .rtLI .rtUL          
    {          
        padding-left: 5px;         
    }          
    div.RadTreeView_YourSkin .rtTop,           
    div.RadTreeView_YourSkin .rtMid,           
    div.RadTreeView_YourSkin .rtBot          
    {          
        padding: 0px 0 0px 0px;         
    }          
    div.RadTreeView_YourSkin .rtPlus,           
    div.RadTreeView_YourSkin .rtMinus          
    {          
        font-size: 0;         
        padding: 0;         
        display: -moz-inline-box;         
        display: inline-block;         
        vertical-align: top;         
        cursor: pointer;         
        margin: 6px 1px 0 -18px;         
        width: 11px;         
        height: 11px;         
        background-repeat: no-repeat;         
    }          
    div.RadTreeView_YourSkin .rtSp          
    {          
        display: -moz-inline-box;         
        display: inline-block;         
        width: 1px;         
        height: 16px;         
    }          
    div.RadTreeView_YourSkin .rtIn          
    {          
        margin-left: 1px;         
        padding: 4px 3px 3px 10px        
        text-decoration:none;         
    }         

    You can also assign a CssClass to it and use that instead of .RadTreeView_YourSkin.

    Kind regards,
    Kamen Bundev
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tonie Venter
    Tonie Venter avatar
    11 posts
    Member since:
    Jan 2006

    Posted 21 Oct 2013 Link to this post

    Kamen,
    Thanks for the informative reply, I have another issue trying to set the rtHover class, I have tried (almost) everything but cannot override the hover style in the treeview. What must one do to override it?

    I could override the node text as per your example but cannot override rtHover. I also managed to override the hover class in the radgrid fairly easily but it seems tricky to do the same in the treeview.

    The problem is actually with the Office2010Silver skin, where the hover background and text is almost the same colour so one can barely see the text on any item hovered.

    Any help appreciated

    Tonie
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 24 Oct 2013 Link to this post

    Hello Tonie,

    Please use the following style code snippet in order to customize the RadTreeView hover effect
    //css
    <style type="text/css">
        html .RadTreeView_Office2010Silver .rtHover .rtIn {
            background-color: red;
            background-image: none;
            border-color: green;     
        }
    </style>

    Please note that this values are for custom purposes.

    Regards,
    Boyan Dimitrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Tonie Venter
    Tonie Venter avatar
    11 posts
    Member since:
    Jan 2006

    Posted 24 Oct 2013 Link to this post

    Boyan
    Thanks for the reply it has helped me a lot. I still cannot set the text colour but I managed to set the background to another colour to make the text more visible on hover. Strange that it has no effect for Color:Black to set the text colour it still stays orange.

    Regards

    Tonie
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 29 Oct 2013 Link to this post

    Hello,

    Could you please confirm that you are trying to change the current RadTreeView node text color when hovered with the mouse?

    Regards,
    Boyan Dimitrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Tonie Venter
    Tonie Venter avatar
    11 posts
    Member since:
    Jan 2006

    Posted 29 Oct 2013 Link to this post

    Hi Boyan
    Yes I am trying to change the text colour on hover for the tree node. The code example works for the background and border but has no effect on the actual text on the node. I have changed the background to a different colour to allow the text to be more visible on hover as a workaround.

    Regards

    Tonie
  9. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 01 Nov 2013 Link to this post

    Hello Tonie,

    Please use the following css styles in order to change the text color of a node on hover
    //css
    <style type="text/css">
        html .RadTreeView_Office2010Silver .rtHover .rtIn {
        background-color: red; /*this will change the background color to red*/
        background-image: none; /*this prevents the default sprite image used for background*/
        border-color: green; /*this will apply a green border line around the node text*/
        color: yellow;   /*this will change the text(font) color of the node on hover*/
    }


    Regards,
    Boyan Dimitrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017