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

skin sprite file guide

29 Answers 363 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
kmv
Top achievements
Rank 1
kmv asked on 30 Mar 2009, 08:29 PM
With the move to sprite files for the skins , it seems to me a worthwhile effort for telerik woud be a clear guide to which parts of the sprite are used for what.


Yes i could work backwards thro the css files decrypting all those negative positions markers  

Indeed i just started doing this for menu but i am sure a whole load of people are having to do the self same thing so telerik map out those  sprite files please



kmv

29 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 02 Apr 2009, 03:45 PM
Hello Kevin,

You are totally right! We should have thought of this earlier - only today there are three tickets related to the lack of styling documentation. We've started developing an idea about the best visual way to show the regions of the sprite; I'll update this thread when there is some progress on the topic.

We've got the sprite PSDs available for some of the controls - you can find them attached to this post. I hope that they will be sufficient until we create something better.

Greetings,
Alex
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
SuperXRAY
Top achievements
Rank 2
answered on 02 Apr 2009, 05:39 PM
Speaking specifically of the RadMenu, is it pixel-based or does it look for the transition from colored pixels to transparency for the separation of the different parts of the sprite image? In other words, how does one change the size of the RadMenu, since the sprite image is not vector based?

I assume one can not simply add a layer to the PSD file and have it show up in the skin selector. The prior method of skinning was much more user-friendly, configurable, and portable.

I already modified the PNG sprite file for the RadMenu, but it does not act as expected.
0
Alex Gyoshev
Telerik team
answered on 03 Apr 2009, 08:35 AM
Hello Mitch,

Indeed, the new skinning approach is not as convenient as the old one. We're aware of that, and this is why we want to build the Visual Style Builder, and other tools that will make the process easier than before. Until then, please explain what you are trying to achieve (as far as I understand, you wish to make a skin bigger - but which?) - we will provide you with the desired CSS and images.

The reasoning behind using the sprite images is that they reduce the number of HTTP requests to the server, and therefore - make the controls perform much faster. A detailed overview of this technique can be found at A List Apart.

Greetings,
Alex
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
-DJ-
Top achievements
Rank 1
answered on 03 Apr 2009, 04:32 PM
Hi guys,

I love the sprite approach, and have adopted it in my work close to 100%, meaning I'm designing sites based on sprites as well. If the site uses just a couple of RadControls I try to put the skin within the site sprite as well.

But for some reason some controls haven't been totally "spritified" yet. The Treeview is a good example, all the lines are still in separate images. I'm sure there is a good reason for it, so I haven't bothered moving them all into a sprite image when skinning the treeview.

I second Kevins idea, it could be a great timesaver. For example, I've yet to see half of the bars in the window skins sprites displayed anywhere, and I have no idea where - if anywhere - they are used.

Regards,
-DJ-
0
SuperXRAY
Top achievements
Rank 2
answered on 03 Apr 2009, 04:38 PM
Simple documentation would suffice. Perhaps a flow chart of how the RadMenu and it's states operate, describing the CSS class-section of the CSS file that defines the look of each state. Decoding how the RadMenu uses the CSS is becoming quite time consuming and the sprite file isn't very well organized, in my opinion.

You said:

"...Until then, please explain what you are trying to achieve (as far as I understand, you wish to make a skin bigger - but which?) - we will provide you with the desired CSS and images."

In response to that, I don't see how me sending you our design and requirements solves this problem. We have several sites that need custom skins. I wish to understand it, by reading documentation or going through examples, rather than have someone else do the work.


If it isn't one thing, it's got to be another.
0
kmv
Top achievements
Rank 1
answered on 03 Apr 2009, 05:07 PM
 

superXRAY it isn't the graphics that set the size of the menu at all , thee sprites are used as backgrounds so just fill the size of the item, the size comes from the css and the size of the items inside the menu


telerik altough i like the sprite approach have you done any metrics on what performance difference it actually makes


and finally i look forward to the design tools, sprite map and css comments :-)


kevin
0
SuperXRAY
Top achievements
Rank 2
answered on 03 Apr 2009, 08:28 PM
kevin,

I know, but they do play a part in what size you can make the menu. It's just very frustrating when projects should take days, but instead take weeks when one has to factor in all the 'other' stuff that has to be done. I actually stripped out all the sprite usage, because I just simply need a flat menu. However, I have redone one sprite file for another project 75%.

0
Alex Gyoshev
Telerik team
answered on 06 Apr 2009, 04:01 PM
Hello guys,

We scheduled a review of the skinning documentation for this week. I'm going to update you with the results so that you can share your feedback.

@DJ: The line images have not been "spritified", true (in fact, the TreeView performs several hundred ms faster when there are no line images). I guess the reasoning behind this is getting old, so we're going to review that, too.

@kevin: The performance implications depend on the responsiveness of the server, but even if it's the most performant in the world, the number of requests is minimized significantly. I have no numbers that I can give you, but if you insist, we could do a peformance test (e.g. with the scheduler Q2.2008 release vs Q1.2009, oh, that will be fun).

Best wishes,
Alex
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
SuperXRAY
Top achievements
Rank 2
answered on 06 Apr 2009, 10:17 PM
Is this going to get answered? I have several unanswered questions in this thread, which you seem to so blatantly disregard, yet answer the other posters' questions.

Posting the PSD Sprite files is rather useless and...demeaning, to the original problems. Everyone that has the RadControls for ASP.NET AJAX Q1 2009 installed already has the PNG files. Stating that the menu performs much faster than not using sprites...I changed one of my menus over to separate files for each part of the menu, preloaded the images with JavaScript, and it is much faster than the Sunset-skinned RadMenu using a sprite.

Excuse my venting, but I get faster response times on the forums than I do for my paid subscription support.

Again, simple documentation would suffice.
0
Alex Gyoshev
Telerik team
answered on 07 Apr 2009, 11:11 AM
Hello SuperXRAY,

I am sorry for offending you through not answering.

> Speaking specifically of the RadMenu, is it pixel-based or does it look for the transition from colored pixels to transparency for the separation of the different parts of the sprite image?

The menu is pixel-based.

> In other words, how does one change the size of the RadMenu, since the sprite image is not vector based?

By specifying exact background-position in your custom skin; the base stylesheet provides background positioning that is convenient for the new lines of skins; if you decide not to stick with their dimensions, you can override them in any way you want.

> Sprites

The pre-loading with Javascript simply moves the loading delay of the images to another event. If you pre-load the sprite, the pre-loading process will be shorter. And comparing a skin with cached images to one without gives no accurate information. I'm attaching a test of the Sunset skin, with and without sprites, from localhost (request size shows 300% improvement). The request delays raise quite a but when accessing a remote server.

> Documentation

The psd files have named layers, each of which contain the specific parts of the skin. I've extrated these to an image, which you can find attached.

Best wishes,
Alex
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
-DJ-
Top achievements
Rank 1
answered on 07 Apr 2009, 11:29 AM

There is so much speed difference using sprites vs separate images that you can see it without even measuring it.

I think having menu-sprite-dissection.png like images available in each skin folder for each control wouldn't be a bad idea. This way you can get a clear and quick overview, and it should shorten the skinning time.

Regards,
-DJ-
0
Alex Gyoshev
Telerik team
answered on 07 Apr 2009, 11:58 AM
Hello Daniel,

And thank you :-) I guess we can create something a tad more professional for the documentation - this was hacked for about 5 minutes, just as an illustration. Surely, something like this will be one kind of documentation - do you guys need something else?

All the best,
Alex
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
SuperXRAY
Top achievements
Rank 2
answered on 09 Apr 2009, 07:47 PM
Alex,

The dissection image is exactly what I, not to speak for anyone else, was looking for. It is what I meant when I said "simple documentation". I'm sorry that something so simple seems to become such a big deal.

Thank you for posting the image. If it were up to me, I would immediately replace all the documentation for the RadMenu skinning with that image. :)
0
Dimo
Telerik team
answered on 10 Apr 2009, 08:06 AM
Hello SuperXRAY,

Thanks for sharing your opinion. Apart from dissection images, as my colleague said, we could also provide PSD files with the raw sprite images, which contain separator lines and labels describing the different images included (attached simple example for RadInput Forest)

What will be more useful for you - dissection images or PSDs with labelled layers ?

Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Stuart Hemming
Top achievements
Rank 2
answered on 10 Apr 2009, 09:46 AM
> What will be more useful for you - dissection images or PSDs with labelled layers ?
There can only really be one answer to that; and the answer is BOTH! :-)

--
Stuart
0
-DJ-
Top achievements
Rank 1
answered on 10 Apr 2009, 01:57 PM

The simplest way for all parties would be to include these dissection images in each controls image folder, just like you now include a screenshot of the control.

Speaking for myself, I don't really prefer creating new skins based on the psd files rather than just the sprite gif or png files.

Regards,
-DJ-
0
SuperXRAY
Top achievements
Rank 2
answered on 10 Apr 2009, 03:30 PM
I don't really understand the point of the PSD's. At least the one that I have, it is not PhotoShop objects, so they don't do anything different than the PNG's. What I mean is that one cannot use the PSD's except for looking at layers, which I don't often do because I need to make new skins, not modify existing ones. What you provided is perfect as far as that is concerned, because it describes what the parts of the sprite are.

What would help even more now is visually showing us how the CSS file ties to the sprite. I've pretty much figured that out for now, but I have bigger things to worry about and need to pass this type of work off to someone else, who doesn't understand it...and I don't have time to pay them to figure it out.
0
Dimo
Telerik team
answered on 10 Apr 2009, 03:56 PM
Hi SuperXRAY,

The PSDs are very helpful if yo want to modify the sprite. If you want to create new skins, actually neither PSDs, nor dissected images are of any use - you simply have to understand the concept of sprites.

Regards,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
-DJ-
Top achievements
Rank 1
answered on 10 Apr 2009, 04:29 PM

I don't see any reason why anyone would make a "new" skin in the meaning of starting with an empty css file and an empty sprite. Unless this person had something to prove?
I haven't made a new skin for any of the Q1 2009 controls that needs to have different dimensions than the original ones, that might be the only occasion that starting with an empty sprite could prove beneficial. Still don't think I would go that way.



However, it depends on the nature of the psd files how useful they are. If the layers are more or less merged with their effects embedded, you could just as well start with a png or a gif. The flat sprites do suffice for any decent designer I would think.

If however you have highlights and semi transparent gradients in separate layers it would obviously speed up the skinning for someone who just wanted to change the base colours etc.

So we always end up with the fact that the dissection images would prove helpful when you are first skinning a control, but in most cases you learn what goes where rather quickly.

Regards,
-DJ-
0
Dimo
Telerik team
answered on 13 Apr 2009, 09:11 AM
Hello -DJ-,

You are right, but there are different developers with different requirements, so starting a new skin from scratch is also possible.

Concerning our PSD's, their effects are generally not flattened (rasterized).

Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
SuperXRAY
Top achievements
Rank 2
answered on 13 Apr 2009, 04:58 PM
The PSD that I downloaded is flattened in PhotoShop CS3. I'd rather this thread not be hijacked into a debate about what graphic format to use for making sprite images. Using a PSD to make a PNG is pretty archaic in this day, but to each their own.

Dimo said:
---------------------------------
"The PSDs are very helpful if yo want to modify the sprite. If you want to create new skins, actually neither PSDs, nor dissected images are of any use - you simply have to understand the concept of sprites.

Regards,
Dimo
the Telerik team "
---------------------------------

My point exactly except that I should have been more specific. I created a vector-based PNG for this, resizing it to whatever I need to make it. The PNG posted describing the parts of the PNG does help, as it helps those to decode the CSS. I think much of what has been said is out of context of, at least, for what I was/am after; documentation that explains to someone that doesn't work on the Telerik Development Team how to modify the CSS and Sprites in combination to achieve their goal. It is nearly a mute point at this time.

Please make some kind of posting when there is documentation released.
0
Dimo
Telerik team
answered on 13 Apr 2009, 05:05 PM
Hi SuperXRAY,

We surely will.

Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Kim
Top achievements
Rank 1
answered on 15 May 2009, 09:37 PM
Thank you, thank you, thank you for the Sprite PSDs.  You should make the sprite psds part of the skin downloads.  It does take awhile to figure out what part of the sprite goes with the control however, having the sprite psds makes it soooo much easier to customize the skins!
0
Kim
Top achievements
Rank 1
answered on 15 May 2009, 10:44 PM
Would it be possible to get the sprites for the grid in psd format?

Thank you,
Kim
0
Dimo
Telerik team
answered on 16 May 2009, 06:10 AM
Hello Kim,

I am not sure what you mean by "skin downloads". We intend to upload the sprite PSDs at telerik.com/skins once they are ready for all controls. Adding them to the RadControls installers will increase too much the installers' size.

Please find attached the RadGrid PSDs for the Q1 2009 skins.

Best wishes,
Dimo
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.
0
Kim
Top achievements
Rank 1
answered on 01 Jun 2009, 08:27 PM
Thanks for the grid sprite psd.  It helped me out tremendously.

I now have a new issue.  I am customizing the treeview skin.  I am using your office2007 skin and changing the images.  I would like to use a bigger (taller and wider) plus and minus image.  I changed the sprite but I cannot for the life of me figure out how to change the css so that the larger image displays.  Currently my plus and minus images are getting chopped off on the right and bottom.  No where in the style sheet is there way to change the height or width or the sprite location.  In the previous version of the skins you could change the location of the image in the sprite and also the heigth and width.

My Pre 2009 Q1 Style Sheet looked like this...

.RadTreeView_Telerik .rtPlus,

.RadTreeView_Telerik .rtMinus

{

margin:4px 4px 0pt -21px;

width:18px;

height:18px;

}

.RadTreeView_Telerik .rtPlus

{

background: transparent url(TreeView/PlusMinus.gif) no-repeat 0 0;

}

.RadTreeView_Telerik .rtMinus

{

background: transparent url(TreeView/PlusMinus.gif) no-repeat 0 -18px;

}



Now all there is this:

.RadTreeView_Telerik

 

.rtPlus,

 

.RadTreeView_Telerik

 

.rtMinus

 

{

 

background-image: url('TreeView/PlusMinus.png');

 

}


I have tried adding a height and width to this style but it doesn't work.


i also noticed that there are several other images being referenced in all of treeview css files under the Node Lines section.  These images are not in the 2009 Q1 Release anywhere.

All of the images referenced below are missing:

.RadTreeView_Telerik

 

.rtLines .rtLI,

 

.RadTreeView_Telerik

 

.rtLines .rtFirst .rtUL { background-image: url('TreeView/NodeSpan.png'); }

 

.RadTreeView_Telerik_rtl

 

.rtLines .rtLI,

 

.RadTreeView_Telerik_rtl

 

.rtLines .rtFirst .rtUL { background-image:url('TreeView/NodeSpan_rtl.png'); }

 

.RadTreeView_Telerik

 

.rtLines .rtFirst,

 

.RadTreeView_Telerik

 

.rtLines .rtFirst .rtUL { background-image: url('TreeView/FirstNodeSpan.png'); }

 

.RadTreeView_Telerik_rtl

 

.rtLines .rtFirst,

 

.RadTreeView_Telerik_rtl

 

.rtLines .rtFirst .rtUL { background-image: url('TreeView/FirstNodeSpan_rtl.png'); }

 

.RadTreeView_Telerik

 

.rtLines .rtLast,

 

.RadTreeView_Telerik

 

.rtLines .rtLast .rtUL { background-image: none; }

 

.RadTreeView_Telerik

 

.rtLines .rtTop { background-image:url('TreeView/TopLine.png'); }

 

.RadTreeView_Telerik_rtl

 

.rtLines .rtTop { background-image:url('TreeView/TopLine_rtl.png'); }

 

.RadTreeView_Telerik

 

.rtLines .rtMid { background-image:url('TreeView/MiddleLine.png'); }

 

.RadTreeView_Telerik_rtl

 

.rtLines .rtMid { background-image:url('TreeView/MiddleLine_rtl.png'); }

 

.RadTreeView_Telerik

 

.rtLines .rtBot { background-image:url('TreeView/BottomLine.png'); }

 

.RadTreeView_Telerik_rtl

 

.rtLines .rtBot { background-image: url('TreeView/BottomLine_rtl.png'); }

 

.RadTreeView_Telerik

 

.rtLines .rtLast .rtTop { background-image:url('TreeView/SingleLine.png'); }

 

.RadTreeView_Telerik_rtl

 

.rtLines .rtLast .rtTop { background-image:url('TreeView/SingleLine_rtl.png'); }

Thank you,
Kim

 

0
Alex Gyoshev
Telerik team
answered on 02 Jun 2009, 08:32 AM
Hi Kim,

Regarding the first issue, I'm attaching a custom skin that shows which properties have to be edited.

Regarding the second issue - it was caused by our build scripts and is fixed already. The reason of the missing images is that they are now located in the ../Common/ folder (common for all skins) rather than in the /TreeView folder.

Regards,
Alex
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.
0
Kim
Top achievements
Rank 1
answered on 02 Jun 2009, 05:37 PM
I found the common file and found the images.

The code example you sent doesn't work.  I had already tried that.  The height and width does not get applied.  The position works but the right side and bottom of my plus and minus are getting chopped off.
0
Kim
Top achievements
Rank 1
answered on 02 Jun 2009, 06:28 PM
So after playing around a bit more with the style sheet I got it to work.  I had to actually set the width and height on each style...

.RadTreeView_Telerik

 

.rtPlus,

 

.RadTreeView_Telerik

 

.rtMinus

 

{

 

background-image: url('TreeView/PlusMinus.png');

 

}

div.RadTreeView_Telerik

 

.rtPlus,

 

div.RadTreeView_Telerik

 

.rtPlus:hover

 

{

 

width: 18px;

 

 

height: 18px;

 

 

background-position: 0 0;

 

}

div.RadTreeView_Telerik

 

.rtMinus,

 

div.RadTreeView_Telerik

 

.rtMinus:hover

 

{

 

width: 18px;

 

 

height: 18px;

 

 

background-position: 0 -18px;

 

}

Dosen't make sense to me since CSS is supposed to cascade.  But it works now.

Tags
General Discussions
Asked by
kmv
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
SuperXRAY
Top achievements
Rank 2
-DJ-
Top achievements
Rank 1
kmv
Top achievements
Rank 1
Dimo
Telerik team
Stuart Hemming
Top achievements
Rank 2
Kim
Top achievements
Rank 1
Share this question
or