Servoy 2020 Documentation
Child pages
  • Customizing the image media and file upload dialogs

Versions Compared

Old Version 5

changes.mady.by.user Ovi Buligan

Saved on

compared with

New Version 6

changes.mady.by.user Ovi Buligan

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagecss
.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;
}

To change the action buttons from image media component ('Save','Upload','remove') you can apply these :

Code Block
languagecss
.image-media-save {
	background:url(http://img1.wikia.nocookie.net/__cb20091124122226/mafiawars/images/8/82/Icon_star_16x16_gold_01.gif);
	width:0;  /*must be set to 0*/
	height:0; /*must be set to 0*/
	padding:8px; /*must be half of the image size*/
}

.image-media-save {
	background:url(http://img1.wikia.nocookie.net/__cb20091124122226/mafiawars/images/8/82/Icon_star_16x16_gold_01.gif);
	width:0;
	height:0;
	padding:8px;
}
.image-media-remove{
	background:url(http://img1.wikia.nocookie.net/__cb20091124122226/mafiawars/images/8/82/Icon_star_16x16_gold_01.gif);
	width:0;
	height:0;
	padding:8px;
}

 

 

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.

...

Replacing Default Element Images

 

 

.image-media-save {
    background:url(http://img1.wikia.nocookie.net/__cb20091124122226/mafiawars/images/8/82/Icon_star_16x16_gold_01.gif);
    width:0;
    height:0;
    padding:8px;
}