Material skin

[Kjell]

How to change the background color to blue for Material skin

[Marin Bratanov]

Hello Kjell,

One way is to create a custom skin with the desired color: https://docs.telerik.com/devtools/aspnet-ajax/theme-builder/create-and-download.

Another is to inspect the rendered HTML and create a CSS override that will apply the desired modification. For example:

<style>
button.RadButton_Material.rbButton{
    background-color: blue;
}

button.RadButton_Material.rbButton.rbHovered:hover{
    background-color: aqua;
}
</style>
<telerik:RadPushButton runat="server" id="rbp1" Skin="Material" Text="blue material button"></telerik:RadPushButton>

Regards,
Marin Bratanov
Progress Telerik

[Greg]

Marin:

That works if you want to change ALL buttons to the same color.

How do we create CSS that allows us to have many different button colors: e.g. I want a red button, blue button, green button, orange button, etc.? I want to assign to a button a class that changes the hovered state appearance, etc. based on the example colors above.

[Marin Bratanov]

Hello Greg,

You should cascade the rules through the specific class you set. 

Here's an example:

<style>
    button.RadButton_Material.rbButton.blue {
        background-color: blue;
    }

    button.RadButton_Material.rbButton.rbHovered.blue:hover {
        background-color: aqua;
    }

    button.RadButton_Material.rbButton.red {
        background-color: red;
    }

    button.RadButton_Material.rbButton.rbHovered.red:hover {
        background-color: pink;
    }
</style>
<telerik:RadPushButton CssClass="blue" runat="server" ID="rbp1" Skin="Material" Text="blue material button"></telerik:RadPushButton>
<telerik:RadPushButton CssClass="red" runat="server" ID="rbp2" Skin="Material" Text="red material button"></telerik:RadPushButton>

Regards,
Marin Bratanov
Progress Telerik