Page History

In order to replace default element images you need to modify servoy default css. See Customizing the Web Client for more info. The following examples are css classes that can be added in default css in order to modify default images.

Replace the calendar field image:

Code Block
.calendar img { background: url("http://www.servoy.com/developer/6xx_intro/resources/servoy_donut16x16.ico") repeat scroll 0 0 rgba(0, 0, 0, 0); height: 0; padding: 8px; width: 0; }

Replace accordion open/closed image

Code Block

.ui-state-default .ui-icon {
    background-image: url("http://www.servoy.com/developer/6xx_intro/resources/servoy_donut16x16.ico") !important;
    background-position: 0 center;
}
.ui-state-default .ui-icon {
    background-image: url("http://www.servoy.com/developer/6xx_intro/resources/servoy_donut16x16.ico") !important;
    background-position: 0 center;
}

Replace db treeview node image (this can be also done from scripting)

Code Block

.icon-panel img {
    background: url("http://www.servoy.com/developer/6xx_intro/resources/servoy_donut16x16.ico") repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 0;
    padding: 8px icon-panel !important;
    width: 0;
}

Note

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

New calendar picker style (working from Servoy 7.4). New css just has to be added in default servoy css

addition_to_servoy_web_client_default.css

Child pages

Versions Compared

Old Version 8

New Version Current

Key