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

Custom skin not working

2 Answers 178 Views
Visual Style Builder
This is a migrated thread and some comments may be shown as answers.
CH V S D PHANI
Top achievements
Rank 1
CH V S D PHANI asked on 09 Jan 2016, 11:38 AM

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 Answers, 1 is accepted

Sort by
0
Accepted
Danail Vasilev
Telerik team
answered on 13 Jan 2016, 11:32 AM
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
0
CH V S D PHANI
Top achievements
Rank 1
answered on 17 Jan 2016, 09:17 AM
Thank you for differentiating Visual Style Builder and Theme builder.
Tags
Visual Style Builder
Asked by
CH V S D PHANI
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
CH V S D PHANI
Top achievements
Rank 1
Share this question
or