Css At end of HEAD Tag

4 posts, 0 answers
  1. Pascal
    Pascal avatar
    8 posts
    Member since:
    Jan 2010

    Posted 02 Nov 2010 Link to this post

    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:
    <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>
    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
  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 05 Nov 2010 Link to this post

    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
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pascal
    Pascal avatar
    8 posts
    Member since:
    Jan 2010

    Posted 05 Nov 2010 Link to this post

    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.

  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 Nov 2010 Link to this post

    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
    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
Back to Top