Metro Theme Button Click Color Change

13 posts, 0 answers
  1. Ryan
    Ryan avatar
    4 posts
    Member since:
    Sep 2011

    Posted 29 Nov 2012 Link to this post

    We like the Metro theme but would like to make a SMALL change. When the button is clicked we would like it's background color to change to #F6781F (orange) from the standard metro blue color. How can we do this???

    Thank you so much!
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 29 Nov 2012 Link to this post

    Hi Ryan,

    Try overriding the default CSS as follows to achieve your scenario.

    CSS:
    <style type="text/css">
        .RadButton_Metro.rbSkinnedButton:active, .RadButton_Metro.rbSkinnedButton:active .rbDecorated, .RadButton_Metro.rbVerticalButton:active .rbDecorated, .RadButton_Metro.rbPressedButton .rbDecorated
        {
            background-color: #F6781F !important;
        }
    </style>

    Hope this helps.

    Regards,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ryan
    Ryan avatar
    4 posts
    Member since:
    Sep 2011

    Posted 29 Nov 2012 Link to this post

    Princy,

    That's great! A couple of things. There is still a small 1px border in blue and what if I'm generating buttons dynamically. On the page I'm working with I generate about 10 RadButtons but then I have a static RadButton at the end of the page. This CSS changed the static RadButton but the generated buttons still use the blue color. Does the class .RadButton_Metro need to change to the RadButton id like .RadButton_myRB1_Metro, .RadButton_myRB2_Metro, etc?

    Thanks again!
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Nov 2012 Link to this post

    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.
  6. darren
    darren avatar
    8 posts
    Member since:
    Jul 2012

    Posted 30 Jul 2013 Link to this post

    Hi
    I tried to override the style but it leaves blue color from right, kindly refer the screen shot.
    Any help would be really appreciated


    Thanks
    Darren
  7. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 01 Aug 2013 Link to this post

    Hello,

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

    <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.
  8. darren
    darren avatar
    8 posts
    Member since:
    Jul 2012

    Posted 06 Aug 2013 Link to this post

    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
  9. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 07 Aug 2013 Link to this post

    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">
    <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
    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.
  10. darren
    darren avatar
    8 posts
    Member since:
    Jul 2012

    Posted 07 Aug 2013 Link to this post

    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">
    <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 />
            <br />
            <toolkit:RadButton ID="cb2" runat="server" Text="Mouse Over" ButtonType="ToggleButton"
                ToggleType="CheckBox" AutoPostBack="false" />
            <br />
            <br />
            <toolkit:RadButton ID="cb3" runat="server" Text="Checked" ButtonType="ToggleButton"
                ToggleType="CheckBox" AutoPostBack="false" />
        </div>
        </form>
    </body>
    </html>


    Thanks
    Darren
  11. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 07 Aug 2013 Link to this post

    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
    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.
  12. darren
    darren avatar
    8 posts
    Member since:
    Jul 2012

    Posted 07 Aug 2013 Link to this post

    Hi
    I could change background colours etc. easily, wanted to change checkbox colours as marked in screen shot


    Thanks
    Darren
  13. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 08 Aug 2013 Link to this post

    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.

    1. Drag ToggleSprites.gif and ButtonSprites.gif in Adobe© PhotoShop.

    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
    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.
  14. darren
    darren avatar
    8 posts
    Member since:
    Jul 2012

    Posted 08 Aug 2013 Link to this post

    Hi Bozhidar
    Thanks for you explanations, Its really appreciated, I will work on it.


    Thanks
    Darren 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017