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

Skinning the Controls???

2 Answers 63 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
a
Top achievements
Rank 1
a asked on 09 Jul 2008, 01:00 PM
Ok, so I just downloaded the new controls (2008 Q1). HOW DO I SKIN THEM???

In previous versions I could simply take an existing skin and copy it into my root "../RadControls/Skins/Panelbar" , then point the skin property in the control at that folder and everything worked just fine...  BUT in the new set of controls I can't figure this out. 

Here is what is needed.
1.) Telerik needs to provide step by step documentation on exactly how to do this.  I have read through the manual and its worthless.

2.) Telerik needs to provide an exmple application that focuses on Skinning.

Seriously guys, you can't expect everyone to just use the exact same skins/theme that are provided out of the box???


2 Answers, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 09 Jul 2008, 01:26 PM
Hello Jason,

We are certainly open to ideas on improving the documentation. Which topics have you reviewed? What do you find confusing? Have you seen the following articles:

How skins work

Skin registration

Modifying built-in skins

Creating a custom skin
 
?

The above resources are intended to guide developers in understanding how skinning works with Telerik controls and how to create and use custom skins or modify existing ones. If you have feedback on this matter, we will be happy to hear it.


All the best,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Stuart Hemming
Top achievements
Rank 2
answered on 09 Jul 2008, 02:17 PM
Hi there,

The first 2 articles that Peter has provided links for cover all of the salient points but they are spread over a a couple of documents, so let me summarize for you.

  • Create a folder for your skins. I use a folder called "Skins" but it's up to you.
  • Inside that folder create another folder named for the skin you're creating. You don't have to do this, but if you're going to find yourself creating more than one skin, or modifying more than one existing skin, this will help keep every thing simple.
  • Copy the skin you want to base yours on from the Skins folder of your installation directory.
  • Rename the files for your skin. Lets assume you've copied the "Default" skin and you plan to make a new one called "MySkin". All of the files will be named <control_name>.Default.css, you need to rename them to <control_name>.MySkin.css. There are lots of batch rename tools on the net to help you with this. Obviously, if you're just modifying the skin, but keeping the same name, you don't need to do this bit.
  • Edit the individual .css files to change the name of the class to reflect your new skin name. This is a simple search and replace task to be carried out using your favourite text editor. Just replace all instances of "Default" with "MySkin". Again, if you're just modifying an existing skin, you can skip this.
OK. Now you have the skin, all you need to do is add a link to the relevant .css files on your page.

If your page has the controls hard coded, then your job is easy, all you have to do is add a <link> tag inside the <head> section pointing to the .css file for each control you're using.

If you're adding the controls programmatically, you just need to make sure that you add the <links> too. I have a bit of code that I include in all of my pages for this that looks a bit like this ...
PageHelper.RegisterCss(Page.Header, Skin, "Splitter"); 
Where the called method looks like this ...
    static public void RegisterCss(HtmlHead Header, String SkinName, string ControlName) { 
      HtmlLink link = new HtmlLink(); 
      link.Href = String.Format("~/Styles/Skins/{0}/{1}.{0}.css", SkinName, ControlName); 
      link.Attributes.Add("type""text/css"); 
      link.Attributes.Add("rel""stylesheet"); 
      Header.Controls.Add(link); 
    } 
I hope this makes things a little clearer for you.

Tags
General Discussions
Asked by
a
Top achievements
Rank 1
Answers by
Peter
Telerik team
Stuart Hemming
Top achievements
Rank 2
Share this question
or