I have a button and href :
<telerik:RadButton RenderMode="Lightweight" ID="cbxBritani" runat="server" ToggleType="CheckBox" Skin="Britani" EnableEmbeddedSkins="false"
ButtonType="LinkButton" Checked="true" OnClick="btnToggle_Click">
<ToggleStates>
<telerik:RadButtonToggleState Text="Britani" Selected="true" PrimaryIconCssClass="rbToggleCheckboxChecked p-i-checkbox-checked" />
<telerik:RadButtonToggleState Text="Britani" PrimaryIconCssClass="rbToggleCheckbox p-i-checkbox" />
</ToggleStates>
</telerik:RadButton>
<link href="~/Skins/Britani/Button.Britani.css" rel="stylesheet" type="text/css" />
I used VSB to build and download but the style is not being applied in the ascx, I have attached the .css that VSB downloaded, in it i do not see the color I applied in the screenshot of the VSB "#ff1eff"
.RadButton_Britani {
font-family: "Segoe UI",Arial,Helvetica,sans-serif;
font-size: 12px
}
.RadButton_Britani.rbSkinnedButton, .RadButton_Britani .rbDecorated, .RadButton_Britani .rbSecondaryIcon, .RadButton_Britani.rbVerticalButton, .RadButton_Britani.rbVerticalButton .rbDecorated {
background-image: none;
font-family: "Segoe UI",Arial,Helvetica,sans-serif;
font-size: 12px
}
.RadButton_Britani.rbSkinnedButton {
padding-left: 6px
}
.RadButton_Britani.rbSkinnedButton .rbSecondary {
padding-right: 27px
}
.RadButton_Britani.rbSkinnedButton .rbDecorated {
margin-left: -4px
}
.RadButton_Britani.rbSkinnedButton:active .rbDecorated, .RadButton_Britani.rbSkinnedButtonChecked .rbDecorated, .RadButton_Britani.rbSkinnedButtonChecked.rbHovered .rbDecorated {
color: #ffffff
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.RadButton_Britani.RadButton input.rbDecorated, .RadButton_Britani.RadButton input.rbDecorated, .RadButton_Britani.RadButton input.rbDecorated:active, .RadButton_Britani.RadButton input.rbDecorated:focus {
background-color: transparent;
border: 0 none
}
}
.RadButton_Britani.rbLinkButton .rbSecondary {
padding-right: 15px
}
.RadButton_Britani .rbSplitRight, .RadButton_Britani .rbSplitLeft {
background-image: url('Button/ButtonSprites.gif')
}
.RadButton_Britani .rbSplitRight, .RadButton_Britani.rbLinkButton .rbSplitRight {
background-position: -1px 0;
border-left: 1px solid #cdcdcd
}
.RadButton_Britani.rbLinkButton.rbDisabled .rbSplitRight {
background-position: 1px 0
}
.RadButton_Britani.rbLinkButton .rbSplitRight {
border-left: 1px solid #cdcdcd
}
.RadButton_Britani .rbSplitRight.rbHovered, .RadButton_Britani.rbLinkButton .rbSplitRight.rbHovered {
background-color: #e8e8e8;
border-left: 1px solid #767676
}
.RadButton_Britani .rbSplitRight:focus, .RadButton_Britani .rbSplitRight:active, .RadButton_Britani.rbLinkButton .rbSplitRight:focus, .RadButton_Britani.rbLinkButton .rbSplitRight:active {
background-color: #ffbeff;
border-left: 1px solid #ffbeff;
background-position: -20px 0
}
.RadButton_Britani .rbSplitLeft, .RadButton_Britani.rbLinkButton .rbSplitLeft {
border-right: 1px solid #cdcdcd
}
.RadButton_Britani.rbLinkButton .rbSplitLeft {
border-right: 1px solid #e5e5e5
}
.RadButton_Britani .rbSplitLeft.rbHovered, .RadButton_Britani.rbLinkButton .rbSplitLeft.rbHovered {
border-right: 1px solid #e8e8e8
}
.RadButton_Britani .rbSplitLeft:focus, .RadButton_Britani .rbSplitLeft:active, .RadButton_Britani.rbLinkButton .rbSplitLeft:focus, .RadButton_Britani.rbLinkButton .rbSplitLeft:active {
background-color: #ffbeff;
border-right: 1px solid #ffbeff;
background-position: -20px 0
}
.RadButton_Britani.rbDisabled .rbSplitLeft, .RadButton_Britani.rbDisabled .rbSplitLeft.rbHovered, .RadButton_Britani.rbDisabled .rbSplitLeft:focus, .RadButton_Britani.rbDisabled .rbSplitLeft:active, .RadButton_Britani.rbLinkButton.rbDisabled .rbSplitLeft, .RadButton_Britani.rbLinkButton.rbDisabled .rbSplitLeft.rbHovered, .RadButton_Britani.rbLinkButton.rbDisabled .rbSplitLeft:active, .RadButton_Britani.rbLinkButton.rbDisabled .rbSplitLeft:focus, .RadButton_Britani.rbDisabled .rbSplitRight, .RadButton_Britani.rbDisabled .rbSplitRight.rbHovered, .RadButton_Britani.rbDisabled .rbSplitRight:focus, .RadButton_Britani.rbDisabled .rbSplitRight:active, .RadButton_Britani.rbLinkButton.rbDisabled .rbSplitRight, .RadButton_Britani.rbLinkButton.rbDisabled .rbSplitRight.rbHovered, .RadButton_Britani.rbLinkButton.rbDisabled .rbSplitRight:active, .RadButton_Britani.rbLinkButton.rbDisabled .rbSplitRight:focus {
background-color: transparent;
background-position: -1px 0 !important
}
.RadButton_Britani.rbDisabled .rbSplitLeft, .RadButton_Britani.rbDisabled .rbSplitLeft.rbHovered, .RadButton_Britani.rbDisabled .rbSplitLeft:focus, .RadButton_Britani.rbDisabled .rbSplitLeft:active, .RadButton_Britani.rbLinkButton.rbDisabled .rbSplitLeft, .RadButton_Britani.rbLinkButton.rbDisabled .rbSplitLeft.rbHovered, .RadButton_Britani.rbLinkButton.rbDisabled .rbSplitLeft:active, .RadButton_Britani.rbLinkButton.rbDisabled .rbSplitLeft:focus {
border-right: 1px solid #cdcdcd
}
.RadButton_Britani.rbDisabled .rbSplitRight, .RadButton_Britani.rbLinkButton.rbDisabled .rbSplitRight {
border-left: 1px solid #cdcdcd
}
.RadButton_Britani .rbSplitLeft:focus, .RadButton_Britani .rbSplitLeft:active, .RadButton_Britani.rbLinkButton .rbSplitLeft:focus, .RadButton_Britani.rbLinkButton .rbSplitLeft:active {
background-color: #ffbeff;
border-right: 1px solid #ffbeff
}
.RadButton_Britani.rbVerticalButton {
padding-left: 0
}
.RadButton_Britani.rbVerticalButton .rbDecorated {
padding-left: 10px
}
.RadButton_Britani.rbVerticalButton .rbDecorated.rbPrimary {
padding-left: 40px
}
.RadButton_Britani.rbSkinnedButton, .RadButton_Britani.rbVerticalButton, .RadButton_Britani .rbDecorated, .RadButton_Britani.rbVerticalButton {
background-color: #f9f9f9;
color: #000000
}
.RadButton_Britani.rbSkinnedButton, .RadButton_Britani.rbVerticalButton {
border: 1px solid #cdcdcd
}
.RadButton_Britani.rbSkinnedButton.rbHovered, .RadButton_Britani.rbVerticalButton.rbHovered, .RadButton_Britani.rbHovered .rbDecorated {
color: #000000;
background-color: #e5e5e5
}
.RadButton_Britani.rbSkinnedButton.rbHovered, .RadButton_Britani.rbVerticalButton.rbHovered {
border: 1px solid #e8e8e8
}
.RadButton_Britani.rbSkinnedButton:active, .RadButton_Britani.rbVerticalButton:active, .RadButton_Britani.rbSkinnedButton:active .rbDecorated, .RadButton_Britani.rbVerticalButton:active .rbDecorated, .RadButton_Britani.rbPressedButton.rbSkinnedButton, .RadButton_Britani.rbPressedButton .rbDecorated {
background-color: #ffbeff;
color: #ffffff
}
.RadButton_Britani.rbSkinnedButton:active, .RadButton_Britani.rbVerticalButton:active {
border: 1px solid #ffbeff
}
.RadButton_Britani.rbSkinnedButtonChecked, .RadButton_Britani.rbSkinnedButtonChecked.rbHovered, .RadButton_Britani.rbSkinnedButtonChecked input.rbDecorated, .RadButton_Britani.rbSkinnedButtonChecked.rbHovered .rbDecorated {
background-color: #ffbeff;
border: 1px solid #ffbeff
}
.RadButton_Britani .rbToggleCheckbox, .RadButton_Britani .rbToggleCheckboxChecked, .RadButton_Britani .rbToggleCheckboxFilled, .RadButton_Britani .rbToggleRadio, .RadButton_Britani .rbToggleRadioChecked {
background-image: url('Common/radFormToggleSprite.png');
_background-image: url('Common/radFormToggleSpriteIE6.png')
}
.RadButton_Britani.RadButton.rbToggleButton, .RadButton_Britani.RadButton.rbToggleButton.rbDisabled, .RadButton_Britani.RadButton.rbToggleButton.rbDisabled.rbHovered, .RadButton_Britani.rbDisabled .rbDecorated, .RadButton_Britani.rbDisabled.rbHovered .rbDecorated {
color: #000000
}
.RadButton_Britani.RadButton.rbToggleButton.rbHovered {
border: 0 none;
color: #ffbeff
}
.RadButton_Britani.RadButton.rbToggleButton:active, .RadButton_Britani.RadButton.rbToggleButton:focus {
background-color: transparent;
border: 0
}
.RadButton_Britani.RadButton.rbLinkButton {
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
text-decoration: none;
color: #000000
}
.RadButton_Britani.RadButton.rbLinkButton.rbHovered {
background-color: #e8e8e8;
border: 1px solid #e8e8e8;
color: #000000
}
.RadButton_Britani.RadButton:active, .RadButton_Britani.RadButton:focus, .RadButton_Britani.RadButton:focus .rbDecorated, .RadButton_Britani.RadButton.rbHovered:active, .RadButton_Britani.RadButton.rbHovered:focus, .RadButton_Britani.rbPressedButton, .RadButton_Britani.RadButton.rbPressedButton, .RadButton_Britani.RadButton.rbSkinnedButtonChecked, .RadButton_Britani.RadButton.rbSkinnedButtonChecked:hover, .RadButton_Britani.RadButton.rbLinkButtonChecked, .RadButton_Britani.RadButton.rbLinkButtonChecked:hover, .RadButton_Britani.RadButton.rbVerticalButtonChecked, .RadButton_Britani.RadButton.rbVerticalButtonChecked:hover {
border: 1px solid #ffbeff;
background-color: #ffbeff;
color: #ffffff
}
.RadButton_Britani.RadButton:active .rbDecorated, .RadButton_Britani.RadButton:focus .rbDecorated, .RadButton_Britani.RadButton.rbSkinnedButtonChecked .rbDecorated, .RadButton_Britani.RadButton.rbSkinnedButtonChecked:hover .rbDecorated, .RadButton_Britani.RadButton.rbLinkButtonChecked .rbDecorated, .RadButton_Britani.RadButton.rbLinkButtonChecked:hover .rbDecorated {
color: #ffffff
}
.RadButton_Britani.rbToggleButton:active .rbText, .RadButton_Britani.rbToggleButton:focus .rbText {
color: #000000
}
.RadButton_Britani.rbSkinnedButton {
height: 22px
}
.RadButton_Britani .rbDecorated {
height: 20px
}
.RadButton_Britani.rbDisabled, .RadButton_Britani.rbDisabled .rbToggleCheckbox, .RadButton_Britani.rbDisabled .rbToggleCheckboxChecked, .RadButton_Britani.rbDisabled .rbToggleRadio, .RadButton_Britani.rbDisabled .rbToggleRadioChecked, .RadButton_Britani.rbDisabled .rbToggleCheckboxFilled {
opacity: .6
}
.RadButton_Britani.rbSkinnedButton.rbDisabled, .RadButton_Britani.rbVerticalButton.rbDisabled, .RadButton_Britani.rbLinkButton.rbDisabled, .RadButton_Britani.rbLinkButton.rbDisabled.rbHovered {
background-color: #ffffff;
color: #000000;
border: 1px solid #cdcdcd;
cursor: default
}
.RadButton_Britani.rbSkinnedButton.rbDisabled .rbDecorated, .RadButton_Britani.rbVerticalButton.rbDisabled.rbHovered .rbDecorated, .RadButton_Britani.rbVerticalButton.rbDisabled:active .rbDecorated, .RadButton_Britani.rbVerticalButton.rbDisabled:focus .rbDecorated, .RadButton_Britani.rbLinkButton.rbDisabled, .RadButton_Britani.rbLinkButton.rbDisabled.rbHovered {
background-color: #ffffff;
color: #000000
}
.RadButton_Britani.RadButton.rbToggleButton.rbDisabled, .RadButton_Britani.RadButton.rbToggleButton.rbDisabled.rbHovered, .RadButton_Britani.RadButton.rbToggleButton.rbDisabled:active, .RadButton_Britani.RadButton.rbToggleButton.rbDisabled:focus {
background-color: transparent;
background-image: none;
border: 0;
height: auto
}
.RadButton_Britani.rbLinkButton.rbRounded {
border-radius: 0
}
.RadButton_Britani .rbAdd, .RadButton_Britani .rbRemove, .RadButton_Britani .rbOk, .RadButton_Britani .rbCancel, .RadButton_Britani .rbPrevious, .RadButton_Britani .rbNext, .RadButton_Britani .rbSave, .RadButton_Britani .rbConfig, .RadButton_Britani .rbRefresh, .RadButton_Britani .rbEdit {
background-image: url('Common/rbBasicIcons16x16Dark.png') !important
}
.RadButton_Britani .rbUpload, .RadButton_Britani .rbDownload, .RadButton_Britani .rbOpen, .RadButton_Britani .rbAttach, .RadButton_Britani .rbPrint, .RadButton_Britani .rbSearch, .RadButton_Britani .rbHelp, .RadButton_Britani .rbCart, .RadButton_Britani .rbRSS, .RadButton_Britani .rbMail, .RadButton_Britani .rbFB, .RadButton_Britani .rbTwitter {
background-image: url('Common/rbExtendedIcons16x16Dark.png') !important
}
.RadButton_Britani .rbAdd24, .RadButton_Britani .rbRemove24, .RadButton_Britani .rbOk24, .RadButton_Britani .rbCancel24, .RadButton_Britani .rbPrevious24, .RadButton_Britani .rbNext24, .RadButton_Britani .rbSave24, .RadButton_Britani .rbConfig24, .RadButton_Britani .rbRefresh24, .RadButton_Britani .rbEdit24 {
background-image: url('Common/rbBasicIcons24x24Dark.png') !important
}
.RadButton_Britani .rbUpload24, .RadButton_Britani .rbDownload24, .RadButton_Britani .rbOpen24, .RadButton_Britani .rbAttach24, .RadButton_Britani .rbPrint24, .RadButton_Britani .rbSearch24, .RadButton_Britani .rbHelp24, .RadButton_Britani .rbCart24, .RadButton_Britani .rbRSS24, .RadButton_Britani .rbMail24, .RadButton_Britani .rbFB24, .RadButton_Britani .rbTwitter24 {
background-image: url('Common/rbExtendedIcons24x24Dark.png') !important
}
.RadButton_Britani.rbLinkButton {
background-color: rgb(255, 30, 255);
}
.RadButton_Britani .rbDecorated {
background-color: rgb(255, 30, 255);
}
1 Answer, 1 is accepted
The Visual Style Builder is a tool that can be used to create the base of custom skins for the Classic rendering of Telerik controls.
To create and customize skins for the modern Lightweight rendering of the components (which you are using in the provided snippet), we recommend using the Telerik Theme Builder - Theme Builder Overview.
Regards,
Peter Milchev
Progress Telerik