Uploader Controls customization

Hi, I’m working with the Uploader and would like to customize it.
In particular what I’d like to do is to use my own buttons to browse,add files, clear the list. One solution I’ve tested is to customize the css but I’d like to move the control toolbar away from the bottom of the files list, into another div, for example (see attached picture as an example).
Any suggestion?


Hi
You can try the next styles:

[code].dhxform_obj_dhx_skyblue .dhx_file_uploader div.dhx_upload_controls div.dhx_file_uploader_button.button_browse{
background-image: url(“…/___img/plus.png”) !important;
}

.dhxform_obj_dhx_skyblue .dhx_file_uploader div.dhx_upload_controls div.dhx_file_uploader_button.button_upload{
    background-image: url("../___img/expand.gif") !important;
    background-position: 0 0 !important;
}
.dhxform_obj_dhx_skyblue .dhx_file_uploader div.dhx_upload_controls div.dhx_file_uploader_button.button_clear{
    background-image: url("../___img/delete.gif") !important;
    background-position: 0 0 !important;
}
.dhxform_obj_dhx_skyblue .dhx_file_uploader.dhx_file_uploader_title div.dhx_upload_controls div.dhx_file_uploader_button.button_browse {
    background-image: url("../___img/box58.jpg") !important;
    background-position: 0 0 !important;
}

.dhxform_obj_dhx_skyblue fieldset.dhxform_fs {
    border: 1px solid #ffffff;
    clear: left;
    margin-top: 5px;
    padding: 5px;
    width: 100%;
    color: #ffffff !important;
    background-color: #000080;
}
.dhxform_obj_dhx_skyblue fieldset.dhxform_fs legend.fs_legend {
    color: #ffffff !important;
    padding: 10px 4px 1px 1px !important;
}
.dhxform_obj_dhx_skyblue .dhx_file_uploader div.dhx_upload_files div.dhx_file_param.dhx_file_name{
    color: #ffffff;
}
.dhxform_obj_dhx_skyblue .dhx_file_uploader div.dhx_upload_files div.dhx_file_param.dhx_file_progress{
    color: #ffffff;
}
.dhxform_obj_dhx_skyblue .dhx_file_uploader.dhx_file_uploader_title div.dhx_upload_controls div.dhx_file_uploader_button.button_info{
    color: #ffffff !important;
}

.dhxform_obj_dhx_skyblue fieldset.dhxform_fs {
    border: 1px solid #000080 !important;
}[/code]

The result is:


But pay attention that these styles was applied to state-alone uploader. You need to use i.e. ID to avoid applying this to the whole form.

Thanks Darya, this is exactly what I did, but how can you move controls to another position? Is this possible? :unamused:

Unfortunately, if you change the CSS here, it will brake some other styles.