Table of Contents

Live App Design

Sarto Jama Updated by Sarto Jama

The Live App Design section of the Builder allows you to customize global design settings such as the layout, color, font and logo options for your app.

This article will discuss how you can use the Live App Design section of the Knack Builder to customize the look of your Live App.

Accessing Live App Design Settings

You can access the Live App Design settings by clicking on the Settings option on the left-side of the Builder and selecting the ‘Live App Design’ option from the menu:

Here, you can customize the look and feel of your app pages. You can view a preview of any changes made to your live app pages when customizing the color, format, and style of each element in your live app pages as well:

Look & Feel

The Look & Feel section of your app’s design settings will allow you to make global app-wide changes to the page width, text and notifications.

Page Layout

The page width setting allows you to add extra space to the sides of your app container. The default is full-width.

  • Full: The Full option will always use the fullest width available.
  • Max: Max ensures big screens won't stretch the page too wide.

Text

This is a site-wide setting that will allow you to change the font of your text, as well as the color of links. Text color can be changed on an individual basis in other parts of the Design settings section.

  • Font: Choose the global font for your Knack app.
  • Link Color: Choose the text color for links in your app. This will affect links, button text, and table headers.

Notifications

This section allows you to update the look of notifications in your app:

  • Text Color: Choose the color of the text within the notification popup.
  • Background Color: choose the background color for your notification popups.

The Header section allows you to customize the app header and page menu for your app.

App Header

This section allows you to update the header for your apps. This is where you see your app name and the top level page menu.

Background Color

Choose the background color for your app's header. In the example above, the background color is green.

Text Color

If you choose to display the title of your app using text, the Text Color option allows you to choose the color of that text. In the example above, the Customer Portal App header is white.

Title Display

This is where you can choose to display your app's header as either text or an image/logo. In the example above, the app's header is displayed using Text.

This section allows you to make changes to the page menu that displays in your app’s header. Here, you can choose to have menu options display as buttons or tabs, and change the color of these options as well. 

Show for Each Start Page

This toggles whether or not the page menu will appear at the top of your live app pages.

User-based Menu Items

This gives you the option to limit the page menu options that appear on the page based on the user's role. This means that users will only see the page menu options for pages that they have access to.

Format

This is where you can choose how you would like your menu buttons to display. There are 2 options: Buttons or Tabs.

  • Buttons: Suggested where the width of your menu options exceed the width of the page, ie. your menus wrap on to the second row of menus.
  • Tabs: Suggested where the width of your menu options do not exceed the width of the page, ie. your menus do not wrap on to the second row of your menu:
Text Color

Choose the text color for your page menu. In the example above, the text color is white.

Fill Color

Choose the fill color for your page menu. In the example above, the fill color chosen is green.

Buttons

This is where you can customize the colors of buttons in your views:

  • Fill Color: Choose the fill color for submit buttons.
  • Text Color: Choose the text color for submit buttons.

How did we do?

Working with Icons

Integrate with Formstack Documents

Contact