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

[Xhrei]

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

[Svetlina Anati]

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.

[Xhrei]

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?

[Svetlina Anati]

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.

[Xhrei]

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)

[Dimo]

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.

[Jake]

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

[Kamen Bundev]

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.

[Neha]

Thanks Kamen ! it worked like magic :)

[Robert]

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.

[Ivan Zhekov]

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