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

[Tilak]

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-left: 5px;
}

.RadTreeView .rtTop,
.RadTreeView .rtMid,
.RadTreeView .rtBot
{
    padding: 0px 0 0px 0px;
}
.RadTreeView .rtPlus,
.RadTreeView .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;
}

.RadTreeView .rtSp
{
    display: -moz-inline-box;
    display: inline-block;
    width: 1px;
    height: 16px;
}

.RadTreeView .rtIn
{
    margin-left: 1px;
    padding: 4px 3px 3px 10px
    text-decoration:none;
}

Thanks,
Tilak

[Kamen Bundev]

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.

[Tonie Venter]

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

[Boyan Dimitrov]

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

[Tonie Venter]

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

[Boyan Dimitrov]

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

[Tonie Venter]

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

[Boyan Dimitrov]

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