All Collections
Basics
App Styling at Frontly
App Styling at Frontly
Justin Yan avatar
Written by Justin Yan
Updated over a week ago

Frontly's styling options give you more control than ever by enabling a more tailored appearance for your app. You can now create a more refined, professional, and personalized app experience for your users with the introduction of styling at the app, page, and block levels. This approach to app customization ensures that the look and feel of your app aligns with the brand identity and preferences of your users... all without inputting a single line of code yourself!


Overview of Functions

App Level Styling

Branding, Navigation and Styling are the three tabs in your app settings that handle the styling of your app in some way. Here is the breakdown of the styling options with each tab and the parts of your app they'll affect.

Branding

Configures the primary colour of your app as well as the white labeling of your app as it appears to your users. The colour you select here will apply to your buttons and other small accents around your user interface.

Click here to learn more about our white labelling settings.


Navigation

Selecting your colour here will apply to the header or sidebar, depending on your selection. Enabling the 'Show Bottom Border' toggle will allow you to customize the colour for the border as well.

The remaining components that can be customized pertain to the ordering of your pages, in addition to the grouping of your pages as sections. The text colour of your navigation bar can be selected here as well.


Styling

Customization of the remaining key elements in your app can largely be found here. You can customize the default colouring of your page backgrounds, the rounding of the edges in your blocks, the shadowing for your block border and much more! Take a peek yourself to see what you can alter here and use the live preview on your right as a reference before saving.


Page Level Styling

Your page theme can be set up through the Branding tab in your app settings, but if you'd like to have more flexibility from page to page, you can select the Background Color for the specific page. This will only override the preset colour you've selected for the designated page and not all of them.

Click here to get more details on our Page Settings.


Block Level Styling

Exploring the Styles tab for most individual blocks will allow you to configure the background colour for it (if Show Background is toggled. By default, all blocks have their background set to white.

In addition to this, most blocks with Label options will find this field here, in addition to any other unique styling settings each respective block may have.

Click here to view our entire collection of Block articles.

Did this answer your question?