3 Custom Branding

Xstore POS allows you to set up the user interface so that it is configured specifically for your organization. Setting up your brand on Xstore POS is done by configuring a custom skin/overlay on the Xstore POS server and providing images with proper proportions and based on the size/aspect ratio of the mobile devices being used.

Custom branding in Xstore POS is performed by placing override configurations in the ui.properties override file within the base mobile configuration directory.

The configurations in this file are described in ui.properties.

ui.properties

This file has the following properties:

Figure 3-1 Handheld Home Screen

The middle section of the image above shows the home screen logo image for the Handheld device. Similarly, the left section of the image below shows the home screen logo image for the Tablet device.

Figure 3-2 Tablet Home Screen

To change these images, override the ui.properties file version 1 config path with a new image name.

So, for the Handheld:

_imageHandheldMainLogo=res/graphics/branding/xstoremobile/Girl-with-shopping-bags-for-Xstore.jpg

and for the Tablet:

_imageTabletMainLogo=res/graphics/branding/xstoremobile/Xstore-girls-on-escalator.jpg

Figure 3-3 Handheld Main Menu

Figure 3-4 Tablet Main Menu

The images above show the main menu background image. The background image can also be customized.

Example Configuration

This sample configuration uses the following images, placed in the res/graphics/branding/xstoremobile folder in the base mobile config directory.

Table 3-1 Images Used in ui.properties Examples

Image	Used in Section
Girl-with-shopping-bags-for-Xstore.jpg	Home screen logo image for Handheld device
Xstore-girls-on-escalator.jpg	Home screen logo image for Tablet device
Mainmenubackground.png	Main menu background image

Configuration Descriptions

The configurations in the ui.properties file configure the following areas of Xstore Mobile.

Table 3-2 Images Used in ui.properties Examples

Section	Example
# Main Menu logo configuration	_imageHandheldMainLogo=res/graphics/branding/xstoremobile/Girl-with-shopping-bags-for-Xstore.jpg or _imageTabletMainLogo=res/graphics/branding/xstoremobile/Xstore-girls-on-escalator.jpg
# Main Menu background configuration	mainMenuMainBackgroundStyles=background-size: auto; background-repeat: repeat; background-position: 50%;