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

Disabling embedded skins doesn't apply custom stylesheet

4 Answers 284 Views

Designs, skins, themes

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

René asked on 23 Aug 2013, 07:45 AM

I need to use modified (local version) of standard skin style sheets, because I need to disable skins for whole website. All I need is load skin in one page.

So I have RadCalendar and Windows7 skin.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="TestTelerikSkin.test" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Skin Test</title>

<link href="/Styles/Windows7/Calendar.Windows7.css" rel="stylesheet" type="text/css" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>

</Scripts>

</telerik:RadScriptManager>

<div>

<telerik:RadCalendar runat="server" EnableEmbeddedSkins="false" Skin="Windows7">

</telerik:RadCalendar>

</div>

</form>

</body>

</html>

When EnableEmbeddedSkins is set to false, I need to load and apply my custom css file. If EnableEmbeddedSkins is set to true, assembly skins will be loaded. They should be the same, right? The same css files, the same result. But it is not. Why? How to use custom skin css file?

Check this image: Screen

CSS file is exactly the same as installed version from RadControls for ASP.NET AJAX\Skins\Windows7\Calendar.Windows7.css.

Thanks for help

4 Answers, 1 is accepted

answered on 28 Aug 2013, 08:27 AM

RadCalendarCustomSkin.zip

Hello Raptor,

The observed behavior is due to the fact that base style sheet for the calendar is loaded after the custom skin and thus it overwrites some of the CSS rules. In order to prevent this behavior I would suggest to use another approach which will prevent the custom styles from being overwritten by the base styles. The approach simply consists in using RadStyleSheetManager like the example below shows.

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" EnableEmbeddedSkins="false" Skin="Windows7">

</telerik:RadCalendar>

and in your web.config:

<appSettings>

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

</appSettings>

Please find attached a sample project that is illustrating the approach.

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.

answered on 28 Aug 2013, 11:11 AM

Hello,

thank you for reply. Ok, so I checked this and RadStyleSheetManager renders all links after webresources, so it is ok.

But I need to include many css files for more skins. It will take too many code lines in every page. Is there any way how to use bundles in manager? I have all skins created as bundles using web optimizations and all files are compilled as embedded resources in other assembly. Resources are handled with virtual path manager.

I don't want to put all css files to target application, I need one embedded version in other assembly. So this will not work in your example, because it wants physical files in project directory.

And last question is - why there is appsetting value in web config? All paths are included in manager items. So why to duplicate them? How can I get rid of this option?

So in other words, I want to implement this solution:
-All css files are embedded in other assembly as resources and everything is handled as virtual files
-There is no skin css file in target web application
-Manager accepts virtual files as items (It should work, because all virtual files works as normal files)
-Get rid of web.config appsettings key "Telerik.Web.UI.StyleSheetFolders", because it is duplicate value and there is no folder to set

Manager will be as this example:

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="false">

<StyleSheets>

<telerik:StyleSheetReference Path="/Virtual/Skins/Windows7/Calendar.Windows7.css" />

<telerik:StyleSheetReference Path="/Virtual/Skins/Office2007/Calendar.Office2007.css" />

</StyleSheets>

</telerik:RadStyleSheetManager>

Is there any way how to do it?

Thanx for any help

answered on 02 Sep 2013, 09:05 AM

Hello Raptor,

If you want to load skins from an external assembly you can refer to this help article: How to load skins from external assemblies. There is also a code library available that is demonstrating the approach: How to load skins from external assemblies. Please examine the provided resources and see if they can help accomplish your requirements.

Regards,
Venelin
Telerik