This is a migrated thread and some comments may be shown as answers.

Styling PanelBar Parent Items

3 Answers 100 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 27 May 2010, 06:07 PM
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...

3 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 01 Jun 2010, 12:18 PM
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.
0
Greg
Top achievements
Rank 1
answered on 01 Jun 2010, 03:49 PM
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; 

0
Greg
Top achievements
Rank 1
answered on 01 Jun 2010, 03:58 PM
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; 

Tags
PanelBar
Asked by
Greg
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Greg
Top achievements
Rank 1
Share this question
or