Page History

...

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

language	css

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

...

Code Block

language	css

.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

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;
}

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

Code Block

language	css

.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

Child pages

Versions Compared

Old Version 4

New Version Current

Key