Styling Guide

Modified on Wed, 8 Feb, 2023 at 3:07 PM

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.






Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article