Page History

...

Code Block

language	css

.media-upload fieldset {   /*removes border*/
	border: none;
}
.media-upload fieldset span{  /*hides title*/
	display: none;
}

To float the 'files' section to the right style the 'choose file' and 'upload' button(you can also use 'fixed' position type to place them exactly where you would want them):

Code Block

language	css

.media-upload fieldset wicket-mfu-caption{ /*float 'files' section to the right */ 
    float: right-choose-btn{ /*'choose file' button container*/
   width:100px;
   height:40px;
   position:relative;
   background-image: url(/servoy-webclient/templates/lafs/kunststoff/images/button/secondary-enabled.gif);
}

.media-upload-choose-btn input{ /*'choose file button'*/
   width:100px;
   height:40px;
   position:absolute;
   cursor:pointer;
}
.media-upload fieldset tr-upload-btn {  /*'Upload' button container*/
  floatposition:absolute;	
  right:10px;
}
.media-upload-upload-btn {  /*'Upload' button*/
 /**/
}

To add images to the 'choose file' and 'upload' button:

...

style the 'Files' section:

Code Block

language	css

.media-upload .wicket-mfu-caption{ /*'Files' label*/
	background:blue;
}
.media-upload fieldset tr{ /*a 'files' section entry*/ 
    background:red;
}
.media-upload fieldset tr input{ /*'Delete' button */ 
    background:green;
}

Note

The url from css can also be embedded data url, for example:

Code Block

background-image: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAA 
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeK 
qNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7);

See http://css-tricks.com/data-uris/ for more info on exact syntax.

Child pages

Versions Compared

Old Version 1

New Version 2

Key