Articles in this section

Live App Design

Avatar
Danielle Kellogg
Updated
Follow

This article will discuss managing the Live App Design section of the Knack builder.

Live App Design Settings

From the Knack builder, you can customize the Live App Design settings such as layout, color and logo options for your app. To edit these settings, select "Live App Design" in the app dropdown menu.

Layout

In the Layout tab you can manage the app design theme, the page menu and user-base tabs.

Design Theme

There are three theme options: "Knack Beta", "Classic", and “Flat.” These each have design differences, as seen below.

Knack Beta

Knack Beta is a design theme which focuses on responsive and mobile performance. This theme includes a new CSS system where classes and styles easy to adapt and customize. You can find more details about this option in our article: Knack Beta Theme.

Note: We encourage the creation of app copies for existing apps to prepare the customization of the theme before launching to your users.

Classic

The classic theme includes shadows, gradients, and bevels to give buttons and menus a raised appearance.

image alt text

Flat

The flat theme displays all button and menus flat to the page.

image alt text

Page Menu

With this setting, you can enable or disable the page menu for the app.

image alt text

  • Yes, show a page for each start page

  • No, don’t show a page menu

User-Based Tabs

This setting controls which options appear in the page menu.

  • Yes, show tabs based on the logged-in user’s roles

    • The page menu will only show pages which match the logged-in user’s role or pages with no login. For example, if a Customer is logged in to the app, they will only see pages which allow the Customer user role to login.

  • No, show the same tabs for every user

    • The page menu will show the same options regardless of which user is logged in.
Note: The page menu must be enabled for user-based tabs to be available.

Page Menu Style

Note: The page width setting is is only available for the Knack Beta theme.

The page menu style  setting allows you to customize the page menus in to buttons or tabs. The default is buttons.

  • Buttons
    • Suggested where the width of your menu options exceed the width of the page, ie. your menus wrap on to a 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 a second row of menus. 

Page Width

Note: The page width setting is is only available for the Knack Beta theme.

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

The option "I want extra space on the sides of my page" may be desired where wide-screen monitors are common and you do not want your page to stretch to the full screen width.

Custom Colors

From the "Custom Colors" tab you can set the colors for the header, page menu, submit buttons and links.

Custom Logo

From the "Custom Logo" tab, you can upload a logo for your app. This will be displayed in the header above the page menu.

 

To upload a different logo, click "remove" and upload again: 

Related articles