How to overwrite this css

2 posts, 0 answers
  1. Vincent
    Vincent avatar
    70 posts
    Member since:
    Jul 2008

    Posted 20 Feb 2011 Link to this post

    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 */
    }
  2. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 21 Feb 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top