Rendering Problem with Custom Skin

[Mark]

Hello,

we have build a custom skin from your Metro Skin Source Files and have renamed them so they fit to our Application name and do not conflict with the build in.
We have put that skin files into an assembly as you have descripted in your documentation and disabled Embedded Skin for the whole project. The skin name is applied to all controls.

We are currently using Version: 2013.1.403.35

Now, we have the problem, that the styles from our skin does not come to use on several parts of the controls.
For example, one part of our app uses the scheduler control.

The Skin name get applied to the control as you ca see here:

<div id="ctl00_ADBISContentPlaceHolder_radScheduler" class="RadScheduler RadScheduler_Adbis" style="height: 540px;">

Please take a look at the attached screenshot.
The background of the header should be violet, but it is transparent.
When you take a look at the dev panel at the bottom you see that the background color value is taken from the first seen css selectors (.RadScheduler .rsHeader) and not from our skin file which is the second visible css selector (.RadScheduler_Adbis .rsHeader)

These both css rules are are part of the same WebResource.axd result but the ".RadScheduler .rsHeader" css rules are not part of our Skin files. Are these rules part of the EmbeddedBaseStylesheet and how can we fix this problem without assigning "!important" rules to every css style that does not fit...

Thanks for support.

[Kate]

Hello Mark,

Indeed the styles that you describe come from the embedded base style sheet of the RadScheduler control. You can easily override it by increasing the css class selector (as described here) in the following way:

div.RadScheduler .rsHeader
{ ..... }

Regards,
Kate
Telerik

[Mark]

Hi Kate,

thanks for your reply.

There is still something that I dont understand. How does Telerik do this with the Embedded Skins. As I have wrote, we have taken the source skin files from the Telerik install folder for the skin "Metro" and changed some colors for example.
When this skin files are equal to the Embedded Skins they should work in the same way as the embedded skins and the styles should be applied in the same way without modifying the selectors, what it does not do at the moment.

So, that was the reason why i have asked for help as I think there must be something that we have missed.

Regards
Mark

[Kate]

Hi Mark,

You are correct that when you need to modify the skin file 9use your custom skin based on the build-in one) and there is no need to modify the selectors that you use. However, this is true only for the skin files that are applied. The style that you need to override, however, does not come from the skin file but rather from the base stylesheet file. Please refer to the following help article where you can find more information of the styles that are applied to the RadControls - How skins work.

Regards,
Kate
Telerik