Styling PanelBar Parent Items

[Greg]

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...

[Kamen Bundev]

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.

[Greg]

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;
}

[Greg]

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;
    height: 32px;
    display: block;
    padding-top:0;
    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 2px;
    padding: 0;
}


.footer .RadPanelBar .rpText
{
    height:32px;
    line-height: 30px;
    color: White;
    margin: 0;
}