This is a migrated thread and some comments may be shown as answers.

How to change Remove button style?

6 Answers 140 Views
Upload (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Lenny_shp
Top achievements
Rank 2
Lenny_shp asked on 28 Dec 2009, 03:51 PM
2009.3.1210.35
I would like the [Remove] button to render the same gray button as [Select] for the Simple skin.

6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 29 Dec 2009, 09:00 AM
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.
0
Kamen Bundev
Telerik team
answered on 29 Dec 2009, 02:00 PM
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.
0
Lenny_shp
Top achievements
Rank 2
answered on 04 Jan 2010, 10:41 PM

0
Accepted
Kamen Bundev
Telerik team
answered on 08 Jan 2010, 12:32 PM
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.
0
Lenny_shp
Top achievements
Rank 2
answered on 08 Jan 2010, 04:35 PM
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!
0
Accepted
Kamen Bundev
Telerik team
answered on 11 Jan 2010, 09:57 AM
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.
Tags
Upload (Obsolete)
Asked by
Lenny_shp
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 1
Kamen Bundev
Telerik team
Lenny_shp
Top achievements
Rank 2
Share this question
or