Telerik.Web.UI.Skins.<control>.css Interferring with Custom Skins in Embedded Dll

4 posts, 0 answers
  1. Henry
    Henry avatar
    35 posts
    Member since:
    Mar 2009

    Posted 21 Sep 2014 Link to this post

    Hi,

    I've created a custom skin and embed all resource in an assembly.
    All is loaded properly in the aspx page.
    In my solution, I only reference Telerik.Web.UI and CustomSkin assemblies, I did not reference Telerik.Web.UI.Skins.

    When debugging the aspx page in IE through F12,..

    I saw that for ImageGallery's Next Button for example,..

    background-image: none
       .RadImageGallery : none
       .RadImageGallery : url('/xxx/xxx/WebResource.axd?d=xxxxx&t=xxxx')    <== this is striked-out

    The first .RadImageGallery (none value) is coming from Telerik.Web.UI assembly (Telerik.Web.UI.Skins.ImageGallery.css)

    The second .RadImageGallery (WebResource.axd value) is coming from the CustomSkin assembly, but is overridden by the first .RadImageGallery from Telerik.Web.UI assembly

    As such, the image of the Next button is not shown.

    Question is, if I have a ASP.NET Theme with a Skin File of :

    <telerik:RadImageGallery runat="server" EnableEmbeddedSkins="false" Skin="TelerikRadControl" RenderMode="Lightweight" />


    why is Telerik.Web.UI.Skins.ImageGallery.css still being loaded / part of the css ?

    shouldn't the CustomSkin assembly be the only one loaded into the page?

    Thanks,
    Henry


  2. Galin
    Admin
    Galin avatar
    526 posts

    Posted 25 Sep 2014 Link to this post

    Hi Henry,

    I suggest you to increase the specificity of the CSS rules as the following example
    div.RadImageGallery {
        background: red;
    }

    For more information please refer to this blog article.

    I hope this helps.

    Regards,
    Galin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Henry
    Henry avatar
    35 posts
    Member since:
    Mar 2009

    Posted 26 Sep 2014 in reply to Galin Link to this post

    Thanks for your feedback Galin.

    I actually use Visual Style Builder , chose Metro, and changed color to green and save all.
    I then followed (http://www.telerik.com/forums/tool-for-embedding-custom-skins-into-an-assembly) to put it all in an assembly.

    I would have thought by using Visual Style Builder, the new skin will override all telerik skins (including the one in Telerik.Web.UI)

    Based on the links you gave, is it then possible to load my custom assembly last? ,.. instead of loading the skin in Telerik.Web.UI last (I assume this is the "Default" skin?)

    Thanks for the blog link for the specificity. Is there an easy way to this to all styles generated by Visual Style Builder ?
    Or indeed need to modify the generated css files?

    Thanks in advance!
  5. Galin
    Admin
    Galin avatar
    526 posts

    Posted 02 Oct 2014 Link to this post

    Hello Henry,

    In case you are using a custom assembly (dll), these CSS files will be loaded after the base styles.
    This is the best way to use the custom skins and I suggest you to try our new Skin Assembly Builder tool. 

    Otherwise you should link the styles in body part, e.g.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
     
    <body>
        <link href="ImageGallery.CustomSkin.css" rel="stylesheet" />
        <form id="form1" runat="server">
            ...
            ...
            ...
            ...
        </form>
    </body>
    </html>

    I hope this helps.


    Regards,
    Galin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top