Replacing Default Element Images

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:

.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

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

.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

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.

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

Replacing Default Element Images