CSS from Telerik.Web.UI.WebResource.axd is overriding CSS for custom skin

11 posts, 1 answers
  1. Xhrei
    Xhrei avatar
    5 posts
    Member since:
    Jul 2008

    Posted 16 Nov 2009 Link to this post

    Hello,

    I'm having a problem with custom skins for most controls (only confirmed this with combobox and input so far) - the css I specify for them are being overridden by css from the WebResource.

    May I know what things I might have done wrong / things I might be missing?

    Please see attached - screenshot of IE8 dev toolbar showing the styles overridden.

    Thanks!
    ~xhrei
  3. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Nov 2009 Link to this post

    Hi Xhrei,

    What I can suggest is this case is to try whether putting the keyword !important for the overridden settings changes the behavior. This approach is used to provide a higher priority to your custom settings so that they cannot get overridden by the default embedded settings. More information about this keyword is available below:

    http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

    Regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Xhrei
    Xhrei avatar
    5 posts
    Member since:
    Jul 2008

    Posted 16 Nov 2009 Link to this post

    Hi ,

    Thanks for that,

    Actually, !important is what I've been using so far to get our custom skins to work. I was just wondering - is that really good practice? Should the default WebResource CSS really override the custom CSS? Or is that just the way it works for some reason?
  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 17 Nov 2009 Link to this post

    Hi Xhrei,

    Actually, to apply your CSS instead of the embedded one you should give it higher priority. Indeed, teh !important keyword does this but you are correct that it is not the best solution in all cases. I suggest to examien the following resource where you can find more detailed information on how the embedded skins work and for other manners to give a higher priority to your custom CSS:

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

    Best wishes,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  9. Xhrei
    Xhrei avatar
    5 posts
    Member since:
    Jul 2008

    Posted 17 Nov 2009 Link to this post

    Thank you for that,

    At least I could do something other than use !important as a workaround for now...

    But just to confirm, these are technically just workarounds, aren't they? According to the article in the link you gave me - "the embedded skins are always applied last by the browser." So it really is a limitation of the RadControls that we have to do all this to give custom CSS higher priority over the embedded CSS? Shouldn't the custom CSS get higher priority over embedded CSS by default? Or was it implemented this way for some reason?

    Another thing is that we didn't have this problem in an older version of the controls.. (Currently upgrading from Q3 2008 to Q3 2009)
  11. Answer
    Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 18 Nov 2009 Link to this post

    Hello Xhrei,

    The CSS file registrations for the RadControls' embedded skins are appended to the page header in the Render stage, that's why they come after the other CSS file registrations. However, the order of CSS files matters only if the CSS specificity of two conflicting CSS rules is the same. Generally, it is better to have a higher specificity for custom CSS styles, which are meant to override some default styles. So the order is not a real concern and using higher specificity cannot be regarded as a "workaround".

    For Q1 2009 we changed the skinning mechanism and CSS class naming convention for some of our controls. As a result the RadGrid (for example) obtained CSS styles with a higher specificity (+10 points). If you have used some custom CSS rules for RadGrid in Q3 2008, you should increase their specificity also with 10 points (e.g. add 1 CSS class in the selector) for Q1 2009.

    Best wishes,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  13. Jake
    Jake avatar
    6 posts
    Member since:
    Oct 2007

    Posted 25 Jan 2010 Link to this post

    Hi, sorry to open an old thread but the order of registration seems to be a problem for me too. Did something change again in Q3 2009?

    I notice that my theme's specificity is IDENTICAL to that of the base skin being registered in WebResource, but because the WebResource CSS is called last on Render (why?!) I'm stuck with the base skin not the custom skin from my ASP.NET Theme.

    So I'm left with two options it seems. Either a) go through my entire theme and add !important to everything (this would be ridiculous) or b) somehow increase the specificity for each class in my custom theme even further.

    a) really isn't an option, but b) is incredibly annoying as well. Note that I didn't have this problem prior to upgrading to Q3 2009. Plus, I followed your "custom skin in an ASP.NET Theme" documentation, which is perhaps no longer valid?

    Please advise - is b) really my best option?

    Thanks -

    Jake
  14.
  15. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 26 Jan 2010 Link to this post

    Hello Jake,

    There were no CSS registration order changes in Q3 2009. However you didn't specify from which version are you upgrading and which controls. Can you specify that?

    In short - yes, b) is the best of those options that you have. It usually consists of a simple Find & Replace of .RadYourControl with div.RadYourControl. There is a c) option if you are talking about RadComboBox or RadToolTip  - in Q3 there were base stylesheets added for these controls, you will need to at least disable them to get your old skins working. Also RadDock's rendering has been completely changed in Q3.

    Kind regards,
    Kamen Bundev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  17. Neha
    Neha avatar
    21 posts
    Member since:
    Jan 2011

    Posted 04 Oct 2011 Link to this post

    Thanks Kamen ! it worked like magic :)

  19. Robert
    Robert avatar
    1 posts
    Member since:
    Sep 2015

    Posted 22 Oct 2015 Link to this post

    I still have problems with this.  I've used the 'order index' on the RadSkinManager as recommended on a ticket and it doesn't always work.  it appears to have a mind of it's own.  the solution of adding 'div' to the front if all of the radDropDownList references in the customer skin appears to work but it seems like a big bandaid (IMHO).  can someone walk through the steps of using a custom skin WITHOUT referring me to the documentation?  it just doesn't seem to work consistently.
  20.
  21. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    654 posts

    Posted 27 Oct 2015 Link to this post

    Hi, Robert.
    We've been considering this for a while -- the ability to set the position within the HEAD element where the stylesheets will be rendered.

    You can vote on the feature request -- http://feedback.telerik.com/Project/108/Feedback/Details/48001-add-the-ability-to-set-order-of-embedded-styles and follow the development of the item (provided that it gets some traction). In the mean time, you can reorder the stylesheets from the code behind with a simple script like the attached one.


    Regards,
    Ivan Zhekov
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
Back to Top