Child pages
  • Customizing the image media and file upload dialogs
Skip to end of metadata
Go to start of metadata

 

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

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.

".media-upload" is the root html hierarchy attached tot the iframe body. If you want to add preliminary padding/border/margins you can use directly this class.

To strip off the border and title of the fieldset use these rules:

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

 

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

.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:

.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 :

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

 

 

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

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

 

  • No labels