When deploying a native application using the Mobile Application Builder For Zimbra Community, the app icon, splashscreen, and app name are defined within the application wrapper, however, branding the content of the application requires a few more steps outlined in this guide.
This guide outlines the common changes required to brand mobile applications created using the Mobile Application Builder. For more details on further customization, see the other guides.
When accessed as a mobile web site or a homescreened application, the page title will be used to identify the application. The site title automatically retrieves the title from the related instance of Zimbra Community.
This title is set both for the desktop site and the mobile application within Zimbra Community by going to Control Panel > Administration > Site Administration > Site Configuration > Setup > Basic Site Configuration and setting the Site Name.
When a bookmark is saved to the mobile web site or the web site is saved to the homescreen of a mobile device, the default icon and startup image is different from the images embedded in the native mobile application.
To set the homescreen app icon and startup image,
- Locate the Images/ folder within the mobile application's web server components.
- The three files in this folder are used to define the icon and startup image. Update all of them to reflect the intended brand:
Be sure not to change the dimensions, filenames, or file types of these images. If changed, devices may not recognize the files properly.
- icon.png is the default homescreened app and web bookmark icon.
- startup.png is the default splashscreen image for homescreened apps.
- startup-568h.png is the version of the splashscreen used on iPhone 5+ for homescreened apps.
Cascading stylesheets are used to style the content of mobile apps created using the Mobile Application Builder. These stylesheets are embedded within configuration files within the Resources/ folder of the mobile web server components.
While the complete stylesheet can be reviewed and edited along with the source markup of the default widgets, this guide will outline the key changes that are likely to be used to implement an initial branding of the Mobile Application Builder.
- Locate the Resources/Styles.xml file within the mobile web server components. Edit this file using a plain text editor.
- This file contains the complete styling for the default implementation of the mobile application's content. It uses LESS syntax that provides the ability to reuse configuration information and simplify making changes. These configuration values are denoted using @VALUE_NAME: VALUE; syntax. The following values should be reviewed as part of updating the general styling of the application:
When editing confiugration values in LESS files, ensure that each line ends with a semicolon (;). When an invalid value or a semicolon is missed, style processing may fail resulting in a completely unstyled application.
- @color-title-background is the background color of the header bar. This should be set to a valid CSS color value (#RRGGBB, for example).
- @color-accent is the color used to accent text. This should be set to a valid CSS color value.
- @color-content-background-accent is the color used to accent content using a background color. This should be set to a valid CSS color value.
- Once changes have been saved, you can view the branding updates by opening the native app or navigating directly to the mobile web site via a mobile device browser.