How to change Remove button style?

[Lenny_shp]

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

[Shinu]

Hi Lenny,

Try adding following CSS and see whether it helps.

css:

    <style type="text/css">
        .RadUpload_Simple.ruRemove
        {
            background: transparent !important;
            background-color: #919191 !important;
            border-color: #616161 !important;
            border-style: solid !important;
            -moz-box-sizing: content-box !important;
            border-width: 1px !important;
            line-height: 15px !important;
            padding: 4px 4px 0 !important;
            float: none !important;
            vertical-align:middle !important;
            color: white !important;
        }
    </style>

-Shinu.

[Kamen Bundev]

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.

[Lenny_shp]

[Kamen Bundev]

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.

[Lenny_shp]

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!

[Kamen Bundev]

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.