Rendering Problem with Custom Skin

4 posts, 0 answers
  1. Mark
    Mark avatar
    8 posts
    Member since:
    Jan 2011

    Posted 31 May 2013 Link to this post

    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.


  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 05 Jun 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Mark
    Mark avatar
    8 posts
    Member since:
    Jan 2011

    Posted 05 Jun 2013 Link to this post

    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

  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 07 Jun 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top