How to overwrite this css

[Vincent]

Hi Telerik Team

I would like to create my custom button with our own designed image. I copied the specific style into my own custom skin project and change the buttonsprite.gif with my own design, but my image is heigher than default one, so I have to overwrite the default common style. according to telerik suggest, it's not recommend to "important" keyword. So can someone tell me how can I overwrite the following style in my custom skin css file? I try to put my custom name in front of them, e.g. .RadButton_LongWithImage .rbSkinnedButton, but it doesn't work.

.rbSkinnedButton
{
    display: inline-block;
    position: relative;
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0 none;
    height: 22px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    background-position: right 0;
    padding-right: 4px; /* this value is hacked for webkit */
}


.rbDecorated
{
    display: block;
    height: 22px;
    padding: 0 6px 0 10px;
    border: 0;
    text-align: center;
    background-position: left -22px;
    overflow: visible;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    -wbkite-border-radius: 0; /* set default border-radius to 0 in mobile safari */
}

[Bozhidar]

Hello Vincent,

To override the CSS, you should use a heavier selecotr. The selector becomes heavier, if you use one more html element in the CSS cascade. In a near future we will release a tutorial describing how to create custom button with a different height. Here I am pasting the CSS used for overriding the default height in order to create 40px height button. The CSS class used is called customHeight40, which you could replace with your own class:

<style type="text/css">
        /* IE7 line height */
        *+html a.customHeight40 input.rbDecorated
        {
            line-height: 40px !important;
        }
        /* new sprite */
        a.customHeight40,
        .customHeight40 input.rbDecorated
        {
            background-image: url(customHeight.gif) !important;
        }
        /* right rounded corner position */
        a.customHeight40
        {
            background-position: right 0;
        }
        /* left rounded corner position */
        a.customHeight40 input.rbDecorated
        {
            background-position: 0 -40px;
        }
        /* right rounded corner position hover state */
        a.customHeight40:hover
        {
            background-position: right -80px;
        }
        /* left rounded corner position hover state */
        a.customHeight40:hover input.rbDecorated
        {
            background-position: left -120px;
        }
        /* right rounded corner position active and focus states */
        a.customHeight40:focus,
        a.customHeight40:active
        {
            background-position: right -160px;
        }
        /* left rounded corner position active and focus states */
        a.customHeight40:focus input.rbDecorated,
        a.customHeight40:active input.rbDecorated
        {
            background-position: left -200px;
        }
        /* IE and Opera Focus and Active state fix with additional class, should be used !important */
        a.customHeight40.rbPressedButton
        {
            background-position: right -160px !important;
        }
        a.customHeight40.rbPressedButton input.rbDecorated
        {
            background-position: left -200px !important;
        }
        /* IE8 Onclickg filckering Bug fix */
        a.customHeight40.rbPressedIE8 input.rbDecorated,
        a.customHeight40.rbPressedIE8Rtl input.rbDecorated
        {
            -ms-background-position-x: 1px !important;
            -ms-background-position-y: -199px !important;
        }

        a.customHeight40.rbPressedIE8Rtl input.rbDecorated
        {
            -ms-background-position-x: -1px !important;
        }

/* fix end */
</style>

Greetings,
Bojo
the Telerik team