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

Skin Customization: Modifying images

4 Answers 93 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Tahami
Top achievements
Rank 1
Tahami asked on 27 Nov 2008, 11:52 AM
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.

4 Answers, 1 is accepted

Sort by
0
Accepted
Paul
Telerik team
answered on 27 Nov 2008, 12:07 PM
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.
0
Tahami
Top achievements
Rank 1
answered on 11 Dec 2008, 06:01 AM
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?
0
Tahami
Top achievements
Rank 1
answered on 12 Dec 2008, 04:51 AM
I have resolved issue with the help of support ticket. Thanks
0
Veselin Vasilev
Telerik team
answered on 12 Dec 2008, 09:45 AM
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 { backgroundtransparent url('TabStrip/TabStripStates.gif'no-repeat 100% -61px; }  
.RadTabStripTop_mySkin .rtsLink .rtsOut { backgroundtransparent 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.
Tags
TabStrip
Asked by
Tahami
Top achievements
Rank 1
Answers by
Paul
Telerik team
Tahami
Top achievements
Rank 1
Veselin Vasilev
Telerik team
Share this question
or