[Solved] Migrating custom skin to AJAX radUpload

[ThePope]

Hi all,
I am having trouble migrating my ASP.NET classic RadUpload custom skin to the new AJAX format. Please help.

Here is what it was:

/* r.a.d.upload default embedded skin skin */

.RadUploadTable
{
    background: #f7f7f7;
    border: solid 1px #e5e5e5;
    border-collapse: collapse !important;
    filter: progid:DXImageTransform.Microsoft.dropShadow(Color=e5e5e5,offX=2,offY=2,positive=true);
    margin: 5px 0px;
    width: 450px;
    font: normal 8px Arial, Verdana, Sans-serif;
    color: #333;
}
.RadUploadTable td
{
    padding: 4px;
}
.RadUploadButtonArea
{
    background: transparent;
}

.RadUploadButton,
.radUploadButtonMedium
{
    background: white url('Img/radUploadBtnMedium.gif') no-repeat;
    border: 0px;
    height: 22px;
    width: 115px;
    font: normal 11px Arial, Verdana, Sans-serif;
    color: #666;
}

.RadUploadButtonDisabled
{
    background: white url('Img/radUploadBtnMedium.gif') no-repeat;
    border: 0px;
    height: 22px;
    width: 115px;
    font: normal 11px Arial, Verdana, Sans-serif;
    color: #666;
    filter:alpha(opacity=30);
    -moz-opacity:0.5;
    opacity: 0.5;
}

.RadUploadFileSelector
{
    /* checkbox */
}

.RadUploadInputField
{
    width: 300px;
    border: solid 1px #cfcfcf;
    background: white;
    border-right: 0px;
    vertical-align: top;
    height: 17px;
    _width: 300px;
}

input.RealFileInput
{
    position: relative;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
    width: 400px;
}

.RadUploadSelectButton
{
    border: 0px;
    background: transparent url('Img/select.gif') no-repeat;
    font: normal 11px Arial, Verdana, Sans-serif;
    color: #666;
    height: 22px;
    width: 67px;
}

.RadUploadRemoveButton
{
    border: 0px;
    background: transparent url(Img/radUploadBtnSmall.gif) no-repeat;
    font: normal 11px Arial, Verdana, Sans-serif;
    color: #666;
    height: 22px;
    width: 68px;
    float: right;
}

.RadUploadClearButton
{
    border: 0px;
    background: transparent url('Img/radUploadBtnSmall.gif') no-repeat;
    font: bold 11px Arial, Verdana, Sans-serif;
    color: #666;
    height: 22px;
    width: 68px;
    float: right;
}

input.NoSkinnedFileUnput
{
    border: solid 1x #1f1f1f;
}

And here is what I have so far:

.RadUpload_MTCDefault
{
    background: #f7f7f7;
    border: solid 1px #e5e5e5;
    border-collapse: collapse !important;
    filter: progid:DXImageTransform.Microsoft.dropShadow(Color=e5e5e5,offX=2,offY=2,positive=true);
    margin: 5px 0px;
    width: 450px;
    font: normal 8px Arial, Verdana, Sans-serif;
    color: #333;

}
.RadUpload_MTCDefault .RadUploadTable td
{
    padding: 4px;
}
.RadUpload_MTCDefault .ruButtonArea
{
    background: transparent;
}

.RadUpload_MTCDefault .ruButton,
.RadUpload_MTCDefault .ruButtonMedium
{
    background: white url('Upload/radUploadBtnMedium.gif') no-repeat;
    border: 0px;
    height: 22px;
    width: 115px;
    font: normal 11px Arial, Verdana, Sans-serif;
    color: #666;
}

.RadUpload_MTCDefault .ruDisabled
{
    background: white url('Upload/radUploadBtnMedium.gif') no-repeat;
    border: 0px;
    height: 22px;
    width: 115px;
    font: normal 11px Arial, Verdana, Sans-serif;
    color: #666;
    filter:alpha(opacity=30);
    -moz-opacity:0.5;
    opacity: 0.5;
}

.RadUpload_MTCDefault .ruFileSelector
{
    /* checkbox */
}

.RadUpload_MTCDefault .ruInputField
{
    width: 300px;
    border: solid 1px #cfcfcf;
    background: white;
    border-right: 0px;
    vertical-align: top;
    height: 17px;
    _width: 300px;
}

.RadUpload_MTCDefault ruInput.RealFileInput
{
    position: relative;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
    width: 400px;
}

.RadUpload_MTCDefault .ruBrowse
{
    border: 0px;
    background: transparent url('Upload/select.gif') no-repeat;
    font: normal 11px Arial, Verdana, Sans-serif;
    color: #666;
    height: 22px;
    width: 67px;
}

.RadUpload_MTCDefault .ruRemove
{
    border: 0px;
    background: transparent url(Upload/radUploadBtnSmall.gif) no-repeat;
    font: normal 11px Arial, Verdana, Sans-serif;
    color: #666;
    height: 22px;
    width: 68px;
    float: right;
}

.RadUpload_MTCDefault .ruClear
{
    border: 0px;
    background: transparent url('Upload/radUploadBtnSmall.gif') no-repeat;
    font: bold 11px Arial, Verdana, Sans-serif;
    color: #666;
    height: 22px;
    width: 68px;
    float: right;
}

.RadUpload_MTCDefault ruInput.NoSkinnedFileUnput
{
    border: solid 1x #1f1f1f;
}

The two items that are not working for me are:

.RadUpload_MTCDefault .RadUploadTable td

{

padding: 4px;

}

and

.RadUpload_MTCDefault .ruClear

{

border: 0px;

background: transparent url('Upload/radUploadBtnSmall.gif') no-repeat;

font: bold 11px Arial, Verdana, Sans-serif;

color: #666;

height: 22px;

width: 68px;

float: right;

}

How do you customize the look and feel of the Clear button in the new format? Can you specify padding between the cells of the table in a radupload?

Haven't had any luck with either issue. Any help would be appreciated.

Thanks,
Patrick

[Kamen Bundev]

Hello,

If you open a support ticket and send the skin and any images that you use, I can convert the skin to the new format for you.

Kind regards,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.