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
Using the magnifier to identify the tool icon class
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.
Custom classes for the tool Zoom in
4. Delete browser cache
It is necessary to delete the browser cache to show the new icon your WebOffice 10.9 project.
New tool icon in the WebOffice core client
Please sign in to leave a comment.