RadPanelItem - Adding Hover back to HeaderTemplate

5 posts, 0 answers
  1. Amanda
    Amanda avatar
    30 posts
    Member since:
    Aug 2012

    Posted 29 May 2013 Link to this post

    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!
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 31 May 2013 Link to this post

    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
    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 their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Amanda
    Amanda avatar
    30 posts
    Member since:
    Aug 2012

    Posted 31 May 2013 Link to this post

    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?
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 05 Jun 2013 Link to this post

    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
    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 their blog feed now.
  6. Amanda
    Amanda avatar
    30 posts
    Member since:
    Aug 2012

    Posted 15 Jun 2013 Link to this post

    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!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017