Child pages
  • Customizing the image media and file upload dialogs

Versions Compared

Key

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

...

Code Block
languagecss
.media-upload fieldset {   /*removes border*/
	border: none;
}
.media-upload fieldset spanmedia-upload-title{  /*hides title*/
	display: none;
}

...

Code Block
languagecss
.media-upload-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-upload-btn {  /*'Upload' button container*/
  position:absolute;	
  right:10px;
}
.media-upload-upload-btn input{  /*'Upload' button*/
 /**/
}

...

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-upload {
	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