Icons for WebOffice flex

You can define custom icons at two different locations in WebOffice 10.9 R3 project for WebOffice flex:

predefined queries (+ geolocator query) for the widget Advanced Search

external applications in search results

 

Use Existing Icons

You can find prepared icons in C:\Tomcat\webapps\<WebOffice application>\pub\images\flexjs\

 

icon_comment

Be aware that you may have to adjust icons when changing color values in Skins for WebOffice flex.

when using a different baseColor you have to adapt icons for predefined queries

when using a different footerColor you have to adapt icons for external applications

 

Create New Icons

In order to accomplish a consistent result, follow the advices below when creating custom icons:

1.Try to stick to one style with all your query icons - i.e. either all are filled or all are outlined

2.The canvas should be 48x48 px minimum. They will be displayed with 24x24 px but HD displays will need the double resolution.

3.The icon inside the canvas should be aligned to the center and have a size between 32x32 and 36x36 px depending on the icon.

4.The icon has to be inverted - this means that the background is colored in your desired baseColor (usually white) and the icon itself is transparent. WebOffice flex client will use the transparent area to display your icon using the inputColor by default and darkOverlayColor for hover.

5.Stick to monocolor icons, try to avoid plastic, 3D-looking icons. WebOffice flex is using flat design.

 

Example workflow to customize icons in GIMP 2.8:

 

1.Initial input has the size 128x128 px
howto_flexjs_icons1

 

2.Image > Scale Image > 36x36 px
howto_flexjs_icons2

 

3.Image > Canvas Size > 48x48 px + center icon
howto_flexjs_icons2a

 

4.Layer > Layer to Image Size
howto_flexjs_icons3

 

5.Image > Mode > RGB

6.Layer > Transparency > Remove Alpha Channel
howto_flexjs_icons4

 

7.Layer > Transparency > Color to Alpha
howto_flexjs_icons5

 

8.Save Image

 

icon_cross-reference

Detailed information regarding the customization of the WebOffice flex client can be found in chapter WebOffice flex Client.