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

RadControl Sprite List for skining

8 Answers 107 Views

General Discussions

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

8 Answers, 1 is accepted

Accepted

answered on 28 Nov 2011, 09:11 AM

Hello Adrian,

In Telerik Help Documentation there are skinning tutorial for each Telerik control explaining in details the steps to create a custom skin. In the left navigation click RadControls and all possible controls will be shown. Nxt you should choose the control you want to skin, e.g. RadButton - click on it and you`ll find several sub menu options. Under Appearance and Styling you will find Create a Custom Skin for RadButton tutorial.

A very good option to create custom skins is to use Telerik Visual Style Builder. Just apply your preferred colors, and it will generate for you the custom sprites and CSS just for a few mintues. Once you have it, you could change by hand some CSS colors etc. It is really time consuming and could save you hours. For example, an Editor skin could take you more than a half day, while using the style builder will take you 10 minutes.

Meet the Visual Style Builder will give the steps to use it, there is also a video tutorial to make things more clear.

Kind regards,
Bozhidar
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 30 Nov 2011, 01:46 AM

Hi Bozhidar,

Thanks for the insightful reply, another question. when refering to the documentation site given previously i stumble upon this link http://www.telerik.com/help/aspnet-ajax/grid-appearance-css-sprites.html, it discus the usage of image sprite and positioning each using x/y coordinate relative to a given sprite. is there a way to directly acquire the SpirteButton image that telerik is currently using by default? while the designer would directly replace each given sprite to the button that we would to be using for our development, thus reusing the default css without having to tinker much around the X/Y coordinates.

Best Regards,
Eng

answered on 30 Nov 2011, 08:53 AM

Hello Adrian Eng Ying Ming,

I`m not sure what exactly you would like to do. If you are using any of the embedded skins, you could create a new sprite, but with exactly the same positions of the elements in it and you could just override the url path to it, then you will have an embedded skin with overridden sprite, which will change a bit the look and feel.

If you create a custom skin, the situation is similar - in most cases you only need to edit the sprite and the skin specific CSS - as long as you just colorize the sprite the X and Y positions will not affect you in a wrong way. However, if you wat to change the element positions and/or their sizes, it will be necessary to edit the controls base stylesheet also. In the base stylesheet are set all positions, margins, width, height etc. that are common for all skins. So if you change in the sprite some arrow for example from 16x16 to 24x24 pixels it will be necessary to edit the base size of the arrow and it`s X and Y positions also.

Regards,
Bozhidar
the Telerik team

answered on 03 Dec 2011, 02:57 AM

Hi Bozhidar,

Sorry for the confusion. :(

I`m not sure what exactly you would like to do. If you are using any of the embedded skins, you could create a new sprite, but with exactly the same positions of the elements in it and you could just override the url path to it, then you will have an embedded skin with overridden sprite, which will change a bit the look and feel.

This is what im trying to achieve, but however, im wondering, is there a repository where i can acquire the list of sprites? so that the designer can easily replace them with ease. With the above said method, all i have to do is acquire the sprite, change the sprite image (without altering the dimension) it is still possible to reuse back the same CSS?

Best regards,
Eng

Accepted

answered on 05 Dec 2011, 01:25 PM

Hello Adrian Eng Ying Ming,

Currently, we do not have such repository. You could, however, browse the demos as their images have static paths and you can acquire human readable names for the files.

After you have acquired and modified the images color wise, you need to specify the new images with the a similar to the following snippet:

html RadControl_SkinName .subSelector {

background-image: url("/path/to/modified/image.png");

}

Where RadControl is the control you use, Skin name is obviously the skin and .subSelector is the selector you want to modify. Note that the selector might be two level deep.

Alos, that "html " prefix is needed to override the image; and finally, you need to specify the background-image only, if you want to reuse the original background positions.

Let me know if you need help with something else.

Regards,
Ivan Zhekov
the Telerik team

answered on 06 Dec 2011, 04:22 PM

Hi Ivan Zhekov,

What would be the best approach on skinning the telerik control? Generally we are not looking into overly heavy customzing the entier look any feel, only minor color alteration and button image changes [which is why i am reluctant to use the visual builder, as it seems to be best suited for people who would want to built it entirely from scratch]
1) Acquire the spirte image from the demo (i am still yet to identify where to acquire them for each control, as per you stated there is no such repository but it is required for me to acquire them from the demo site?THIS
2) Acquire a sample css [as per the above link] and only apply the alteration that i see fit?

is the above way, the less hassle way of tinkering with the general look and feel of telerik control, while still retain some of telerik them/skin look and feel? Your suggestion is warmly welcome!

best regards,
Eng

Accepted