Styling PanelBar Parent Items

4 posts, 0 answers
  1. Greg
    Greg avatar
    9 posts
    Member since:
    Jun 2008

    Posted 27 May 2010 Link to this post

    I was wondering if the following is possible, either through ItemTemplates, or through pure CSS:

    I want to style my top level items with a custom theme like Office 2010 [Office 2010 like theme]. I can override the background image:

    DIV.RadPanelBar .rpRootGroup .rpSelected
    {
        background: url("Images/static.png") no-repeat scroll right -304px transparent;
        background-color:transparent;
    }

    but we miss the left hand border. Obviously to get this, we need another another image (this is done with another <span> element that wraps the .rpSelected element), but in your model there is no element that we can apply the background image too.

    Is there a way to do this at design time? I really don't want to have to pluck out each .rpSelected and wrap it with my own <span> at runtime with JQuery...
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 01 Jun 2010 Link to this post

    Hi Greg,

    There are enough elements in there already. Check the sub items styling in our skins - it is done with the same "sliding door" technique. You can set the left door on .rmSelected (which is an anchor tag) and the right door on .rpOut (which is a span). Something like this:
    div.RadPanelBar .rpRootGroup .rpSelected
    {
        background: transparent url("Images/static.png") no-repeat scroll 0 -304px;
    }
    div.RadPanelBar .rpSelected .rpOut
    {
        background: transparent url("Images/static.png") no-repeat scroll 100% -304px;
    }

    You may need to adjust the .rpSelected padding-left to be able to see the left door through the right one.

    All the best,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Greg
    Greg avatar
    9 posts
    Member since:
    Jun 2008

    Posted 01 Jun 2010 Link to this post

    Thanks for the response. This worked well in that it showed me that I had the doors the wrong way around.... There is however one small problem outstanding in that the left door image is showing 1px higher than the right door image, and for the life of me I can't find the property to override - any ideas? A screenshot is attached with the sprites and the overridden selectors: Thanks in advance...

    .footer .RadPanelBar .rpRootGroup .rpSelected 
        border: 0 none; 
        background:url("Images/static.png") no-repeat scroll 0 -272px transparent;  
        margin: 0; 
        height: 32px;  
        display: block;  
        padding-bottom: 0; 
        line-height:32px; 
     
    .footer .RadPanelBar .rpSelected .rpOut 
        background: url("Images/static.png") no-repeat scroll 100% -304px transparent; 
        background-color:transparent; 
        display: block; 
        height:30px; 
        line-height:30px; 
        margin:0 0 0 3px; 
        padding: 0; 
     
    .footer .RadPanelBar .rpText 
        height:32px; 
        line-height: 30px; 
        color: White; 
        margin: 0; 

  5. Greg
    Greg avatar
    9 posts
    Member since:
    Jun 2008

    Posted 01 Jun 2010 Link to this post

    My bad. As soon as I posted I found it...Thanks a million for your help. For anyone else who wants a solution, attached is the final CSS markup (oh and I'm using the sitefinity theme)

    .footer .RadPanelBar .rpRootGroup .rpSelected 
        border: 0 none
        background:url("Images/static.png"no-repeat scroll 0 -272px transparent;  
        margin: 0; 
        height32px;  
        displayblock;  
        padding-top:0; 
        padding-bottom: 0; 
        line-height:32px
     
    .footer .RadPanelBar .rpSelected .rpOut 
        backgroundurl("Images/static.png"no-repeat scroll 100% -304px transparent
        background-color:transparent
        displayblock
        height:30px
        line-height:30px
        margin:0 0 0 2px
        padding: 0; 
     
     
    .footer .RadPanelBar .rpText 
        height:32px
        line-height30px
        color: White; 
        margin: 0; 

Back to Top