Mobile UI Colour Configuration

How to set colours for the mobile application.

The admin user can configure different colours for mobile UI.

1. Go to Administration -> Branding -> Themes

     2. Click on ‘Mobile’ to set default mobile UI colours.

3. The General section will display the options as shown in the screenshot to set the colour for the background, font, title text, theme and header text colour.

The following screenshots display the app colour configuration.

1. 
   Background: It is used for the screen background colour. If a Tab background is not configured then this will be the default colour.

1. 
   Theme: Theme colour is used as highlighted below:
   
   
   
   1. When the header background colour at tab level is not configured
   
   
   2. The bottom menu text and icons containing News, My Reports etc
   
   
   3. Button background colour.
   
   
   4. Background and Icon colours for Pop-up titles
   
   
   5. Plugins or items such as checkbox and radio button.
   
   
   
   

1. 
   Header Font Colour: Where the header text colour at tab level is not configured.

1. 
   Title Font: Colours are set within:


2. The title text of feature list


3. Text colour for User Detail, Council info and the Settings screen.


4. When the Tab text colour at tab level is not configured within the tab this title font colour will default to the colour added here


5. Text colour of file upload

Font: This colour will be used for label and description text colour

Note: This font title colour is used in dynamic form for User detail, Settings and Council info screen.

How to set tab colours for the mobile application

1. Go to Administration -> Self Service -> Tabs

2. The user can select the colours as below for any individual tab

1. 
   Background: Colour for the background of the tab


2. 
   Header Background: Colour for the header background of the tab.


3. 
   Text: Tab text colour, this should contrast to the background colour in order to see the text


4. 
   Header Icon and Text: Header text and icon colour.

How to configure the default screen for the app

1. Go to Administration -> Self-service -> Mobile

2. Click on Default Tab -> Select item from dropdown -> Report it.

You can configure the tab to appear in the middle of the bottom menu on the app.