Custom skins and CSS order

2 posts, 0 answers
  1. Graham
    Graham avatar
    1 posts
    Member since:
    Oct 2008

    Posted 15 Jul 2013 Link to this post

    Hi

    I have created a custom skin based on the embedded Windows7 skin (it is only the colors which have changed) which is applied using an ASP.NET theme. In general this works well but I have found one area which is causing problems. The generic CSS rules (i.e. those which are not skin specific) are still taken from the skins DLL (i.e. they come from ...Telerik.Web.UI.WebResource.axd) but they are loaded after the skin specific styles fromn the ASP.NET theme folder. As a result there are situations where a skin specific style designed to override a non-skin specific style does not work.

    As an example consider the Calendar control. The non-skin specific calendar CSS file includes the following rule which adds a border to the cells used for each day:

      .RadCalendar .rcRow td {
        border-style: solid;
        border-width: 1px;
        padding: 0;
        text-align: right;
        vertical-align: middle; }

    The custom skin calendar CSS file includes the following rule which removes the border:

    .RadCalendar_CXTest .rcRow td {
     width: 26px;
     border: 0;
     padding: 0 0 1px 1px;
    }

    Since these two rules have the same specificity the ordering is important. Unfortunately the non-skin specific file is loaded after the skin specific file and so the non-skin specific rule takes precedence and the calendar days end up with borders.

    Is there any way to avoid this?

    Thanks

    Graham


  2. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 18 Jul 2013 Link to this post

    Hi Graham,

    You are correct, due to fact that the embedded base CSS is loaded after your custom styles, the custom styles got overwritten. In order to prevent this you can follow these steps and also add the RadStyleSheetManager:

    ASPX:

    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="false">
        <StyleSheets>
            <telerik:StyleSheetReference Path="Windows7/Calendar.Windows7.css" />
            <telerik:StyleSheetReference Path="Windows7/Input.Windows7.css" />
        </StyleSheets>
    </telerik:RadStyleSheetManager>


    <telerik:RadCalendar ID="radCalCustomSkin" ShowRowHeaders="false" runat="server" nableEmbeddedSkins="false" Skin="Windows7">
    </telerik:RadCalendar>

    and in your web.config:

    <appSettings>
      <add key="Telerik.Web.UI.StyleSheetFolders" value="~/Windows7/" />
    </appSettings>

    I also attach a sample project that illustrates the approach.

    I hope this helps

    Regards,
    Venelin
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top