How to change Remove button style?

Thread is closed for posting
7 posts, 2 answers
  1. Lenny_shp
    Lenny_shp avatar
    343 posts
    Member since:
    Jul 2006

    Posted 28 Dec 2009 Link to this post

    2009.3.1210.35
    I would like the [Remove] button to render the same gray button as [Select] for the Simple skin.

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Dec 2009 Link to this post

    Hi Lenny,

    Try adding following CSS and see whether it helps.

    css:
     
        <style type="text/css"
            .RadUpload_Simple.ruRemove 
            { 
                backgroundtransparent !important; 
                background-color#919191 !important; 
                border-color#616161 !important; 
                border-stylesolid !important; 
                -moz-box-sizing: content-box !important; 
                border-width1px !important; 
                line-height15px !important; 
                padding4px 4px 0 !important; 
                floatnone !important; 
                vertical-align:middle !important; 
                colorwhite !important; 
            } 
        </style> 

    -Shinu.
  3. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 29 Dec 2009 Link to this post

    Hello Lenny_shp,

    Add this CSS rule to your page to change the look of your remove button:
    div.RadUpload .ruRemove
    {
        background-position: 0 0;
        cursor: default;
        font-size: 11px;
        padding: 0 0 2px;
        width: 65px;
    }

    If you also want to have hover on your remove button, add these two rules:
    div.RadUpload .ruInputs li .ruButtonHover
    {
        background-position: 100% 0;
    }
    div.RadUpload .ruInputs .ruActions .ruButtonHover
    {
        background-position: 100% -23px;
    }

    and this javascript on pageLoad:
    function pageLoad() {
        $telerik.$('.ruRemove').bind("mouseover", function(e) {
                var $el = $telerik.$(e.target);
                if (!$el.hasClass('ruButtonHover'))
                    $el.addClass('ruButtonHover');
            })
            .bind("mouseout", function(e) {
                $telerik.$(e.target).removeClass('ruButtonHover');
            });
    }

    Let me know if that helps.

    Regards,
    Kamen Bundev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  4. Lenny_shp
    Lenny_shp avatar
    343 posts
    Member since:
    Jul 2006

    Posted 04 Jan 2010 Link to this post


  5. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 08 Jan 2010 Link to this post

    Hello Lenny_shp,

    I'm sorry, I didn't notice you are talking about the Simple skin. There are no backgrounds images there, so these CSS and javascript should be enough for changing the look of the Remove button:
    div.RadUpload_Simple input.ruRemove
    {
        background-color: #919191;
        border: 1px solid #505050;
        color: #fff;
        background-position: 0 0;
        cursor: default;
        font-size: 11px;
        padding: 0 0 2px;
        width: 65px;
    }

    and
    function pageLoad() {
        $telerik.$('.ruRemove').bind("mouseover", function(e) {
                var $el = $telerik.$(e.target);
                if (!$el.hasClass('ruButtonHover'))
                    $el.addClass('ruButtonHover');
            })
            .bind("mouseout", function(e) {
                $telerik.$(e.target).removeClass('ruButtonHover');
            });
    }

    All the best,
    Kamen Bundev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Lenny_shp
    Lenny_shp avatar
    343 posts
    Member since:
    Jul 2006

    Posted 08 Jan 2010 Link to this post

    FYI, it renders the color correctly for the first Upload file, however when the 2nd file is added the [Remove] button does not highlight when hovered over.

    I added OnClientAdded="OnClientAddedHandler"  and placed your code in this function instead of pageLoad and now all subsequent files' [Remove] get the highlight.

    [Edit] Yes the .live option below worked also!
  7. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 11 Jan 2010 Link to this post

    Hello Lenny_shp,

    Another way to resolve that is by changing both bind() jQuery methods to live() in the javascript I sent you, this way you won't need to attach handlers on your RadUploads:
    function pageLoad() {
        $telerik.$('.ruRemove').live("mouseover", function(e) {
                var $el = $telerik.$(e.target);
                if (!$el.hasClass('ruButtonHover'))
                    $el.addClass('ruButtonHover');
            })
            .live("mouseout", function(e) {
                $telerik.$(e.target).removeClass('ruButtonHover');
            });
    }


    Regards,
    Kamen Bundev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top