Chapter 20. Customization

Table of Contents

20.1. Custom Web App
20.1.1. Web App Look-and-feel
20.2. Email Templates
20.2.1. Email Template Syntax
20.2.2. Email Stationary Template
20.2.3. Email Message Template
20.2.4. Email Placeholders Objects
20.2.5. Email Stationary Types
20.2.6. Email Message Types
20.2.7. Custom Template Locations

SavaPage can be customized to match your organizational identity. Customization makes SavaPage an integral part of your organization rather than an external tool.


Customization is an advanced topic. If you need help, please contact your SavaPage Community Representative.

20.1. Custom Web App

Web App customization is controlled in the /opt/savapage/server/custom/ file. An annotated file is installed for your convenience.


Each key value in the /opt/savapage/server/custom/ file can be overruled at runtime by specifying the key value in the Configuration Editor. When the configuration key value is left empty customization falls back to the value in the properties file.

20.1.1. Web App Look-and-feel

The default look-and-feel of Web Apps has a simple drawing of green hills with a blue sky as background. You can disable this default by setting the value of the config item to N. See Section 4.11.14, “Config Editor” on how to change this value.

The look-and-feel of Web Apps can be customized by theming and CSS tailoring. Web App Theming

SavaPage uses jQuery Mobile as user interface system to create responsive Web Apps that are accessible on all smartphone, tablet and desktop devices. jQuery Mobile supports theming. Themes can be built online with the ThemeRoller for Mobile tools and deployed in SavaPage by downloading the zipped theme file and extracting the content of the /themes/ folder into the /opt/savapage/server/custom/web/themes directory.

The file contains entries to specify a separate CSS theme for each Web App, as shown in the example below:

webapp.theme.admin=admin.min.css              1
webapp.theme.jobtickets=jobtickets.min.css    2
webapp.theme.pos=admin.min.css                3
webapp.theme.user=user.min.css                4


CSS theme file name for the Admin Web App.


CSS theme file name for the Job Tickets Web App.


CSS theme file name for the POS Web App.


CSS theme file name for the User Web App.

SavaPage uses swatch[40] a for all pages and dialogs. Swatch b is used for page and dialog headers, and in some cases for list dividers.

You can store a theme in a subdirectory of /opt/savapage/server/custom/web/themes and use its relative path to reference a CSS theme file. Custom CSS

Advanced tailoring can be done with custom CSS files. They are rendered as last, so they have the final say about styling.

The file contains entries to specify a custom CSS file for each Web App, as illustrated in the example below:

webapp.custom.admin=admin.css              1
webapp.custom.jobtickets=jobtickets.css    2
webapp.custom.pos=pos.css                  3
webapp.custom.user=user.css                4


Custom CSS file for the Admin Web App.


Custom CSS file for the Job Tickets Web App.


Custom CSS file for the POS Web App.


Custom CSS file for the User Web App.

Custom CSS files are stored in /opt/savapage/server/custom/web/. Subdirectories are allowed, and you can use their relative path to reference the custom CSS file.

Any content placed in /opt/savapage/server/custom/web/, such as images, can be accessed in CSS via a URL beginning with /custom/web/. For example if a file named logo.png is placed in /opt/savapage/server/custom/web/images it can be accessed via the URL /custom/web/images/logo.png.

User Web App: Custom CSS - Sample #1

Figure 20.1. User Web App: Custom CSS - Sample #1

User Web App: Custom CSS - Sample #2

Figure 20.2. User Web App: Custom CSS - Sample #2 Custom HTML

Extra tailoring can be done with HTML snippet files to be injected into the Web App. Injection points are defined at the top of the Login and About Page for each Web App. Snippet files must be placed in the /opt/savapage/server/custom/html/ directory. The default snippet is for the English locale. You can create i18n variants by appending the locale to the base file name. For example: user-login_de.html is the German variant of user-login.html.

Snippet files are assigned in the file, as shown below. Snippets must refer to the default English language variant. At runtime the locale variant (when applicable and available) is used.

webapp.html.admin.about=admin-about.html            1
webapp.html.admin.login=admin-login.html            2

webapp.html.jobtickets.about=jobtickets-about.html  3
webapp.html.jobtickets.login=jobtickets-login.html  4

webapp.html.pos.about=pos-about.html                5
webapp.html.pos.login=pos-login.html                6

webapp.html.user.about=user-about.html              7
webapp.html.user.login=user-login.html              8                            


snippet for Admin About Dialog.


snippet for Admin Login Page.


snippet for Job Tickets About Page.


snippet for Job Tickets Login Page.


snippet for POS About Dialog.


snippet for POS Login Page.


snippet for User About Dialog.


snippet for User Login Page.

You can store custom HTML files in a subdirectory of /opt/savapage/server/custom/html/ and use its relative path to reference the HTML file.


Please use this template when creating snippets for Login pages. The CSS classes are needed to toggle visibility of sub-parts in different Login modes.

<h3 class="sp-login-dialog">Header when in Login Mode</h3>
<h3 class="sp-login-dialog-assoc">Header when in Card Self Association Mode</h3>
<div class="sp-login-dialog">
    <!-- Your custom HTML when in Login Mode -->
</div> Custom i18n

In rare cases an application manager might want to override i18n text of Web App pages, dictionaries or messages.

Overrides of packaged i18n *.xml files are placed in /opt/savapage/server/custom/i18n/. Each override must be located in a subdirectory with a path identical to the original *.xml file. The content of the override file can be restricted to just the overridden keys.

Overrides of packaged *.properties.xml files (Web App HTML parts) must have a *.xml name without the ".properties." part. For all other *.xml files the name can remain the same.



Custom i18n must be activated in with:



Custom i18n is an advanced feature and should be implemented in consultation with SavaPage Tech Support.


Added or changed custom i18n files have immediately effect when the i18n cache is cleared in the Admin Web App About : Java section, or when SavaPage is restarted.


Custom i18n is a great way to get started with localizing SavaPage to your own region. See Section 19.1.1, “Notes for Translators”. Custom i18n for IPP

IPP attribute localization can be overridden with special i18n XML files. See Section L.3, “IPP Localization”.

[40] A swatch is one of several colour schemes that can be provided by a jQuery Mobile theme. Single-letter designations are used for swatches. The default theme provides two swatches. The "a" swatch is a neutral, gray swatch, and the "b" swatch has a darker color scheme designed to contrast with the "a" swatch. Swatch "b" is used to draw special attention to certain elements in a user interface styled with "a".