Custom skin not working

3 posts, 1 answers
  1. CH V S D PHANI
    CH V S D PHANI avatar
    3 posts
    Member since:
    Jan 2015

    Posted 09 Jan Link to this post

    Hi,

            I have created a skin named whiteblue based on the metro touch base skin. following the instructions given in http://www.telerik.com/support/code-library/including-custom-stylesheets-as-webresources-to-radstylesheetmanager and http://docs.telerik.com/devtools/aspnet-ajax/controls/stylesheetmanager/overview i have placed a button in the sample webpage and configured enableembeddedskins=false and set skin="whiteblue". 

    but the custom skin is not working. Please guide me in this regard where i did mistake. When am running webpage it is not showing any error and simply showing radbutton without any css applied.

     

    cssfile:

    span.RadButton_whileblue{font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:16px;color:#000000;height:34px;line-height:33px}span.RadButton_whileblue.rbSkinnedButton,span.RadButton_whileblue.rbVerticalButton,span.RadButton_whileblue.rbLinkButton{background-color:#fafafa}span.RadButton_whileblue.RadButton.rbLinkButton{text-decoration:none;height:auto;line-height:1.9em;min-height:1.875em;padding:.08333em .94em .16667em}span.RadButton_whileblue.rbSkinnedButton{padding-left:0}span.RadButton_whileblue.rbSkinnedButton .rbDecorated{height:34px;padding:0 15px}span.RadButton_whileblue.rbSkinnedButtonChecked,span.RadButton_whileblue.rbSkinnedButtonChecked .rbDecorated,span.RadButton_whileblue.rbSkinnedButtonChecked.rbHovered .rbDecorated{background-color:#4800ff;color:#ffffff}span.RadButton_whileblue .rbDecorated.rbPrimary{padding-left:35px}span.RadButton_whileblue .rbDecorated.rbSecondary{padding-right:35px}span.RadButton_whileblue.rbVerticalButton{padding-left:0}span.RadButton_whileblue.rbVerticalButton .rbDecorated{padding-left:8px}span.RadButton_whileblue.rbVerticalButton .rbDecorated.rbPrimary{padding-left:40px}span.RadButton_whileblue.rbVerticalButton,span.RadButton_whileblue.rbVerticalButton .rbDecorated{height:63px;line-height:63px}span.RadButton_whileblue.rbSkinnedButton,span.RadButton_whileblue.rbLinkButton,span.RadButton_whileblue.rbVerticalButton,span.RadButton_whileblue.RadButton.rbDisabled,span.RadButton_whileblue.RadButton.rbDisabled.rbHovered,span.RadButton_whileblue.RadButton.rbDisabled:active,span.RadButton_whileblue.RadButton.rbDisabled:focus{border:1px solid #cccccc}span.RadButton_whileblue.rbSkinnedButton.rbNativeButton,span.RadButton_whileblue.rbLinkButton.rbNativeButton,span.RadButton_whileblue.rbVerticalButton.rbNativeButton{border:0 none}span.RadButton_whileblue span.rbPrimary{padding-left:20px}span.RadButton_whileblue span.rbSecondary{padding-right:20px}span.RadButton_whileblue.RadButton.rbToggleButton.rbHovered{border:0 none;color:#4800ff}span.RadButton_whileblue.RadButton.rbToggleButton:active,span.RadButton_whileblue.RadButton.rbToggleButton:focus{color:#4800ff}span.RadButton_whileblue.rbToggleButton:active .rbText,span.RadButton_whileblue.rbToggleButton:focus .rbText{color:#000000}span.RadButton_whileblue .rbDecorated{font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:16px}span.RadButton_whileblue.RadButton.rbHovered{border:1px solid #e8e8e8;background-color:#e8e8e8}span.RadButton_whileblue.RadButton:active,span.RadButton_whileblue.RadButton:focus,span.RadButton_whileblue.rbPressedButton,span.RadButton_whileblue.RadButton.rbPressedButton,span.RadButton_whileblue.RadButton.rbSkinnedButtonChecked,span.RadButton_whileblue.RadButton.rbSkinnedButtonChecked.rbHovered,span.RadButton_whileblue.RadButton.rbLinkButtonChecked,span.RadButton_whileblue.RadButton.rbLinkButtonChecked.rbHovered,span.RadButton_whileblue.RadButton.rbVerticalButtonChecked,span.RadButton_whileblue.RadButton.rbVerticalButtonChecked.rbHovered{border:1px solid #4800ff;background-color:#4800ff;color:#ffffff}span.RadButton_whileblue.RadButton:active .rbDecorated,span.RadButton_whileblue.RadButton:focus .rbDecorated,span.RadButton_whileblue.RadButton.rbPressedButton .rbDecorated,span.RadButton_whileblue.RadButton.rbSkinnedButtonChecked .rbDecorated,span.RadButton_whileblue.RadButton.rbSkinnedButtonChecked.rbHovered .rbDecorated,span.RadButton_whileblue.RadButton.rbLinkButtonChecked .rbDecorated,span.RadButton_whileblue.RadButton.rbLinkButtonChecked.rbHovered .rbDecorated{color:#ffffff}span.RadButton_whileblue.rbSkinnedButton .rbPrimaryIcon.rbToggleCheckbox,span.RadButton_whileblue.rbSkinnedButton .rbPrimaryIcon.rbToggleCheckboxChecked,span.RadButton_whileblue.rbSkinnedButton .rbPrimaryIcon.rbToggleRadio,span.RadButton_whileblue.rbSkinnedButton .rbPrimaryIcon.rbToggleRadioChecked,span.RadButton_whileblue.rbSkinnedButton .rbPrimaryIcon.rbToggleCheckboxFilled,span.RadButton_whileblue.rbSkinnedButton .rbSecondaryIcon.rbToggleCheckbox,span.RadButton_whileblue.rbSkinnedButton .rbSecondaryIcon.rbToggleCheckboxChecked,span.RadButton_whileblue.rbSkinnedButton .rbSecondaryIcon.rbToggleRadio,span.RadButton_whileblue.rbSkinnedButton .rbSecondaryIcon.rbToggleRadioChecked,span.RadButton_whileblue.rbSkinnedButton .rbSecondaryIcon.rbToggleCheckboxFilled,span.RadButton_whileblue.rbLinkButton .rbPrimaryIcon.rbToggleCheckbox,span.RadButton_whileblue.rbLinkButton .rbPrimaryIcon.rbToggleCheckboxChecked,span.RadButton_whileblue.rbLinkButton .rbPrimaryIcon.rbToggleRadio,span.RadButton_whileblue.rbLinkButton .rbPrimaryIcon.rbToggleRadioChecked,span.RadButton_whileblue.rbLinkButton .rbPrimaryIcon.rbToggleCheckboxFilled,span.RadButton_whileblue.rbLinkButton .rbSecondaryIcon.rbToggleCheckbox,span.RadButton_whileblue.rbLinkButton .rbSecondaryIcon.rbToggleCheckboxChecked,span.RadButton_whileblue.rbLinkButton .rbSecondaryIcon.rbToggleRadio,span.RadButton_whileblue.rbLinkButton .rbSecondaryIcon.rbToggleRadioChecked,span.RadButton_whileblue.rbLinkButton .rbSecondaryIcon.rbToggleCheckboxFilled,span.RadButton_whileblue.rbToggleButton .rbPrimaryIcon.rbToggleCheckbox,span.RadButton_whileblue.rbToggleButton .rbPrimaryIcon.rbToggleCheckboxChecked,span.RadButton_whileblue.rbToggleButton .rbPrimaryIcon.rbToggleRadio,span.RadButton_whileblue.rbToggleButton .rbPrimaryIcon.rbToggleRadioChecked,span.RadButton_whileblue.rbToggleButton .rbPrimaryIcon.rbToggleCheckboxFilled,span.RadButton_whileblue.rbToggleButton .rbSecondaryIcon.rbToggleCheckbox,span.RadButton_whileblue.rbToggleButton .rbSecondaryIcon.rbToggleCheckboxChecked,span.RadButton_whileblue.rbToggleButton .rbSecondaryIcon.rbToggleRadio,span.RadButton_whileblue.rbToggleButton .rbSecondaryIcon.rbToggleRadioChecked,span.RadButton_whileblue.rbToggleButton .rbSecondaryIcon.rbToggleCheckboxFilled{background-image:url(<%= WebResource("whiteblue.whileblue.Common.radFormToggleSprite.png;width:22px;height:22px;top:9px}span.RadButton_whileblue.rbToggleButton .rbText{padding:0 8px}span.RadButton_whileblue.rbToggleButton.rbTextButton{border:0 none;color:#000000}span.RadButton_whileblue.rbToggleButton.rbTextButton .rbText{padding:0 28px}span.RadButton_whileblue .rbSplitRight,span.RadButton_whileblue .rbSplitLeft{width:28px}span.RadButton_whileblue.RadButton span.rbSplitRight,span.RadButton_whileblue.RadButton span.rbSplitLeft,span.RadButton_whileblue.RadButton span.rbSplitRight.rbHovered,span.RadButton_whileblue.RadButton span.rbSplitLeft.rbHovered{background-image:Common") %>)!important}.RadButton.RadButton_whileblue{height:34px;line-height:33px}








     .RadButton_whileblue .rbDecorated {

    font-family: Lucida Sans, Arial, Helvetica, sans-serif;

    }

     .RadButton_whileblue:active .rbDecorated {

    background-color: #6f00c4;

    }

     .RadButton_whileblue.rbToggleButton {

    font-family: Lucida Sans, Arial, Helvetica, sans-serif;

    color: #6f00c4;

    }

     .RadButton_whileblue:active .rbDecorated {

    padding-right: 15px;

    background-color: #43007a;

    }

     .RadButton_whileblue:active.rbSkinnedButton {

    background-color: #45007a;

    }

     

     

    class library:

    Imports System.Collections.Generic
    Imports System.Linq
    Imports System.Text
    Imports System.Web
    Imports System.Web.UI
    <Assembly: WebResource("whiteblue.whiteblue.button.whiteblue.css", "text/css")> 
    <Assembly: WebResource("whiteblue.whiteblue.button.whiteblue.gif", "image/gif")> 

    Namespace whiteblue
        Public Class whiteblue

        End Class
    End Namespace

     

    aspx file:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        
    </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 Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
        <StyleSheets>
            <telerik:StyleSheetReference Assembly="whiteblue" Name="whiteblue.whiteblue.button.whiteblue.css" />
        </StyleSheets>
    </telerik:RadStyleSheetManager>
        <br />
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div style="margin-left: 40px">

            <telerik:RadButton ID="RadButton1" runat="server" EnableEmbeddedSkins="False" 
                Skin="whiteblue" Text="RadButton" EnableTheming="True" 
                RenderMode="Lightweight">
            </telerik:RadButton>

        </div>
        </form>
    </body>
    </html>

  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 13 Jan Link to this post

    Hello,

    Is the issue related to the CSS or the .dll file ? Note that RadButton supports different rendering - Classic and Lightweight which use different CSS selector. That being said you should consider the CSS selectors for the particular rendering.

    I would suggest that you initially create the skin without creating a skins .dll to see the difference. If the skin works properly then embed it inside the dll. You can see how to create a custom skin for the button in the following articles:
       - Classic rendering - http://docs.telerik.com/devtools/aspnet-ajax/controls/button/appearance-and-styling/creating-a-custom-skin
       - Lightweight rendering -  http://docs.telerik.com/devtools/aspnet-ajax/controls/button/appearance-and-styling/creating-a-custom-lightweight-skin

    You may also find useful the following free online tools that let you create skins out of an existing one:
         - Tool for classic rendering - Visual Style Builder
         - Tool for lightweight rendering - Theme Builder

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. CH V S D PHANI
    CH V S D PHANI avatar
    3 posts
    Member since:
    Jan 2015

    Posted 17 Jan Link to this post

    Thank you for differentiating Visual Style Builder and Theme builder.
Back to Top