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

Linkbutton skin not applied

1 Answer 27 Views
Visual Style Builder
This is a migrated thread and some comments may be shown as answers.
david
Top achievements
Rank 1
david asked on 21 May 2018, 08:38 PM

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

Sort by
0
Peter Milchev
Telerik team
answered on 24 May 2018, 12:26 PM
Hello David,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Visual Style Builder
Asked by
david
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Share this question
or