Customize the Service Manager Mobile Applications CSS

To customize the Service Manager Mobile Applications CSS, perform the following tasks.

Update LESS files

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. Service ManagerMobile Applications is using LESS to simplify CSS customization and maintenance. For more information about LESS, visit the LESS official website.

The styles of Mobile Applications web elements which can be customized are defined in default_ess.less and default_std.less in the <Tomcat installation directory>\webapps\<appname>\app\resources\css directory.

Refer to the following screenshot as an example.The text color of the default login header is defined by @login_header_color.

The styles can be overridden by the same variables defined in override_ess.less and override_std.less in the <Tomcat installation directory>\webapps\<appname>\app\resources\css directory.

To override the default value, you need to copy the variable from default_ess.less, paste it to override_ess.less, and then specify a new value for it.

Test Customized LESS files

To test the customized LESS files, follow these steps:

1. Browse to the <Tomcat installation directory>\webapps\<appname>\WEB-INF\classes\META-INF directory and open the app.properties file with a text editor.

2. Update debug=false to debug=true, save the file and restart Tomcat.

3. Refer to Launching Service Manager Mobile Applications on your smartphone and launch the Mobile Applications employee self-service mode.

4. Check the styles are displayed as customized.

Generate CSS files manually

To generate CSS files manually, follow these steps:

1. Refer to Launching Service Manager Mobile Applications on your smartphone and launch the Mobile Applications employee self-service mode.

2. In the Elements tab, search for less:mobile-_s-res-5-css-sm-mobile-ess.

   Refer to the following screenshot as an example:

   

3. Copy the codes between <style type="text/css" id="less:mobile-_s-res-5-css-sm-mobile-ess"> and </style>.

4. Browse to the <Tomcat installation directory>\webapps\<appname>\app\resources\css directory, replace the content of sm-mobile-ess.css with the codes copied in the previous step.

5. Save the CSS file.

6. Type http(s)://<hostname>:<port>/<appname>/std/ in the Chrome address bar and then press Enter to launch the Mobile Applications standard mode.

7. In the Elements tab, search for less:mobile-_s-res-5-css-sm-mobile-std.
8. Continue to follow step 3 through step 5 to update the CSS file in the standard mode.

Generate CSS files by Koala

To generate CSS files by Koala, follow these steps:

1. Download Koala from http://koala-app.com and install this software on your computer.

2. Browse to the <Tomcat installation directory>\webapps\<appname>\app\resources\css directory and add the LESS folder to Koala by either drag-and-drop or click the + button in Koala UI.

   

3. After overwrite the variables in override_ess.less, use Koala to generate the CSS file.

   Click sm-mobile-ess.less, a panel will be displayed on the right. Click the Compile button to generate a CSS file with the name of sm-mobile-ess.css.

   

Test generated CSS files

To test the generates CSS files, follow these steps:

1. Browse to the <Tomcat installation directory>\webapps\<appname>\WEB-INF\classes\META-INF directory and open app.properties with a text editor.

2. Change debug mode to false.
3. Save and close this file.

4. Restart Tomcat and test Mobile Applications for both standard mode and employee self-service mode.

   For example, after overwrite the text color of login header from black to red, your login screen is displayed as follow:

   

   If you customization is not correctly displayed, clear the browser cache and refresh the browser window.