Chapter 20. Customization

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              
webapp.theme.jobtickets=jobtickets.min.css    
webapp.theme.pos=admin.min.css                
webapp.theme.user=user.min.css                

SavaPage uses swatch^[38] “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.

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              
webapp.custom.jobtickets=jobtickets.css    
webapp.custom.pos=pos.css                  
webapp.custom.user=user.css                

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.

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

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

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             
webapp.html.admin.login=admin-login.html             

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

webapp.html.mailtickets.about=mailtickets-about.html 
webapp.html.mailtickets.login=mailtickets-login.html 

webapp.html.payment.about=payment-about.html         
webapp.html.payment.login=payment-login.html         

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

webapp.html.printsite.about=printsite-about.html     
webapp.html.printsite.login=printsite-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.

<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 other *.xml files the name can remain the same.

Example:

/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:

webapp.custom.i18n=true

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