Tool Icons

This chapter shows you how to adjust tool icons in the WebOffice core client. Some icons can be defined in the project configuration, some have to be customized using the weboffice_user.css.

Change Tool Icons in the WebOffice Project Configuration

When configuring a Web Integration - Custom Tool or Geoprocessing tool or when configuring a Hyperlink and Integration (Call FROM WebOffice) as a button, an image file can be specified to be used as icon in the client.

Change Tool Icons in the weboffice_user.css

All other tool icons are defined via a CSS file. If you want to change default icons it is possible to save custom CSS definitions in the file weboffice_user.css in (C:\Tomcat\webapps\WebOffice\pub\client_core\styles\). See the steps below how to find out the correct class that defines the icon of a tool and change it for both large and small icons.

1. Find out the class that defines the icon

Use the browser development tools (open by pressing F12 when the browser is open) to identify the icon class. The WebOffice core client icon classes usually begin with "icon". In the sample below the Zoom In tool icon is to be changed. In WebOffice core client, every tool icon has a large (32x32px) and a small version (16x16px). By using the magnifier of the browser development tools the icon class of a tool can be identified.

Example: Tool Zoom In

Class describing the large icon version: iconzoomin

Class describing the small icon version: iconzoomin_sm

2. Create a custom icon png

In a second step you have to provide your custom icons in a path accessible by the WebOffice 10.9 application (e.g. C:\Tomcat\webapps\<WebOffice Applikation>\pub\images\).

3. Customize the weboffice_user.css to exchange the default icon

Define the desired new icon classes in the weboffice_user.css file to exchange the default tool icon with your customized ones

Note: The customizable CSS file is saved as "_weboffice_user.css". Remove the "_" at the beginning the first time you are using it.

Note: Please consider to adjust the CSS definitions only in the weboffice_user.css.

4. Delete browser cache

It is necessary to delete the browser cache to show the new icon your WebOffice 10.9 project.