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

is there a newer version of Tutorial: Creating A Custom Skin?

7 Answers 106 Views

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

7 Answers, 1 is accepted

answered on 15 Aug 2010, 02:08 PM

Because it doesn't work very well. I have found that it works "sometimes" and with "some" controls. Others? Not so well. For example, if I wanted to edit the background of the RadMenu using that tool (vs. raw CSS) it just doesn't render the settings I'm entering-- but if I change them in raw CSS-- voila! try this:

Go to the URL you provided
Select "New Skin"
Select ASP.NET AJAX (the default selection)
Enter "TestSkin1" for the name
Use "Default" as the base skin selection
Select the RadMenu control (only that control)
Click Create
Select the "Fine Tune" tab
When the menu displays, click on "Expandable/Expanded"
On the bottom area, change the Position value from -216px to -200px and press tab
Click on the "Expanded (outer wrapper)" tab
Click on the "Expandable (only inner)" tab
Change that same value back from -200px to -216px

Note how the menu DOES NOT restore its appearance to what was rendered on load (since you just changed it back to load time values). Like I said before-- that tool is hit and miss. Especially when you change browsers.

Anyhoo, I solved my problem using raw CSS.

However, to anyone trying to learn Telerik components and skins (I've been using them for 7+ years), I highly recommend you use that tool as a learning tool. how? Simple. Load up the CSS/Skin/graphics on your local machine, then go to the online tool on another screen and tune the values you want to work with. Then download the Zip file and use a tool like CompareIt to compare the differences between the two files. Like this you can learn what you need to change without having to be connected to the internet everytime.

Oh, and Telerik, if you're listening, what would make that tool really cool is if you could click on elements, identify the value you wish to change (e.g., expand arrows, like in the above steps) and then highlight where in the CSS file we need to make the change. Like this, you show us on screen what to change, we get to change it in VS and we learn how to be self sufficient all at the same time. This saves the steps of packaging, downloading, unzipping and copying to directories as well.

answered on 19 Aug 2010, 07:39 AM

Hello Stuart, R S,

Indeed, the steps that R described do not restore the look of the skin. And this is because the generated background-position overrides the one from the skin, because you have set it. And since the main idea behind CSS is to create cascading styles, the values that you apply get propagated to the other items.

If you don't want to save your modifications, don't go back and revert them, just click the "load last save" link.

Regards,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 19 Sep 2010, 10:05 PM

Alex: That's the long way of saying "the GUI does not work as expected." Thanks. Please note that I only gave one use case where the Style Builder does not work-- I've experienced other instances like this one. Bottom line: your GUI is not doing what the user is asking of it, regardless of whether the reason is CSS or bad Telerik code. The GUI should be completing the user request or providing feedback of the reason why it cannot.

Stuart: If they were awarding points for reported bugs, maybe. And even then, the reward would need to be worth my time. Besides, I've been using their stuff long enough to know that their people monitor these boards and they'll find out about it anyway.