Making SubItemStates.png larger

[Jason]

I am currently adjusting the sunset skin. I am trying to adjust the background image color and size of the 2nd tier hover style, but I am running into issues. The image is SubItemStates.png. It consists of a 1000px bar with the right end cap is cutoff and placed under the bar on the right side of the image. I have increased the height of the bar by about 10px. Here is the style definition for this item:

.RadPanelBar

 

.rpGroup .rpLink,

 

.RadPanelBar

 

.rpGroup .rpOut

 

{

 

background-color: transparent;

 

 

background-image: url('Images/SubItemStates.png');

 

 

background-repeat: no-repeat;

 

}

If I remove the reference to the ".RadPanelBar .rpGroup .rpLink" It will display the bar normally but the right end cap is missing. If the reference is included It will display the top part of the end cap but it also includes the bottom 10px of the bar. If I could adjust the height, add 10px to the original background (bar image) size, using a CSS style that would fix the problem. But I cannot figure out were to add it.

I don't really understand this method of displaying a sizeable background image bar. Any help in understanding this would be greatly appreciated, more importantly how to fix it would be even more appreciated!!!

Thank you!!

~Jason

[Kamen Bundev]

Hello Jason,

You can customize an existing skin by making it external and editing the CSS file to control the RadPanelBar height. Refer to these documents for a more thorough explanation on external skins:
http://www.telerik.com/help/aspnet-ajax/createcustomskin.html
http://www.telerik.com/help/aspnet-ajax/skinregistration.html

If you still have problems, you can open a ticket and we will help you make the CSS file adjustments.

Regards,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.