Is it possible to use .NET themes with RadStyleSheetManager?
When I use a RadStyleSheetManager to combine my external stylesheets, it places the WebResource file AFTER the .NET themes stylesheet in the Head tag, with the result that the theme I'm trying to apply from the App_Themes folder is overridden by the base styles in the external stylesheets combined by the Telerik control. As in:
<head>
<link href="../App_Themes/Demo_Theme/Demo_Theme.css" type="text/css" rel="stylesheet">
<link href="/QReg/Telerik.Web.UI.WebResource.axd?d=PMrIT5dOWaVYIcpFWUE4nL08EMI2VcWAw0rknd-hZDTwvbi5j9SontBAefw4vSph5ju3TcQNZ2u3pCuQ6PYF0RLbspBmxlwTBIWwYaZtNs3fJnQ30&t=635918753441826527&compress=1&_TSM_CombinedScripts_=%3b%3b%7c635941629785528787%3ab27e5558%3a59f3f810%3a95dff68a%3a74ee2317%3a6cdcd2e9%3a6581de0b%3a88af4fc4" type="text/css" rel="stylesheet">
</head>
Is there a way to get the StyleSheetManager to place its webresource file before the .NET themes file?
Thanks
3 Answers, 1 is accepted
Hello Edward,
When combining our build-in skins and external custom styles, our RadStyleSheetManager always places the skins file after the custom styles. If you want to avoid this issue, you could do one of the following:
- In case that your custom styles depend on one of the predefined skins, you should make sure that the selectors you are using in your custom CSS are stronger than those used in our skin implementation;
- In case you don't depend on our built-in skins, you could simply disable them;
Regards,
Veselin TsvetanovTelerik
Rank 1
Hi Veselin,
In that case, I think it is probably better I don't use RadStyleSheetManager. The issue is more to do with the relationship between my own style sheets and the stylesheet within the .NET themes folder, which overrides some of the classes in the former style sheets. If .NET themes always places its stylesheet before the WebResource file the RadStyleSheetManager creates, it is placing it before my custom stylesheets that your control is managing. I already have the !important keyword against some of those styles in the base custom stylesheets, since they need to override some of the Telerik skins. Those properties can't be overridden in the theme stylesheet, therefore, unless I remove them from the base style sheets, but I'm trying to keep the theme stylesheet as minimal as possible for the end designer.
Maybe I'm not seeing that clearly, but that seems to be the case.
As far as I can understand, you have the following scenario:
- In your implementation you use one or more of the Telerik built-in skins;
- You have custom base stylesheet, that you include in the RadStyleSheetManager;
- You also have different themes, based on the above, that you are not including in the RadStyleSheetManager;
If the problem is that you want to load your custom base stylesheet before the specific theme stylesheet, you could do one of the following:
- You could include both the above stylesheets in the RadStyleSheetManager and you can use the OrderIndex property of the StyleSheetReference;
- You could manually add both stylesheets to your page without using RadStyleSheetManager.
Keep in mind that in both cases if not disabled, our skins will be the last to be loaded. There is one more thing. Generally, using the !important directive is not a recommended approach. In most cases, our skin styles can be overridden using stronger CSS selectors.
Regards,
Veselin Tsvetanov
Telerik