Skin Customization: Modifying images

[Tahami]

Hello there,

I want to use a customized skin of TabStrip in my application. My desired skin is somewhere close to Telerik skin except for size of tabs and their state dependant colors. For this I need to modify (or build new) images contained in the respective skin folder. I have gone through this thread

http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/how-to-skin-tabstripstates-gif-file.aspx

I have consulted my Graphic Designer on this issue. Modifying these sprite images is a headache as source files of these images are not available. Does anyone know some kind of tool or methodology which can be useful in this regard?

On the other hand if we build these images from scratch, I guess we would run into problems as the embedded javascript will be picking the images through their (x,y) coordinates.

Thanking in anticipation for your help.

[Paul]

Hi Tahami,

After making size changes in the sprite image you will have to modify the coordinates in the CSS file. I'd suggest you review these help articles on the matter:

Modifying built-in skins
Tutorial: Creating A Custom Skin
Sprite Guide

In addition, you can download the skins' PSD files from our Skins page.

Regards,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Tahami]

Thanks for the help.

I have created the gif files needed for skin and modified CSS as well. I have modified 'Telerik' skin. But tabs are not appearing correctly. A line of images seems to appear above tabs. I wasn't able to figure out where did I went wrong while creating gif files. I have used the same size for tabs as they are in 'Telerik' skin files. I am using horizontal tabs. Is there any way I can email the whole project to you in order to get help?

[Tahami]

I have resolved issue with the help of support ticket. Thanks

[Veselin Vasilev]

Hi Tahami,

I am sharing the response here so someone else could benefit from it:

If you modify the CSS to move the background position up it will come in place (modified CSS follows).

.RadTabStripTop_mySkin .rtsLink { background: transparent url('TabStrip/TabStripStates.gif') no-repeat 100% -61px; }
.RadTabStripTop_mySkin .rtsLink .rtsOut { background: transparent url('TabStrip/TabStripStates.gif') no-repeat 0 -89px; }
.RadTabStripTop_mySkin .rtsFirst .rtsLink .rtsOut { background-position: 0 -5px; }
.RadTabStripTop_mySkin .rtsLast .rtsLink { background-position: 100% -5px; }

.RadTabStripTop_mySkin .rtsLink:hover, .RadTabStripTop_mySkin .rtsSelected { color: Black; }

.RadTabStripTop_mySkin .rtsSelected { background-position: 100% -89px; }
.RadTabStripTop_mySkin .rtsFirst .rtsSelected .rtsOut,
.RadTabStripTop_mySkin .rtsSelected .rtsOut { background-position: 0 -33px; }
.RadTabStripTop_mySkin .rtsLast .rtsSelected { background-position: 100% -33px; }

.RadTabStripTop_mySkin .rtsAfter .rtsOut { background-position: 0 -61px; }

.RadTabStripTop_mySkin .rtsDisabled.rtsAfter .rtsOut { background-position: 0 -61px; }

Regards,
Veselin Vasilev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.