How to change the color of panelitem on mouseover for predefined skin

[Ram]

Hi
I'm using the RadPanelBar in my application.
I set the skin WebBlue.
When I move  mouse over the panelitem or items inside panelitem they showing the skyblue color.
I dnt want to show the blue color instead I want to show black color.
How cloud I achieve this. Please help me in Either  I need to any javascript event or custom skin.
I didn't aware of creating and using the custom skin for radcontrols. so please provide me any good example.

[Princy]

Hello Ram,

Try the following CSS to set the hover color for RadPanelBar.
CSS:

<style type="text/css">
.RadPanelBar_WebBlue a.rpLink:hover
{
 background:black !important;
}
</style>

Thanks,
Princy.

[Ram]

Hi Princy
It did work well.
I tried to change the forecolr but its not changing.
Now I applied Skin Black.
When I move over on the panel item. its showing colr as yellow.

I tried as follows

 

.RadPanelBar_WebBlue a.rpLink:hover
     {
      background:black !important;
      color:White !important;
     }

 

Is there other class name for that?

[Ivan Zhekov]

Hi Ram,

Do you want to change the colour of an PanelBarItem, or the background image?

If the you want to do former, actually you don't have to do it, as the colour of the link is already black (#000000)

If the you want to do later, you need to create a custom background image and include it in the css. There is a very good article in the documentation about creating / customizing custom skins for PanelBar.

All the best,
Ivan Zhekov
the Telerik team

[Ram]

Hi
There I got confused.
I attatched image when I do mouseover on the first item I'm seeing the item text in green(bright) color.
I want it in white color.
please feel free to answer my question.

[Princy]

Hello Ram,

Try the following CSS and let me know if any concern.
CSS:

<style type="text/css">
.RadPanelBar_Black a.rpLink:hover
{
   color:White !important;
}
 </style>

Thanks,
Princy.

[Ram]

Thanks you very much.
It worked well.