Using the StyleSheetManager with overridden css files for a built-in skin

[DonKitchen]

I am wondering what I need to do to have my 4 overridden CSS files for the built in Web20 skin be picked up by the RadStyleSheetManager control. 

For example, I have put 4 CSS files in my site's skin folder (Combobox.Web20.css, Grid.Web20.css, Menu.Web20.css and TabStrip.Web20.css).  For each of those controls I have set the EnableEmbeddedSkins="false" property so that the site by default uses my modified versions rather than the built-in ones.  (by the way, in case it matters, I am defining my skin in the web.config file via the <add key="Telerik.Skin" value="Web20" /> key in my AppSettings)

I've read the information in Including custom StyleSheets as WebResources to RadStyleSheetManager and from what I can tell that seems to apply more if you're using a complete custom skin vs. overridding a few of the controls like I am.  Can you tell me if I should follow the instructions in the above link to get these 4 files included in my other single request or if there is some other way to handle this?

Thanks in advance!

[Atanas Korchev]

Hello DonKitchen,

RadStyleSheetManager does not combine static (external) resources. It can combine only embedded ones.

Best wishes,
Albert
the Telerik team

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

[DonKitchen]

I gathered that based on the online support example.  My question is more along the lines of can those static "override" style sheets get put into an external resource like the online help example and still operate properly with the built-in Web20 skin?

[Atanas Korchev]

Hello DonKitchen,

To override a skin CSS rule you should make sure that:

1. Your CSS file is rendered in the page and the path is correct
2. The CSS rules in your file are more specific than the one used by the built-in skin. You can use the !important modifier to force your CSS setting to override the built-in one. You can check this help article for additional information.

Regards,
Albert
the Telerik team

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

[DonKitchen]

Thanks but I don't think that you addressed my question still.

Can I take my 4 override css files:

• Combobox.Web20.css

• Grid.Web20.css

• Menu.Web20.css

• TabStrip.Web20.css

and put them into my own custom assembly (as described here http://www.telerik.com/help/aspnet-ajax/radstylesheetmanager.html under

Including custom StyleSheets as WebResources to RadStyleSheetManager

and have them still work fine with the built-in skin that I'm using now?

I would be moving them OUT of the App_Themes folder and into the custom assembly.  Is that going to work since they're Web20 skin style sheets?

[Dimo]

Hi Don,

Yes, your customized Web20 skins will work if you register them with RadStyleSheetManager.

However, in order to prevent RadControls from registering automatically their native embedded Web20 skin, you should set EnableEmbeddedSkins="false".

On a side note, using custom skins with the same name as native embedded skins is not very recommended, as it might lead to CSS collisions and unexpected visual appearance (for example if you use a customized and a native Web20 skin on the same page). This might happen in specific scenarios only, but you should keep in ti mind in case something "strange" happens.

Best wishes,
Dimo
the Telerik team

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

[DonKitchen]

Is it possible for me to put the contents of these 4 files that I've created to override the built-in Web20 functionality (with EnableEmbeddedSkins="false") into my site's main CSS file (Default.css) and have it all still work?

• Combobox.Web20.css

• Grid.Web20.css

• Menu.Web20.css

• TabStrip.Web20.css

My ultimate goal is to have as few HTTP requests as possible.  And since I'm already serving up my Default.css file, which can't be included in the StyleSheetManager's request I could possibly accomplish the same end result if those 4 files' contents get consolidated into my other style sheet.

[Dimo]

Hello Don,

Yes, this is possible. However, since embedded skins are registered after non-embedded skins, you will have to make sure that your custom CSS selectors have higher specificity than the embedded CSS rules' selectors. Here is why:

http://blogs.telerik.com/dimodimov/posts/08-06-17/How_To_Override_Styles_in_a_RadControl_for_ASP_NET_AJAX_Embedded_Skin.aspx


Greetings,
Dimo
the Telerik team

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

[DonKitchen]

If that's the case what's the point of the EnableEmbeddedSkins="false" property?

[Dimo]

Hi Don,

EnableEmbeddedSkins="false" allows you to use a fully custom skin for a RadControl and register it in a preferred fashion. This makes things a lot easier and convenient for advanced CSS developers. Otherwise you have to override an embedded skin, which is not very ellegant if you do it a lot.

Sincerely yours,
Dimo
the Telerik team

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

[Chris]

Question, in order to have a fully customized skin, do I need to add all the skin files to an assembly and changes the names?  I'm not sure if there is a "macro" or other automated method of creating a "skin assembly" or do you have to all all the assembly attributes for all 60+ files by hand?

[Dimo]

Hello Chris,

No, it is not required to have all the custom skin's CSS and images embedded in an assembly, although there certainly are advantages if you do it that way.

The most common scenario when using custom skins is to place the CSS files and images in a folder of your preference and register the CSS files manually with <link> tags. A lot of people also place the custom skins in ASP.NET themes:

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

I am afraid there is no automated method of adding embedded file references to a C# / VB file.

Let us know if you need more information.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Chris]

I wanted my custom skin to be able to take advantage of the RadStyleSheetManager script combining feature.  I understand it has to all be in an assembly for that to work..

BTW, I wrote a VS macro to add all the css the image files as embedded resources and add the WebResources attributes as well.