New Embedded Skin

[colt]

I am trying to create a new skin for our development shop. What I have done so far is copy a skin from the \RadControls for ASPNET AJAX Q1 2008\Skins folder - vista in this case - and renamed it and all of the other instances of vista with MySkin. When I try to access this skin I get this error

"Telerik.Web.UI.RadWindowManager with ID='RadWindowManager1' was unable to find embedded skin with name 'MySkin'. Please, make sure that you spelled the skin name correctly, or if you want to use a custom skin, set EnableEmbeddedSkins=false."

I want to be able to type skin="MySkin" on my WindowManager. I have been looking for an extended period of time for any documentation or examples on this even searching the example solution that comes with the controls with no results.

Where do I match up the folders in the skin with embedded skin. It is like the "Hay" skin in the example project.

Please help.

[Sophy]

Hi Colt,

You can find detailed information about modifying built-in skins and creating custom skins in articles from the Controlling Visual Appearance section of the online documentation. I suggest you take a look at the Modifying built-in skins help article which contains a step by step explanation of what you need to do in order to use your own skin. For your convenience I have attached an example which demonstrates how to use custom skin.

If you need further assistance, do contact us again.

Kind regards,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[colt]

The problem is that I am re-skinning everything with several skins. Which means upwords of around 46 style sheets per skin. I know that we probably will not be using 46 style sheets per page but I don't want to have to deal with them at all. I am really looking to be able to add a new embedded skin so that we don't have to worry about style sheet management. We will have several developers working on these pages and the easier the process the better.

If this is a possibility I want to go in this direction. I would like the automatic registration.

Thanks for your help.

[Tervel]

Hello colt,

It is not possible to add a new embedded skin to the Telerik.Web.UI dll - .NET provides no mechanism for modifying and adding resources to dlls.

This is why, in case you wish to have a new skin for any Telerik control, it has to be loaded from an external location, and cannot be a part of the dll. The process of creating a custom skin and accessing it is well-documented in the articles that were provided in our previous answer. Our suggestion is to follow the steps outline there - as this is the only approach that will work.

Best regards,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Stuart Hemming]

Hi guys,

Pardon me for butting in, but Colt, why not embed your CSS resources in a DLL of you own? Add in a static class to register the relevant resource on your page and the job's a good 'un.

Or have I missed an essential point here? Possibly, I suppose, I was just wandering past and heard you talking.

--
Stuart

[colt]

Stuart,

This sounds like it may work well,

The initial problem was that I wanted the easiest possible way to allow our group to code in the skins as we will be dealing with a lot of them, we are creating custom themes that the end users can choose from, so each page may be dealing with over a  hundred style sheets depending on how we deal with the dynamic creation.

It doesn't sound like binding them into the controls themselves is an option that Telerik wants me to take.

So creating a few dll's will take care of our css declarations and management. Just as long as I understand correctly the way the style sheet works.

When I give a skin name (ie skin) Skin = "skin" then when the elements are generatated the Skin name is used in the naming of the elements, so that the element has a class of    ".radwindow_skin" and _skin changes based on what skin I declare in the skin attribute of the radwindow or any other control.

is this how it works?

does this mean that I can name the stylesheet anything, or do I also need the Window.skin.css?
Can I combine all the stylesheets into one big style sheet or do I need the Window. , TreeView. , ect.?

[Shaun Peet]

To answer your last couple of questions,

Yes, you can name your stylesheet anything, and yes everything can be in a single stylesheet.  So long as that stylesheet is being loaded into the page in any way, those css definitions will be picked up by the controls that need them.

So, essentially you'll always set EnableEmbeddedSkins to false and give the skin a name that coincides with the definitions in the stylesheet.

What this also means is you can create a way to dynamically create your stylesheet (using an aspx page to send back a css file) for each page, using common or default settings for the css definitions where possible and overriding where needed.  If you want to get really creative, you could create classes for each of the telerik controls with properties that define every possible css definition.  So you could use:

RadGrid.TableCellCss = "background: #333; color: #fff;"

Which would spit out in the dynamically created css file...

.radgrid_myskin td{ background: #333; color: #fff; }

The advantage of this method is that you could define a global property, say, the font style, and re-use it for several different controls:

Dim strFont As String = "font-family: verdana; font-size: 1.1em; font-weight: bold;"
RadGrid.TableCss = "background: #555; " & strFont
RadMenu.UlCss = "background: #111; " & strFont

Of course, for this to work you'll need to have a very good understanding of the actual html that is emitted for each control.  I know this may sound like a ton of work, but it sounds like given the complexity of what you're trying to do it might be the best way for the long term.

Hope that helps,

Shaun.

[Stuart Hemming]

Colt,

It seems you've pretty much got the hang of the basic mechanics of how it works.

You should see Shaun's post too.

I have to say, I wouldn't have thought of Shaun's idea of creating classes to generate the CSS for each control/skin but that's 'cos the skin classes change and without ANY notification from teleik. I think it's easier to keep on top of what's going on under the hood using a diff tool on CSS files between versions, of course, YMMV.

As for the single CSS file question, you can do it that way if you want, but as I understand it, just putting a RadStyleSheetManager on your page does the work for you.

Good luck with your project.

--
Stuart

[Shaun Peet]

Hi Stuart,

I agree that occasionally the css classes can be changed by Telerik (far less possible going forward than in the past few monts), but think about the two options in Colt's case:

1) You have hundreds of skins that are using hundreds of "hard-coded" stylesheets.  If a css class changes you have to do a find and replace in those hundreds of files.

2) You have a single dynamic style sheet that generates all of the needed css classes using properties that are set dynamically.  The css class names are hard coded and the settings are dynamic.  All you need to do is change the class name in your custom class and it automatically will affect the hundreds of skins.

IMO option 2 is far easier to maintain even if there are drastic changes to the css class definitions in the controls - we just need to make sure Telerik lets us know if / when those changes are made.

Incidentally, I've put this into practice where I created several custom "StyleBuilder" classes where every possible css setting was available via a property; for example, I'm able to use something like:

element = StyleBuilder.GetDefinition("body")
element.Background.Color = "#fff"
element.Layout.Overflow = StyleBuilder.OverflowSettings.Visible

You can see the results of this here:

http://demo.mbsportsweb.ca/domains/demo.mbsportsweb.ca/styles.aspx

Hint: At the very bottom of that generated file there are some RadMenu settings ;)

Shaun.

[Stuart Hemming]

Shaun,

Thanks for the pointer; I'll check it out.

--
Stuart

[Shaun Peet]

I also wanted to add, just in case it wasn't already obvious, that using this method allows for much easier use of common / global style settings for non-Telerik css definitions as well.  So you can set your global font as a variable and use it for the body tag, as well as within all the Telerik controls, etc, etc.

This may actually make for a pretty good open source community-driven project.  I've got a good portion of the work completed already, although I'm sure a more experienced developer can make it even better.  What do you think Stuart & Colt, any interest?

[Stuart Hemming]

I also wanted to add, just in case it wasn't already obvious, that using this method allows for much easier use of common / global style settings for non-Telerik css definitions as well.
The mechanism I'm using allows this too, although mine is simply and extension of the telerik one.

This may actually make for a pretty good open source community-driven project.  ... What do you think Stuart & Colt, any interest?
Sure, why not.