This is a migrated thread and some comments may be shown as answers.

Custom skins and CSS order

1 Answer 64 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Graham
Top achievements
Rank 1
Graham asked on 15 Jul 2013, 03:36 PM
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


1 Answer, 1 is accepted

Sort by
0
Venelin
Telerik team
answered on 18 Jul 2013, 01:09 PM
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.
Tags
Calendar
Asked by
Graham
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Share this question
or