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!

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.

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.

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.

Customization of some of the 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.

Add some colour to your user login / signup pages by setting up to two colours as your background, found under the 'Authentication Page' section of the Styling tab. Sign up and 'Forgot Password' text can be configured here also!

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 navigate to a page's styling tab by clicking on the paintbrush icon (🖌️) on the top right of your page - if it's not already expanded, and selecting 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.

In addition to Background colour, there are plenty other styling options you can choose from. See below!

Click here to get more details on our Page Settings.

Clicking onto a specific block will show on the the right edge of your screen its styling tab. If unexpanded, click the paintbrush icon (🖌️) on the top right of your page.

All blocks have their own distinct styling features, but most blocks will have a Spacing and Size section where you can adjust the blocks margins and height. Take some time to explore each block's styling options and how they'll fit into your overall page design!

Click here to view our entire collection of Block articles.