New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Custom skins not applied or overridden by base Telerik stylesheets


Render Mode Lightweight


The Skins generated from the Telerik ThemeBuilder are generated with the same selectors's specificity as the built-in base styles. Sometimes, depending on the skin and scenario, the base Telerik styles are overriding styles from the custom skins.

The issue is observed in scenarios where the stylesheets are loaded in the <head>. That is because the base skins are loaded programmatically as the last children of the <head>, meaning the base stylesheets will be loaded after the custom skin files.

This is considered an issue with the skins themselves and will be fixed in upcoming versions of the controls. In the meantime one of the solutions below can be used.


Load stylesheets in body

As the description explains, the reversed order is causing the issue so to ensure the proper order, you can load the skins in the <body> instead of the <head>.

Use RadStyleSheetManager

The RadStyleSheetManager gives the ability to control the loading order of the stylesheets you pass. That means you can load the styles with a big OrderIndex and the custom skin files will be loaded after the base styles.

    <add key="Telerik.Web.UI.StyleSheetFolders" value="~/Skins" />
<telerik:RadStyleSheetManager runat="server">
        <telerik:StyleSheetReference Path="~/Skins/Button.MySkin.css" OrderIndex="9999" />
        <telerik:StyleSheetReference Path="~/Skins/Grid.MySkin" OrderIndex="9999" />
        <%-- Other custom skin files here --%>

Keep in mind that in order to load stylesheets from the local system you need to set the Telerik.Web.UI.StyleSheetFolders setting in the web.config: RadStyleSheetManager - Serving External Stylesheets

Modify selectors in skin files

The Telerik ThemeBuilder allows customizing skins for the Lightweight render mode of the Telerik UI for ASP.NET AJAX controls. Increasing the Selectors' specificity would prevent any base stylesheets from overriding it.

Example: .RadAutoCompleteBox_CustomSkin selector to become .RadAutoCompleteBox.RadAutoCompleteBox_CustomSkin.

Here is a code snippet of the application that programmatically increases the selector's specificity. The fully runnable WebForms WebSite can be downloaded from here.

<asp:ScriptManager runat="server" />
<asp:Button runat="server" ID="Button1" Text="Increase selectors" OnClick="Button1_Click" AutoPostBack="true" />
<asp:TextBox ID="tbSkinName" runat="server"  placeholder="Enter SkinName here..."></asp:TextBox>
<asp:RequiredFieldValidator ForeColor="DarkRed" ErrorMessage="*Please enter skin name" ControlToValidate="tbSkinName" runat="server" />
<asp:Label runat="server" ID="Label1"></asp:Label>
public static string SkinName = "";

public static string SelectorStrenghEnhancer(Match match)
    var matchString = match.Value;
    var control = matchString.Substring(0, matchString.Length - ("_" + SkinName).Length);
    var finalString = control + matchString;

    return finalString;

protected void Button1_Click(object sender, EventArgs e)
    SkinName = tbSkinName.Text;

    var inputPath = Server.MapPath("~/Input");
    var outputPath = Server.MapPath("~/Output");

    var files = Directory.GetFiles(inputPath, "*.css");
    MatchEvaluator evaluator = new MatchEvaluator(SelectorStrenghEnhancer);

    foreach (var filePath in files)
        string text = File.ReadAllText(filePath);
        var filename = Path.GetFileName(filePath);
        text = Regex.Replace(text, @"\.Rad.*?_"+ SkinName, evaluator, RegexOptions.IgnorePatternWhitespace);
        File.WriteAllText(Path.Combine(outputPath,filename), text);

    Label1.Text = "Styles selectors increased successfully";

Instructions to use the project

  • Place the custom skin .css files in ~/Input folder of the project
  • Open the project with Visual Studio and run it
  • Set the name of the custom skin in the TextBox
  • Press the button
  • Get the new .css files from the ~/Output folder and apply them in your
  • Apply the custom theme in your project

See Also

In this article