Hi,
I have the following situation.
I've made a customized Telerik Skin called GUSkin.
I build it to have a final DLL containing all css and images for using it with RadStyleSheetManager (so I can compress them ;-P).
I let my developper do their own css changes by using the classic ASP theme technique.
Here the problem.
The final code of my skin override the css defined in the ASP Theme folder because the RadStyleSheetManager puts the reference to my customized skin at the end of the head tag of my page:
So when a developper need to change for exemple the border color of a asp:TextBox the RadFormDecorator included in the Skin override the code in Themes CSS.
Is there a way to put Theme css at end of head tag after the telerik one?
Thanks in advance for helping! Your support is great!
Pascal
I have the following situation.
I've made a customized Telerik Skin called GUSkin.
I build it to have a final DLL containing all css and images for using it with RadStyleSheetManager (so I can compress them ;-P).
I let my developper do their own css changes by using the classic ASP theme technique.
Here the problem.
The final code of my skin override the css defined in the ASP Theme folder because the RadStyleSheetManager puts the reference to my customized skin at the end of the head tag of my page:
<head> <link rel="stylesheet" type="text/css" href="../../App_Themes/GuSkin/GU.css"> <link rel="stylesheet" type="text/css" href="../../App_Themes/GuSkin/GUIE.css"> <link rel="stylesheet" type="text/css" href="../../App_Themes/GuSkin/guPrestation.css"> <title>Title</title> <meta content="no-cache" http-equiv="Pragma"> <meta content="-1" http-equiv="Expires"> <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"> <style type="text/css"> /* FIX FOR IE 8 Font inconsistency*/ .RadForm .riTextBox { font-family: "Segoe UI", Arial, Helvetica, sans-serif !important; } </style> <link rel="stylesheet" type="text/css" href="/mysite/Telerik.Web.UI.WebResource.axd?compress=1&_TSM_CombinedScripts_=%3b%3bGuTelerikSkins%3afr-CH%3aebb84cb8-7274-41c6-ae46-f01325da7dfd%3a342f89e1%3ab5feda7d%3ac6c2ea7f%3a13647808%3a696827c7%3bTelerik.Web.UI%2c+Version%3d2010.2.713.40%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3afr-CH%3a1814ab69-dbf3-46be-b5e4-1b4e7d85f183%3aef4a543%3aed2942d4%3aaac1aeb7%3ac73cf106%3ac86a4a06%3a4c651af2%3a1c2121e%3ae24b8e95%3a9e1572d6%3a8cee9284%3aed057d30%3aa3b7d93f%3ab2b77c33%3a5c10e89c%3a4d471440%3a169db17e%3a1f65231b%3a7f7626a2%3a92753c09%3a91f742eb"></head>Is there a way to put Theme css at end of head tag after the telerik one?
Thanks in advance for helping! Your support is great!
Pascal
3 Answers, 1 is accepted
0
Hello Pascal Golay,
The issue here is that as long as the selectors in the assembly are stronger than those of the theme the location of the <link> element will not change anything - the embedded styles will still override those in the theme.
The best way to resolve this is to make sure the theme selectors are the strongest ones. (The same situation exists with our controls as well.)
You can read more about CSS specificity here if you are interested.
All the best,
Simon
the Telerik team
The issue here is that as long as the selectors in the assembly are stronger than those of the theme the location of the <link> element will not change anything - the embedded styles will still override those in the theme.
The best way to resolve this is to make sure the theme selectors are the strongest ones. (The same situation exists with our controls as well.)
You can read more about CSS specificity here if you are interested.
All the best,
Simon
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
Pascal
Top achievements
Rank 1
Rank 1
answered on 05 Nov 2010, 02:20 PM
I'm not sure you understand my problem.
In fact often the specificity is the same in css theme sheets and in telerik css sheet combined by the stylesheetmanager.
So if the css sheet combined by the ssm is at end it will override a rule in my theme stylesheet if it's at the same specificity.
That's why I'd like to put the <Link> tag generated by the ssm at right place (before css theme stylesheets links).
You can see in attached file that a input text box wherer cssClass is defined to add .test class is always overriden.
In fact often the specificity is the same in css theme sheets and in telerik css sheet combined by the stylesheetmanager.
So if the css sheet combined by the ssm is at end it will override a rule in my theme stylesheet if it's at the same specificity.
That's why I'd like to put the <Link> tag generated by the ssm at right place (before css theme stylesheets links).
You can see in attached file that a input text box wherer cssClass is defined to add .test class is always overriden.
0
Hello Pascal,
If I correctly understand from your screenshot, your sample CSS selector has only one class in it, which equals to specificity of 10. The RadInput selectors that override yours - html body .RadInput .riTextBox and html body .RadInput_Default .riTextBox each contain 2 classes and 2 elements with the specificity sum of 22 which will override your selector whether it is put before or after them. We can't change this behavior since it is how CSS works. Please make your selector specificity higher, for instance like this:
html body form .RadInput .test
{
border: 2px solid #FF0000;
}
and it will work.
Best wishes,
Kamen Bundev
the Telerik team
If I correctly understand from your screenshot, your sample CSS selector has only one class in it, which equals to specificity of 10. The RadInput selectors that override yours - html body .RadInput .riTextBox and html body .RadInput_Default .riTextBox each contain 2 classes and 2 elements with the specificity sum of 22 which will override your selector whether it is put before or after them. We can't change this behavior since it is how CSS works. Please make your selector specificity higher, for instance like this:
html body form .RadInput .test
{
border: 2px solid #FF0000;
}
and it will work.
Best wishes,
Kamen Bundev
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items