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

Versions Compared

Old Version 1

changes.mady.by.user Ovi Buligan

Saved on

compared with

New Version Current

changes.mady.by.user Ovi Buligan

Saved on

Key

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

 

Style classes have been set on key html elements from the dialog contents, you can use this to define desired style of the content.

Note

This feature is only available from 7.4.1 onwards.

See Customizing the Web Client for more info. The following examples are css classes and rules that can be added in default css in order to modify default appearance.

...

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

 

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

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*/
 /**/
}

To style the 'Files' section:

Code Block
languagecss
.media-upload fieldset .wicket-mfu-caption{ /*'Files' label*/
	background:blue;
}
.media-upload fieldset tr{ /*floata 'files' section to the right entry*/ 
    floatbackground: rightred;
}
.media-upload fieldset tr input{ /*'Delete' button */ 
  float: right  background:green;
}

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

...

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.

Related:

Replacing Default Element Images