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
0
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:
Please find attached a sample project that is illustrating the approach.
Regards,
Venelin
Telerik
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.
0
René
Top achievements
Rank 2
Rank 2
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:
Is there any way how to do it?
Thanx for any help
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
0
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
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
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.
0
jaygarrick13
Top achievements
Rank 1
Rank 1
answered on 07 May 2019, 11:58 AM
hey,
@Raptor,Thanks for posting this topic and thankyou all for your replies. I was having same query and was looking what to do next.Your replies helped me a lot as they were informative and helpful.
best regards!!!