This is a migrated thread and some comments may be shown as answers.

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

7 Answers 50 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Tilak
Top achievements
Rank 1
Tilak asked on 20 Feb 2010, 05:35 PM
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

7 Answers, 1 is accepted

Sort by
0
Accepted
Kamen Bundev
Telerik team
answered on 22 Feb 2010, 09:37 AM
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.
0
Tonie Venter
Top achievements
Rank 1
answered on 22 Oct 2013, 02:30 AM
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
0
Boyan Dimitrov
Telerik team
answered on 24 Oct 2013, 02:30 PM
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.
0
Tonie Venter
Top achievements
Rank 1
answered on 25 Oct 2013, 02:01 AM
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
0
Boyan Dimitrov
Telerik team
answered on 29 Oct 2013, 03:50 PM
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.
0
Tonie Venter
Top achievements
Rank 1
answered on 29 Oct 2013, 09:21 PM
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
0
Boyan Dimitrov
Telerik team
answered on 01 Nov 2013, 03:07 PM
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.
Tags
TreeView
Asked by
Tilak
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Tonie Venter
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or