When deploying a native application using Telligent Community Mobile, 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 Telligent Community Mobile. For more details on further customization, see the other mobile topics.
[toc]
Site Title
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 Telligent Community.
This title is set both for the desktop site and the mobile application within Telligent Community by going to Administration > Site > Identification Options and setting the Site Name.
Homescreen Icon and Startup Image
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:
- 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.
Be sure not to change the dimensions, filenames, or file types of these images. If changed, devices may not recognize the files properly.
Color Changes
Cascading stylesheets are used to style the content of mobile apps created using Telligent Community Mobile. 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:
- @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.
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. - 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.