Best approach to use custom skins & embedded skins together

[Bryan]

Hi,

 

So I am upgrading the UI of an old product that has a combination of Webcontrols and Web.UI controls. I plan to bring the older controls up to date but need to keep support and CSS for the older controls in place. 

The older controls use a combination of skins and lots of bad css. 

I will be using theme builder to create a custom skin and using lightweight rendering and EnableEmbeddedSkins="False" for new controls. 

I have done one control so far and I am getting issues with the embedded skins overwriting my new skin using the WebResources.axd

I know I can use important to override but that's a very bad approach, especially on a large project... Is there a good approach to increase the specificity for the new skin files so all their properties are applied over the existing base properties where applicable.

I was thinking of using an ID to prefix all new skin selectors with and wrapping each updated control  in a div of that id.. not 100% this is a good approach though.

eg..

#newControls .RadGrid_MyMetro{ ... }

 

and then give updated controls a div wrapped around it with ID="newControls" or something like that.

1. will this work throughout the project

2. Are there better approaches?

 

Thanks

[Magdalena]

Hi Bryan,

Custom styles are loaded before our inbuilt styles by default. For that reason your custom styles are overwritten by inbuilt styles. If you would like to change an order of applying CSS files, you can refer these styles in RadStyleSheetManager and set OrderIndex property to StyleSheetReference.

Regards,
Magdalena
Telerik by Progress

[Rayne]

Why is that the default? Doesn't that defeat the purpose of applying a custom skin? I don't understand.

[Magdalena]

Hello Rayne,

Our inbuilt skins are referred dynamically depend on the used controls and skin so applying our inbuilt styles as last is expected. Setting the OrderIndex property does not make applying custom styles difficult.

The other option is to add a "html" forward to all selectors in the custom theme to make them stronger. This can be achieved simple by replacing the string ".Rad" with "html .Rad".

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik by Progress