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

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

3 Answers 100 Views
Visual Style Builder
This is a migrated thread and some comments may be shown as answers.
Henry
Top achievements
Rank 1
Henry asked on 21 Sep 2014, 03:49 PM
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


3 Answers, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 25 Sep 2014, 06:40 AM
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.

 
0
Henry
Top achievements
Rank 1
answered on 27 Sep 2014, 03:19 AM
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!
0
Galin
Telerik team
answered on 02 Oct 2014, 08:29 AM
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.

 
Tags
Visual Style Builder
Asked by
Henry
Top achievements
Rank 1
Answers by
Galin
Telerik team
Henry
Top achievements
Rank 1
Share this question
or