|
| 1 | +--- |
| 2 | +title: Create a Custom Skin |
| 3 | +page_title: Create a Custom Skin - RadSplitButton |
| 4 | +description: Check our Web Forms article about Create a Custom Skin. |
| 5 | +slug: splitbutton/appearance-and-styling/create-a-custom-skin |
| 6 | +tags: create,a,custom,skin |
| 7 | +published: True |
| 8 | +position: 3 |
| 9 | +--- |
| 10 | + |
| 11 | +# Create a Custom Skin |
| 12 | + |
| 13 | +Each of the controls included in the **Telerik® UI for ASP.NET AJAX** suite is styled with two CSS files that are loaded in a certain order. The first file – **[ControlName].css** , also called base stylesheet, contains CSS properties and values that are common for all skins, i.e., it is layout-specific, not skin-specific. These are CSS float, padding, margin, font-size, font-family, etc. In general, when creating a custom skin for a control, this file should not be edited unless the custom skin needs different sizes, padding and / or margins. |
| 14 | + |
| 15 | +The second file represents the actual skin of the control, and its name consists of the control name plus the skin name, e.g., - **Button.Default.css**. Upon creating a custom skin for the control, one should edit that particular file, as it contains skin-specific CSS properties and references to images, colors, borders and backgrounds. |
| 16 | + |
| 17 | +## Create a RadSplitButton Skin from an Existing One |
| 18 | + |
| 19 | +1. In your project, create a new directory named **Skins**; |
| 20 | + |
| 21 | +1. In the **Skins** folder if you already have some custom skin, most probably you have already a folder named: **MyCustomSkin** – if you don’t – create one; |
| 22 | + |
| 23 | +1. In the **Skins** folder, create a new folder named: **MyCustomSkinLite** - this is the place where your Lightweight custom skins CSS will be placed; |
| 24 | + |
| 25 | +1. Go to **[ControlsInstallationFolder]\Skins\DefaultLite** and copy **Button.Default.css** and **Menu.Default.css** into your **MyCustomSkinLite** folder; |
| 26 | + |
| 27 | +1. Go to **[TelerikControlsInstallationFolder]\Skins\Default** and copy the **Common** folder into your **MyCustomSkin** folder; |
| 28 | + |
| 29 | +1. Rename **Button.Default.css** to **Button.MyCustomSkin.css** and **Menu.Default.css** to **Menu.MyCustomSkin.css**; |
| 30 | + |
| 31 | +1. When you are finished you should have the following folder structure in your project: |
| 32 | + |
| 33 | + 1. **Skins/MyCustomSkin/Common/** - containing several sprites; |
| 34 | + |
| 35 | + 1. **Skins/MyCustomSkinLite/Button.MyCustomSkin.css**. |
| 36 | + |
| 37 | + 1. **Skins/MyCustomSkinLite/Menu.MyCustomSkin.css**. |
| 38 | + |
| 39 | +1. In order to support multiple skins of **RadSplitButton** on a single page, the wrapping skin-specific class is created by the name of the control, plus underscore ("_") plus SkinName, i.e., **.RadButton_Default**, so in order to create a custom skin out of the Default skin, we should rename all occurrences of **"RadButton_Default"** in **Button.MyCustomSkin.css** to **"RadButton_MyCustomSkin"** as shown below and **"RadMenu_Default"** in **Menu.MyCustomSkin.css** to **"RadMenu_MyCustomSkin"** in the same manner. |
| 40 | + |
| 41 | +  |
| 42 | + |
| 43 | +1. Add a new server declaration of **RadSplitButton** on your page, and set **Skin="MyCustomSkin"** and **EnableEmbeddedSkins="false"**: |
| 44 | + |
| 45 | + **ASP.NET** |
| 46 | + |
| 47 | + <telerik:RadSplitButton ID="RadSplitButton1" runat="server" EnableEmbeddedSkins="false" Skin="MyCustomSkin" /> |
| 48 | + |
| 49 | +1. Register **Button.MyCustomSkin.css** and **Menu.MyCustomSkin.css** in the head section of your web page. In order to have the CSS applied correctly, the base stylesheet should come first in the DOM: |
| 50 | + |
| 51 | + **ASP.NET** |
| 52 | + |
| 53 | + <link href="Skins/MyCustomSkin/Button.MyCustomSkin.css" rel="stylesheet" type="text/css" /> |
| 54 | + <link href="Skins/MyCustomSkin/Menu.MyCustomSkin.css" rel="stylesheet" type="text/css" /> |
| 55 | + |
| 56 | +1. Make sure the path to the files is correct; otherwise the skin will not apply; |
| 57 | + |
| 58 | +1. Reload the page, and if the steps above have been followed correctly, you will see **RadSplitButton** running a custom Default skin set as an external resource. |
| 59 | + |
| 60 | +## Custom Skin Example |
| 61 | + |
| 62 | +The example below shows how to modify the CSS in order not only to change some colors and background colors, but also some base layout settings such as font size, element height, border-radius, etc. |
| 63 | + |
| 64 | +````ASPX |
| 65 | +<asp:ScriptManager runat="server"></asp:ScriptManager> |
| 66 | +<telerik:RadSplitButton runat="server" Text="SplitButton"> |
| 67 | + <ContextMenu> |
| 68 | + <Items> |
| 69 | + <telerik:RadMenuItem Text="Action1"></telerik:RadMenuItem> |
| 70 | + <telerik:RadMenuItem Text="Action2"></telerik:RadMenuItem> |
| 71 | + <telerik:RadMenuItem Text="Action3"></telerik:RadMenuItem> |
| 72 | + </Items> |
| 73 | + </ContextMenu> |
| 74 | +</telerik:RadSplitButton> |
| 75 | +```` |
| 76 | +````CSS |
| 77 | +/* Button normal state */ |
| 78 | +.RadButton.RadButton_Default.rbButton, |
| 79 | +.RadButton.RadButton_Default.rbButton .rbSplitPart { |
| 80 | + background-color: #80078e; |
| 81 | + background-image: linear-gradient(#4f0258, #80078e 100%); |
| 82 | + border-color: #6b536e; |
| 83 | + color: #fff; |
| 84 | +} |
| 85 | + |
| 86 | + /* Button hovered state */ |
| 87 | + .RadButton.RadButton_Default.rbButton.rbHovered, |
| 88 | + .RadButton.RadButton_Default.rbButton .rbSplitPart.rbHovered { |
| 89 | + background-color: #660283; |
| 90 | + background-image: linear-gradient(#660283, #f2ddf8 100%); |
| 91 | + border-color: #47035a; |
| 92 | + color: #3a0470; |
| 93 | + } |
| 94 | + |
| 95 | +/* ContextMenu normal state */ |
| 96 | +.RadMenu.RadMenu_Default .rmGroup { |
| 97 | + border-color: #6b536e; |
| 98 | + color: #fff; |
| 99 | + background-color: #80078e; |
| 100 | +} |
| 101 | + .RadMenu.RadMenu_Default .rmGroup:before { |
| 102 | + border-color: transparent; |
| 103 | + background-color: #80078e; |
| 104 | + } |
| 105 | + |
| 106 | + /* ContextMenu hovered state */ |
| 107 | + .RadMenu.RadMenu_Default .rmGroup .rmLink:hover { |
| 108 | + background-color: #660283; |
| 109 | + background-image: linear-gradient(#660283, #f2ddf8 100%); |
| 110 | + border-color: #47035a; |
| 111 | + color: #3a0470; |
| 112 | + } |
| 113 | +```` |
| 114 | + |
| 115 | +## See Also |
| 116 | + |
| 117 | + * [Render Modes]({%slug splitbutton/mobile-support/render-modes%}) |
0 commit comments