Table of Contents

Live App Design

Lesley Updated by Lesley

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 grid headers.

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.

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.

Page Menu

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.

Grids

The Grids section allows you to customize the look and feel of the grid views in the Live App.

Format

This section allows you to choose the format of the borders on your grid. Providing either a "clean" option with minimal borders or "borders" which will add borders to your grid.

Row Striping

This will enable alternate background colors for grid rows.

Row Hover

This will enable highlighting on grid rows when hovering over the grid row.

Row Spacing

This will change how grid rows are spaced.

Custom Design Settings

Grid Views can also be customized at the input level. Override defaults and customize the look of Grid Views in the Builder by clicking on the pencil icon for your grid view settings and enabling the "Use Custom Design Settings" option:

Format

This section allows you to choose the format of the borders on your grid. Providing either a "clean" option with minimal borders or "borders" which will add borders to your grid.

Row Striping

This will enable alternate background colors for grid rows.

Row Hover

This will enable highlighting on grid rows when hovering over the grid row.

Row Spacing

This will change how grid rows are spaced.

The View Links section allows you to customize how links in your views will be styled. Here you will be able to customize the design of your page links, action links and delete links.

Style

This section allows you to change the style of the links, to either Fill, Outline, Text.

  • Fill: This option will fill the link with a color (this is the default for new apps).
  • Outline: This option will outline the link.
  • Text: This option will present the link as text only (this is the legacy style for old apps).
  • Legacy: This option has no controls, but enables you to continue using customizations built on the legacy view link selectors

Size

This section allows you to choose the size of your links.

Text Color

This section allows you to change the color of your link text.

Fill Color

This section allows you to change the color of your link fill color.

Outline Color

This section allows you to change the color of your link outline color.

Border

This section allows you to choose if your link will have a thin or thick border and if your border will have rounded corners.

Text Options

This option allows you to transform the text in your link to uppercase or not.

Fill / Outline Options

This section allows you to update the link to look like a button with round corners or a raised look, with a drop shadow.

For the outline style, you will also see an option to make the border thin or thick.

Default Icon

This option allows you to define the default icon that will be displayed alongside your link.

Custom Design Settings

View Links can also be customized at the input level. You can over-ride and customize the look and feel of view links in the Builder by clicking on the field containing the view link in your view, and toggling the "Use Custom Design Settings" option:

There are four style options to choose from:

  • Fill
  • Outline
  • Text
  • Legacy

The first three style options come with custom design settings that will allow you to change the look and feel of your view links. Our legacy style option is the default style option, and will adopt the global design settings set on the app level.

The Menus section allows you to customize global design settings for Menu formats.

Buttons

This section allows you to customize the design of menus that display links as buttons using the following settings:

Style
  • Fill
  • Outline
  • Legacy (does not enable further controls)
Size
  • Small
  • Medium
  • Large
Color (Text, Fill, Outline)
  • Use the default link color
  • Use a custom color
Text Options
  • Uppercase
Other Options
  • Outline Options
    • Thin
    • Thick
  • Round corners
  • Raised

Tabs

This section allows you to customize the design of menus that display links as tabs using the following settings:

Style
  • Fill
  • Outline
  • Underline
  • Legacy (does not enable further controls)
Size
  • Small
  • Medium
  • Large
Color (Text, Fill, Outline, Active)
  • Use the default link color
  • Use a custom color
Text Options
  • Uppercase
Other Options
  • Outline Options
    • Thin
    • Thick
  • Underline options
    • Thin
    • Thick
  • Round corners
  • Raised

Custom Design Settings

Customize Menu Views at the input level. Enable the "Use Custom Design Settings" option to override defaults and customize the look of menu views by clicking on the pencil icon for your menu view settings.

The customization options are similar to those found under the Global Design Settings including both buttons and tabbed links:

  • Style
  • Size
  • Color (Text, Fill, Outline)
  • Text Options
  • Other Options
Note: Previewing how active tabs display is not available in the custom design override settings. If you would like to preview an active tab, click "Preview tab as active" under the menu item settings.

How did we do?

Working with Icons

Integrate with Formstack Documents

Contact