Styling Guide

Customising your app to include your branding and logos is important for any form or app. This article covers the styling options provided in the OneBlink LcS. 

Customise

To add styling to your apps navigate to the Apps menu, click Manage on the app you would like to edit and open the Customise tab.

Menu Items

For Forms List app the menu configuration is done in the customise screen. For Tiled apps there is no side menu and these are instead configured on the contents tab. The side menu items have a few different customisation options, see below:  

• Icon - Customise the icon used for the side menu item to choose something more suitable for you.
• Label - Customise the label of the menu item to something that better suits your users.
• Home - Choose which menu item should be opened first when navigating to the app. 
• Visible - Show or hide menu items to sure your app needs.

Custom Link

Custom links allow you to add other menu items where needed. Allowing you to select an icon, label, and URL for the menu item. 

Banner and Colour Theme

Adding a banner image, and some colours is the easiest way to start making your app feel like your own. See below for how the banner image and colours affect the forms list screen of your app. 

PDF Customisation

The banner image and colours you use will also affect any PDFs generated for the app for example if generated from the submission screen or via an Email + PDF workflow event. 

Buttons

The customise tab also allows you to configure the different buttons for your apps. These customisations allow you to add an icon and change the button label. You can also see how the buttons will be affected by the highlight and contrast colours to ensure they appear as expected. 

Progressive Web App Settings

Progressive web app (PWA) settings are configured on the app Summary tab. Once these are configured users accessing the app on a browser will be prompted to download the app to their device. The configurations for the PWA are setting are outlined below

• App Name - The name of the app as it appears on your device's home screen.
• Splash Screen Name - A title that appears on the splash screen when the app is opened. 
• Icon - The icon for the app that appears on your device's home screen and also the image that appears in the splash screen. To help generate an icon you can use this link. 

Advanced Styling

You are also able to add your own Advanced Styling. To use Advanced Styling press the 'EDIT CSS' button. 

This will open an editor box which will allow you to input CSS code. To see the class References, press the 'CSS REFERENCE GUIDE' button. 

To save and view your CSS code use the 'SAVE' button, and then open the app.

Some CSS Examples

Get Help

If you have any questions or would like assistance with app styling please contact us via this support portal or email support@oneblink.io. We are happy to assist in any way we can.