Disabling embedded skins doesn't apply custom stylesheet

4 posts, 0 answers
  1. Raptor
    Raptor avatar
    19 posts
    Member since:
    Aug 2011

    Posted 23 Aug 2013 Link to this post

    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>
     
    <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

  2. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 28 Aug 2013 Link to this post

    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.
  3. Raptor
    Raptor avatar
    19 posts
    Member since:
    Aug 2011

    Posted 28 Aug 2013 Link to this post

    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


  4. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 02 Sep 2013 Link to this post

    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 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