Chapter 15. Customization

Table of Contents

15.1. Custom Web App
15.1.1. Web App Look-and-feel
15.2. Email Templates
15.2.1. Email Template Syntax
15.2.2. Email Stationary Template
15.2.3. Email Message Template
15.2.4. Email Placeholders Objects
15.2.5. Email Stationary Types
15.2.6. Email Message Types
15.2.7. Custom Template Locations

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

Note

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

15.1. Custom Web App

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

Tip

Each key value in the /opt/savapage/server/custom/web.properties 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.

15.1.1. Web App Look-and-feel

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

15.1.1.1. 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 web.properties 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

1

CSS theme file name for the Admin Web App.

2

CSS theme file name for the Job Tickets Web App.

3

CSS theme file name for the POS Web App.

4

CSS theme file name for the User Web App.

SavaPage uses swatch[30] 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.

15.1.1.2. 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 web.properties 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

1

Custom CSS file for the Admin Web App.

2

Custom CSS file for the Job Tickets Web App.

3

Custom CSS file for the POS Web App.

4

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 15.1. User Web App: Custom CSS - Sample #1


User Web App: Custom CSS - Sample #2

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


15.1.1.3. 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 web.properties 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                            

1

snippet for Admin About Dialog.

2

snippet for Admin Login Page.

3

snippet for Job Tickets About Page.

4

snippet for Job Tickets Login Page.

5

snippet for POS About Dialog.

8

snippet for POS Login Page.

7

snippet for User About Dialog.

8

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.

Important

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>



[30] 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".