GFoundry Web and Mobile Apps Look & Feel Customization
How to adapt the logos, backgrounds and colours of your GFoundry mobile app and web app to your brand, from the Settings area of the backoffice.
Where do I customize the look and feel?
In the backoffice, open Settings. There are two customization pages:
Mobile App Customization: logos, backgrounds and colours used in the app.
Web App Customization: favicon, logos and background image of the web version.
What can I change in Mobile App Customization?
App Logos: the Splash Logo (recommended 512 x 512 px) and the Header Logo (recommended height 192 px).
App Backgrounds: the Splash Background and the Background Image, both with a recommended height of 2048 px. The splash background sets the first impression of your app.
Header: the background and text colours used on the headers throughout the app.
App Text Color: the colour of the text that is not inside a content box. Choose a colour with good contrast against the background image.
List Colors Scheme: the background and text colours used on list items. Use New list color to add a colour and Remove to delete one.
Buttons: the background and text colours used on the buttons throughout the app.
Content Boxes, Bottom Menu & Side Menu: the background and text colours of the content boxes, the bottom menu and the side (hamburger) menu, including the menu item text.
Loading spinner: the colour of the loading spinner, set in Highligth color. This colour is also used to highlight some texts throughout the app.
What can I change in Web App Customization?
Favicon: the icon shown in the browser tab. It is scaled to a square, so start from a square image to avoid distortion.
Backoffice logo: at least 74 px high.
Frontend logo: the logo users see in the web app, at least 120 px high.
Background image: the background of the web app.
How do I customize the app's appearance step by step?
Go to Settings > Mobile App Customization (or Web App Customization).
Upload images: choose the file for the logo or background. In Mobile App Customization, the image is uploaded as soon as you select the file. Use JPEG or PNG images with the recommended dimensions.
Choose colours: use the colour picker of each section to set the background and text colours. Each section shows an example (for instance Header Title or Button Label) that follows the colours you choose, so you can check the result before users see it.
Go back to the default: next to each colour, Default restores the original colour.
Changes are saved as you make them. There is no separate publish step.
What are the best practices for customization?
Consistency: keep your branding consistent across all elements for a cohesive look.
Contrast: make sure there is enough contrast between text and background colours for readability.
Testing: after changing the look and feel, open the app on different devices and screen sizes to check the result.