PressedCssClass

4 posts, 0 answers
  1. Christian
    Christian avatar
    2 posts
    Member since:
    May 2012

    Posted 05 Nov 2013 Link to this post

    Hi

    For our site I use the Metro Skin, however for certain buttons I want to overwrite the Background color. I am able to do this except for when the button is pressed. I created a CSS class and used the PressedCssClass but it doesn't do anything. Here is my code

    <td align="right" height="30">
            <telerik:RadButton ID="RadButton3" runat="server"  ButtonType="LinkButton" OnClick="orderupdate_Click" PressedCssClass="buttonpressed" HoveredCssClass="buttonpressed">
            </telerik:RadButton
    </td>

    and the CSS class

    .buttonpressed {
        background-color: #000000 !important;
       }

    thank you
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 06 Nov 2013 Link to this post

    Hi Christian,

    What I can suggest is that you declare a more specific selector rather than using the !important clause. This will avoid the conflict with the importance of the CssClasses. For example:
    <style>
        html body form .RadButton.RadButton_Default.rbLinkButton.buttonhovered {
            background-color: green;
        }
     
        html body form .RadButton.RadButton_Default.rbLinkButton.buttonpressed {
            background-color: red;
        }
    </style>
    ASPX:
    <telerik:RadButton ID="RadButton1" runat="server" ButtonType="LinkButton" PressedCssClass="buttonpressed" HoveredCssClass="buttonhovered" Text="Click">
    </telerik:RadButton>


    Regards,
    Danail Vasilev
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Christian
    Christian avatar
    2 posts
    Member since:
    May 2012

    Posted 06 Nov 2013 Link to this post

    Hi

    I added the code and when I hover over the button it turns green and when I click it it turns red. However, if I remove my cursor over the button, it turns blue before the page is reloaded. Is there another state other than Pressed and Hover that I have to change?

    thank you
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 11 Nov 2013 Link to this post

    Hi Christian,

    Generally the RadButton has three types of states - normal, hover (when the mouse pointer is placed over the button) and active (when the button is clicked). The exception is the LinkButton which doesn't have embedded styles for the active state, however, it can be easily set through the PressedCssClass property. For example:
    <style type="text/css">
        /*Normal State*/
        html body form .RadButton.RadButton_Default.rbLinkButton {
            background-color: lightblue;
        }
        /*Hover State*/
        html body form .RadButton.RadButton_Default.rbLinkButton:hover {
            background-color: green;
        }
        /*Active State*/
        html body form .RadButton.RadButton_Default.rbLinkButton.buttonpressed {
            background-color: red;
        }
    </style>
    ASPX:
    <telerik:RadButton ID="RadButton1" runat="server" ButtonType="LinkButton" Text="Click" PressedCssClass="buttonpressed">
    </telerik:RadButton>

    I have also created a short video that illustrates the switching of the three states - the normal state has a lightblue color for the background-color; the hover state has a green color for the background-color and the active state has a red color for the background-color.

    If the above information, however, is not useful enough could you please elaborate more into the issue, so that we can provide a reliable solution if possible?

    You may also find useful CSS Skin File Selectors help article.

    Regards,
    Danail Vasilev
    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.
Back to Top