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

[steven]

http://www.telerik.com/help/aspnet-ajax/menu_appearancecreatingacustomskin.html

the above link point to a "Tutorial: Creating A Custom Skin", but that is based on your older version of controls. your newer version is using "rmSprite.png" and no longer use "Menu|MenuBackGround.gif" etc and css structure seems to change a lot becuase I can't find the nodes that are mentioned in the above tutorial.  This makes the above tutorial almost useless.  Is there a newer version?  where is it?  Thanks.

[Peter]

Hello steven,

We have scheduled for Q1 2010 to update the skins' documentation for all ASP.NET AJAX RadControls. Currently, we don't have a newer version of the topic you refer to.

Greetings,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[R]

Hello-

I'm using version Q1 2010 and have the same problem-- has this topic been updated yet, or is there an online version of it somewhere?

Reuben

[Stuart Hemming]

Guys, have you considered using the Visual Style Builder to work on your skin?

-- 
Stuart

[R]

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:

1. Go to the URL you provided

2. Select "New Skin"
3. Select ASP.NET AJAX (the default selection)
4. Enter "TestSkin1" for the name
5. Use "Default" as the base skin selection
6. Select the RadMenu control (only that control)
7. Click Create
8. Select the "Fine Tune" tab
9. When the menu displays, click on "Expandable/Expanded"
10. On the bottom area, change the Position value from -216px to -200px and press tab
11. Click on the "Expanded (outer wrapper)" tab
12. Click on the "Expandable (only inner)" tab
13. 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.

[Stuart Hemming]

R,

I can see what it is you are saying about the UI not updating. Have you reported this to telerik? They can't fix what they don't know about.

-- 
Stuart

[Alex Gyoshev]

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

[R]

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.