Hi,
Note: it's quick and dirty :)
I needed to customize the "Select" button's view to match UI, it should have had:
1)only button, no 'fake' file input, no file list, nothing, only immediate 1 file upload (to set current picture)
2)round corners
3)different style when hovered
4)resize to match inner text when site's language is changed
Note: when button is hovered in browsers that support Flash/Silverlight cursor doesn't change to 'pointer' type, but does in IE 64-bit.
I didn't investigate much, simple setting cursor: pointer !important; didn't do the trick (
admins, any ideas?)
Ok, you will need to create 3 background png images (2 for button's left part (one with active image another passive) and 1 for the right part, the round corner). Note that I use one of left background images as background for ruUploadProgress span when there is an upload happening with a file name being uploaded.
.createContentPageAdditionalOptions .RadUpload
{
width
:
100px
!important
;
}
.RadUpload input
{
font-family
:
verdana
!important
;
}
.createContentPageAdditionalOptions .RadUpload input.ruFakeInput
{
display
:
none
;
}
.RadUpload input.ruBrowse
{
background
:
url
(/Images/btnLeftPartInactive.png)
top
left
no-repeat
!important
;
width
:
auto
!important
;
line-height
:
21px
;
height
:
23px
;
text-align
:
left
;
margin
:
0px
3px
0px
0px
!important
;
padding
:
0px
8px
3px
18px
!important
;
}
.createContentPageAdditionalOptions .RadUpload .ruInputs
{
text-align
:
center
;
}
.RadUpload input.ruBrowse,
.createContentPageAdditionalOptions .RadUpload .ruUploadProgress,
.createContentPageAdditionalOptions .RadUpload .ruCancel,
.createContentPageAdditionalOptions .RadUpload .ruRemove
{
color
:
#fff
!important
;
}
.createContentPageAdditionalOptions .RadUpload .ruUploadProgress
{
background
:
url
(/Images/btnLeftPartInactive.png)
top
left
no-repeat
!important
;
margin
:
0px
3px
0px
0px
!important
;
height
:
23px
;
overflow
:
hidden
;
width
:
80px
;
}
.RadUpload input.ruButtonHover
{
background
:
url
(/Images/btnLeftPartActive.png)
top
left
no-repeat
!important
;
color
:
#d14b35
!important
;
}
.RadUpload .ruFileWrap
{
width
:
auto
!important
;
padding
:
0px
!important
;
background
:
url
(/Images/btnRightPart.png)
top
right
no-repeat
!important
;
}
.RadUpload input.ruBrowse,
.createContentPageAdditionalOptions .RadUpload .ruCancel,
.createContentPageAdditionalOptions .RadUpload .ruRemove,
.RadUpload input.ruFileInput
{
cursor
:
pointer
!important
;
}
Note
createContentPageAdditionalOptions class, I use it here cause I don't want to change the view of all asyncuploads I have, just particular one, next step, on the page where you have the control add following snippet:
This will enable native hovering to work when browser is using Flash/Silverlight object.
Finally my control:
and JS it calls when upload completes:
so that postback happens immediately and picture is set.
That's it, hopefully someone will find this usefull :)
P.S.: attached file has 4 views: default, hovered, uploading and default again (after upload)