How Override Particular Button Font/Colors

[Kevin]

Using Q1 2009, and setting the Skin to WebBlue in the web.config file.

I'm trying to find the most straightforward (and quick) way to set up a couple of different button styles that override the default skin.  For example I need one button that overrides the default to have a different font color, and an orange background.

What  have been trying is to:
1. create an additional buttonsprites.gif file that has the colors I need
2. create  inline styles that override the decorated styles on a particular button with my changes.

So I have created a new gif file called button_orange.gif.  My inline styles look like this:

    <style type="text/css">
        #divTop
        {
            width:760px;
        }
        #divTop .rfdSkinnedButton span.rfdInner
        {
            font-family: Verdana, Arial, Sans-Serif !important;
            font-size: 9px !important;
        }
        #divBottom
        {
            width:760px;
        }
        #divBottom .rfdSkinnedButton span.rfdInner
        {
            font-family: Verdana, Arial, Sans-Serif !important;
            font-size: 9px !important;
        }
        #divBottom.orange a.RadForm_WebBlue, a.RadForm_WebBlue span
        {
            background-image: url(../Images/Sprites/button_orange.gif) !important;
            color: #ededed !important;
        }

    </style>

What I am trying to do, is in the divBottom div, where an asp button exists that is assigned a cssclass of "orange", I am trying to override that particular button's background-image to use my newly created sprite file and also to set color.

In the style above, the .rfdSkinnedButton style inside the div styles works ok.  However I can't seem to get the right style overrides for the background-image change.

The code that has the actual button in it is below so you can see how I have the div and styles set up:

<div id="divBottom">
        <table width="100%">
            <tr>
                <td align="left">
                    <asp:TextBox ID="txtSendTestTo" runat="server" Text="{SEND TEST TO:}" MaxLength="75"></asp:TextBox>
                    &nbsp;<asp:Button ID="btnSendTestTo" runat="server" Text="{SEND TEST}" CssClass="orange" />
                </td>
                <td align="right">
                    &nbsp;<asp:Button ID="btnSaveProgress" runat="server" Text="{SAVE PROGRESS}" />
                    &nbsp;<asp:Button ID="btnCancel" runat="server" Text="{CANCEL}" />
                    &nbsp;<asp:Button ID="btnDeploy" runat="server" Text="{DEPLOY EMAIL}" />
                </td>
            </tr>
        </table>
    </div>

You can see that the btnSendTestTo button is using the cssclass of orange. 

Strangely, this code causes all buttons on the page to use my new color and btnSendTestTo is the button that does NOT use it!  I assume I am overriding the incorrect styles.

Hopefully this approach can be done to create some quick "alternate" color schemes that override what the skin provides, so that I can have a few different button styles.  Need to differentiate between button types and they are too spread around on this particular page to go with zones (at least I think they are).

Advice appreciated!

Thx

[Martin]

Hello Kevin,

Please, prepare and send us a small running project with your layout, styles and the result you need to achieve. We will be happy if we help you with this.

All the best,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.