Removing hover effects

[PureCode]

Hi,

I am trying to get rid of the hover effect on the actual panel bars (everything else can be set per bar, but not this).

So, basically, if I use the Outlook skin, and move the mouse over a panel bar, it changes from blue to orange, I do not want this to happen.

Any ideas?

Regards,

Mike

[Stuart Hemming]

Mike,

To do this you'll have to stop using the Embedded skin, copy the relevant CSS file to somewhere your project can get at it and then edit it to remove the style rules that control the hover behaviour.

To do the first of these, just set the EnableEmbeddedSkins property to "false" on you control.

Then, create a folder ("Skins" say) in your project and create an "Outlook" folder in it. In to this folder copy the file PanelBar.Outlook.css from the telerik\skins\Outlook folder then edit it. I think you'll find there are 5 rules that you need to modify.

Hope this helps.

--
Stuart

[PureCode]

Hey Stuart,

Thanks for the response.

This all seems a little excessive for something as 'simple' as removing a color change when the mouse moves over something.

Since the ASP.NET AJAX suite lacks a simple 'panel' control that shows up with the chosen skin, i figured I'd use a single PanelBar and put whatever I needed in there. Works great, apart from the mouseover on the PanelBar 'title'.

There has to be an easier way, can I not override the CSS of the skin using a bit of javascript on the page?

Regards,

Mike

[Stuart Hemming]

There has to be an easier way, can I not override the CSS of the skin using a bit of javascript on the page?
I don't think so. You'll need to wait for a grown-up to confirm that one way or the other though.

--
Stuart

[Paul]

Hi Mike,

You can easily override the panelbar skin by using the following CSS classes:

<style type="text/css">
.RadPanelBar_Outlook .rpRootGroup .rpLink:hover
{
    border-top: solid 1px #002d96 !important;
    background: #7da5e0 url('RootItemBkg.gif') repeat-x !important;
    color: #10110f !important;
}

.RadPanelBar_Outlook .rpRootGroup .rpSelected:hover
{
    background: #ee9515 url('RootItemBkgActive.gif') repeat-x !important;
}

.RadPanelBar_Outlook .rpGroup .rpLink:hover
{
    border-top: 0 !important;
    background: #fff !important;
}
</style>

You will have to just copy RootItemBkg.gif and RootItemBkgActive.gif images in your application.

All the best,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Stuart Hemming]

Told you a grown-up would know, didn't I?

--
Stuart

[PureCode]

Stuart,

Yes, you did :)

Still, I think this is way too much 'hassle' considering all the other CSS can easily be removed within the PanelBar items itself, the hover one is the only one not there.

Guess that in order to keep my solution from getting too messy with 'overrides' and 'workarounds' I will have to code my own panel based on the internal skins of the suite, once i get some time to do so :)

Anyways, thanks to both Stuart and Telerik for the swift answers.

Mike