RadPanelItem - Adding Hover back to HeaderTemplate

[Amanda]

Howdy all.

I wanted a custom little header for my RadPanelItems, so I did have to use HeaderTemplate.

I realize that when I created my own template, it's rendering as it's own little div without any anchors, allowing me to do my own CSS fun stuff.

However!  I'd much rather just use the defaults for the RadPanel that's already defined, specifically for the mouse hovering of headers.  From this thread, I've copied some CSS, but it's not working for me.  Any suggestions/help?

Thanks all!

[Kate]

Hello Amanda,

Can you please clarify on the exact appearance of the RadPanelBar that you are trying to achieve. As far I understand from your post you are using the HeaderTemplate and you are trying to customize its appearance. Can you please provide an image file demonstrating the look that you need to get with the HeaderTemplate, so I can assist you in accomplishing it?

Regards,
Kate
Telerik

[Amanda]

Thanks for the reply, Kate!

All I'm wanting to do is re-add in the natural/default behaviors of the typical RadPanelItem header, with the default values, when I have a HeaderTemplate defined.

As requested, I've attached what my custom header looks like, along with 2 pictures of the default one - first one without a hover and the second one with.

What I basically am wanting are the default looks (the slight gradient background when it's just sitting there AND the mouse hover) on the custom template.  I know WHY they went away, but now I just need to know the CSS to put them back.

I currently have the following code, but it doesn't work as far as I can tell:

.rpItem div.rpHeaderTemplate:hover

{

    background-position: 0 -200px !important;

    cursor: pointer;

}

.rpFirst div.rpHeaderTemplate:hover

{

    background-position: 0 -201px !important;

    cursor: pointer;

}

No hover effect.  What am I missing?

[Kate]

Hi Amanda,

Thank for clarifying that. Here you can find the styles needed to be applied in order to get the desired appearance when using the header template with the RadPanelBar:

div.RadPanelBar_Default .rpFirst a.rpLink:hover,
     div.RadPanelBar_Default .rpFirst div.rpHeaderTemplate:hover,
     div.RadPanelBar_Default li.rpFirst .rpExpanded:hover {
         background-position: 0 -201px;
     }

     div.RadPanelBar_Default a.rpLink:hover,
     div.RadPanelBar_Default div.rpHeaderTemplate:hover,
     div.RadPanelBar_Default a.rpExpanded:hover,
     div.RadPanelBar_Default div.rpExpanded:hover,
     div.RadPanelBar_Default .rpItem a.rpLinkExpandHovered:hover {
         background-position: 0 -200px;
     }

Note that the styles are applied when you use the Default skin. In case you need any other skin you will simply need to change the skin name in the selectors above.

Attached to this post you can also find my testing page.

Regards,
Kate
Telerik

[Amanda]

Kate,

Sorry for taking so long to get back with you, but I appreciate your help!

As soon as I got the CSS though, they decided to take the look in a different way, as people are wont to do, but I thank you for the assist!  Hope you're having a good weekend!