Table of Contents
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.
Web App customization is controlled in the
/opt/savapage/server/custom/web.properties file. An
web.properties.template file is installed for your convenience.
Each key value in the
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.
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
webapp.style.default.enable config item to
N. See Section 4.11.14, “Config Editor” on how to change
The look-and-feel of Web Apps can be customized by theming and CSS tailoring.
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
web.properties file contains entries to specify a
separate CSS theme for each Web App, as shown in the example below:
SavaPage uses swatch “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.
Advanced tailoring can be done with custom CSS files. They are rendered as last, so they have the final say about styling.
web.properties file contains entries to specify a
custom CSS file for each Web App, as illustrated in the example
Custom CSS files are stored in
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
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
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
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
webapp.html.admin.about=admin-about.html webapp.html.admin.login=admin-login.html webapp.html.jobtickets.about=jobtickets-about.html webapp.html.jobtickets.login=jobtickets-login.html webapp.html.pos.about=pos-about.html webapp.html.pos.login=pos-login.html webapp.html.user.about=user-about.html webapp.html.user.login=user-login.html
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>
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
*.xml files the name can remain the same.
/opt/savapage/server/custom/i18n/org/savapage/core/i18n/PrintOutNounEnum_de.xml /opt/savapage/server/custom/i18n/org/savapage/core/services/impl/messages_de.xml /opt/savapage/server/custom/i18n/org/savapage/server/pages/Login_de.xml
Custom i18n must be activated in server.properties 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 18.1.1, “Notes for Translators”.
IPP attribute localization can be overridden with special i18n XML files. See Section L.3, “IPP Localization”.
 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".