How to Change the Background

App Wizard Logo

Step 1

Step 1 Image
From the 'Edit Application Pages' screen for the selected App (per above), select the specific page you wish to edit from the 'Page List' then click 'style' on the corresponding row (as depicted above).


Step 2

Step 2 Image
The 'Design Page Style' screen will open (shown above).

In the 'Properties' cell (on right side of screen), select either 'Background Image' or 'Background Color' to edit either of these properties. You can have either a background image displayed, or a background colour, but not both. Having a background image inserted will override any background colour you set.

To edit the background image, click on the small grey square button located on the right hand side of the field (as shown above), then select the required image from the 'In-App Resource Manager'. Refer to How to Add a File to 'In-App Resources' for more information on how to upload files used throughout your App (e.g. an image file such as a .png, or .jpg file).

To edit the background color, follow the same procedure and then select the required color from the palette provided. Note that a HTML hexidecimal color code (e.g. #CECECE) can be typed directly into the 'Background Color' field in the 'Properties' cell, if you prefer.

Note:  If a background image is used in the App Wizard template (instead of a standard background color), the image needs to be sized correctly to display correctly on all handset types. The minimum image size is 320px by 480px. The maximum image size is 640px by 1136px. If the background image (as uploaded) does not fit the page correctly, the image dimensions can be adjusted using using the 'Background Size' field (circled in green above). Small (undersized) images with dimensions less than the minimum screen width and/or height will automatically tile on the page. Undersized images will be tiled vertically and/or horizontally depending on the dimensions of the image.



Step 3

Step 3 Image
Once the background image or color has been selected, click 'APPLY CHANGES' (as shown above) and the image / colour will be updated into your App. Click 'DONE' to return to the 'Edit Application Pages' screen for the selected App.

Note:  The new background image or colour should appear on the 'Handset Display'. You will also be able to view the changes immediately on your device using the App Wizard Previewer. Refer to How to Download the App Wizard Previewer and How to Preview an App on Your Device, for further information on how to download and use the App Wizard Previewer App.