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

Metro Theme Button Click Color Change

12 Answers 812 Views

Button

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

12 Answers, 1 is accepted

answered on 30 Nov 2012, 06:48 AM

Hi,

Unfortunately I cannot replicate the issue at my end. The CSS works as expected for static buttons as well as dynamically created buttons. Here is the full code I tried.
aspx:

<telerik:RadButton ID="Radbutton1" Skin="Metro" Text="Button1" runat="server"></telerik:RadButton>

C#:

RadButton btn = new RadButton();

btn.Text = "click";

btn.Skin = "Metro";

form1.Controls.Add(btn);

CSS:

.RadButton_Metro.rbSkinnedButton:active, .RadButton_Metro.rbSkinnedButton:active .rbDecorated, .RadButton_Metro.rbVerticalButton:active .rbDecorated, .RadButton_Metro.rbPressedButton .rbDecorated

{

background-color: #F6781F !important;

}

Regards,
Princy.

answered on 01 Aug 2013, 06:42 AM

Hello,

I am using the following to change the background and border color of the active button:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.RadButton.RadButton_Metro.rbSkinnedButton:active,

.RadButton.RadButton_Metro.rbSkinnedButton:active .rbDecorated,

.RadButton.RadButton_Metro.rbVerticalButton:active .rbDecorated,

.RadButton.RadButton_Metro.rbPressedButton .rbDecorated {

background-color: #F6781F !important;

border: 1px solid #F6781F !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server" ID="scr1">

</asp:ScriptManager>

<telerik:RadButton runat="server" Text="RadButton" Skin="Metro"></telerik:RadButton>

</form>

</body>

</html>

I do not experience the issue showun on the screenshot. To provide further help we will need your code - ASPS/CSS with the issue reproduced in order to be able to give a proper solution.

Regards,
Bozhidar
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 06 Aug 2013, 07:55 AM

radcheckbox.jpg

Hi Bozhidar
Many thanks to you it worked fine.

I am changing the background color of button type check box. I managed to change normal background color, but its not changing the mouse over and selected color.

Could you please help me to change mouse over and selected background and border color.
Kindly refer the attached screen shot

Thanks
Darren

answered on 07 Aug 2013, 09:25 AM

Hi,

The bellow code should work:

<!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>

<style type="text/css">

span.RadButton_MetroTouch.RadButton.rbToggleButton:hover {

border: 0 none !important;

background-color: red;

color: #fff !important;

}

span.RadButton_MetroTouch.RadButton.rbToggleButton:active,

span.RadButton_MetroTouch.RadButton.rbToggleButton:focus {

color: red !important;

background-color: yellow !important;

border: 1px solid green !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server" ID="scr1">

</asp:ScriptManager>

<telerik:RadButton runat="server" ButtonType="ToggleButton" Text="ToggleButton" ToggleType="CheckBox"

Skin="MetroTouch">

</telerik:RadButton>

</form>

</body>

</html>

Regards,
Bozhidar
Telerik

answered on 07 Aug 2013, 10:17 AM

radcheckbox-2.jpg

Hi Bozhidar
Thanks for your reply
I have tried it, but did not work, its not changing the checkbox color. Kindly refer the attachment.

Below is my code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="NGSSoftware.WebLicensing.Web.test2" %>

<%@ Register TagPrefix="toolkit" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!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>

<style type="text/css">

span.RadButton_MetroTouch.RadButton.rbToggleButton:hover

{

border: 0 none !important;

background-color: red;

color: #fff !important;

}

span.RadButton_MetroTouch.RadButton.rbToggleButton:active, span.RadButton_MetroTouch.RadButton.rbToggleButton:focus

{

color: red !important;

background-color: yellow !important;

border: 1px solid green !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<toolkit:RadScriptManager ID="scriptManager" runat="server" EnablePageMethods="true">

<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>

</toolkit:RadScriptManager>

<div>

<toolkit:RadButton ID="cb1" runat="server" Text="Normal" ButtonType="ToggleButton"

ToggleType="CheckBox" AutoPostBack="false" />

<br />

<toolkit:RadButton ID="cb2" runat="server" Text="Mouse Over" ButtonType="ToggleButton"

ToggleType="CheckBox" AutoPostBack="false" />

<br />

<toolkit:RadButton ID="cb3" runat="server" Text="Checked" ButtonType="ToggleButton"

ToggleType="CheckBox" AutoPostBack="false" />

</div>

</form>

</body>

</html>

Thanks
Darren

answered on 07 Aug 2013, 10:45 AM

Hello,

I have checked and it works as expected on my side. Would you like to change the button background around the checkbox, or the checkbox color itself? If you like to change the checkbox colors, you have to edit the background image sprite as it is stated at: Creating RadButton Custom Sprite. Note that custom skins are custom solution and it is out of the scope of our support. Even if we try to give some help and guidelines, it is a developer's responsibility to create and maintain a custom solution, including custom skins and all CSS/sprite changes.

Regards,
Bozhidar
Telerik

answered on 08 Aug 2013, 06:32 AM

Hello,

As I mentioned in my previous post, checkbox colors are coming from a background image sprite. That means that they could not be changed by a CSS property, but you have to open the current background image in a image editing software such as Adobe Photoshop and to change the colors as you like. Creating RadButton Custom Sprite explains in details how to do that. Placed bellow are the necessary steps. Even if the images sprites location and/or names are different, the process is istill the same to edit the image.

Modifying the Image Sprites to Achieve Totally New Looks for the Skin

Each skin of RadButton consists of two image sprites that are contained in the Skins/SkinName/Button folder. These are:

1. ButtonSprites.gif contains horizontal and vertical buttons and split border and arrows also.

2. ToggleSprites.gif contains check boxes and radio buttons images.

Explained below is a simple method for modifying the image sprites of RadButton with Adobe© PhotoShop to achieve new looks without creating a new design.

2. From the menu bar select Image » Mode » RGB Color to prepare the images for editing (convert from optimized Indexed Color to RGB Color):

3. Press Set Foreground Color in PhotoShop's toolbox to invoke the color picker dialog:

4. Select a color that you like from the color dialog and then close it:

5. Choose the first image you will modify, for example ToggleSprite.gif, and select Image » Adjustments Hue » / Saturation to open the Hue / Saturation dialog of Adobe© PhotoShop:

6. Check the colorize checkbox in the Hue / Saturation dialog, and the image you have selected will be immediately colorized in the hue you have selected from the toolbox:

You may then play with the Hue, Saturation and Lightness sliders to fine tune or further modify the image. Make sure you memorize the values of the sliders, as you will need to add the same settings to all other images in order to achieve consistent looks

7. Press "OK" when you are finished

8. Select Image » Mode » Indexed Color to flatten the layers of the image

9. Save and close the image

Regards,
Bozhidar
Telerik

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Metro Theme Button Click Color Change

12 Answers, 1 is accepted

Modifying the Image Sprites to Achieve Totally New Looks for the Skin