Live App Design

In this article, we'll explore how you can make the most of the Live App Design section in the Knack Builder to give your Live App a personalized look and feel.

In the Live App Design section of the Builder, you have the power to personalize the overall design settings of your app, including the layout, color scheme, font styles, and logo options.

We'll go over how you can utilize the Live App Design section of the Knack Builder to personalize the appearance of your Live App.

 

Accessing Live App Design Settings

To access the Live App Design settings, simply click on the Settings option located on the left side of the Builder. From there, select the "Live App Design" option in the menu.

In this section of the Builder, you have the freedom to personalize the appearance of your app pages, allowing you to customize the look and feel. Additionally, you can preview any changes you make to the color, format, and style of each element in your live app pages.

 

Look and Feel

The Look and Feel section of your app's design settings gives you the ability to make universal changes to the page width, text, and notifications throughout your app.

Page Layout

You have the option to adjust the page width setting to add additional space to the sides of your app container. By default, the page width is set to full-width.

• Full: The Full option will always utilize the maximum width available.

• Max: Max setting ensures that the page width remains optimal on larger screens, preventing it from stretching too wide.

Text

This setting applies to the entire site and enables you to modify the font of your text and the color of links. In other areas of the Design settings section, you can also change the text color on an individual basis.

• Font: Select the font style for your Knack app across all pages.

• Link Color: Select the color for your app's links, which will impact the appearance of links, button text, and grid headers.

Buttons

Here is where you have the flexibility to personalize the colors of buttons in your views:

• Fill Color: Select the desired fill color for your submit buttons.

• Text Color: Select the text color for your submit buttons.

Notifications

This section gives you the flexibility to enhance the appearance of notifications in your app:

• Text Color: Select the color for the text within the notification popup.

• Background Color: Select the background color for your notification popups.

 

Header & Page Menu

With the Header & Page Menu section, you have the ability to personalize the app header and page menu for your app. Below, we will outline the settings available in this section.

Use Legacy Design Settings

Enabling the "Use Legacy Design Settings" toggle will apply a previous default version of the design settings to your header and page menu. By switching the toggle, you can preview the changes on the right and see how it would alter the look and feel of your header and page menu.

App Header

This section gives you the option to customize the header for your apps. The header is where you can view your app name and the top-level page menu.

The following options are available:

• Background color: You have the option to choose the background color for your header or input a hex code.

• Options:

  • Bottom Border: You can apply a background color for the bottom border of your header here. 

  • Raised: This option allows you to apply a raised bottom border to your header.

  • Sticky: If you select this option, the header remains fixed at the top when users scroll.

Layout

In the Layout section, you can change the page menu position, page menu alignment, and the title & logo alignment.

Title

In the Title section, there are view settings available to customize the look and feel of your header title:

• Display Header Title: You have the option to toggle this setting to make the header title visible or not.

• Size: You have the option to choose the size of the header title according to your preference.

• Text Color: Here you can input a hex code or select a color for the text of your header title.

• Text Options: These options provide the ability to format the header title as bold and/or uppercase.

• Use Custom Title: With this toggle on, users are enabled to input a custom header title below. When the toggle is off, the header title will automatically be the name of the application.

• Custom Header Title: If you toggle the "Use Custom Title" option on, you can input your customer header title here. 

Logo

Within the Logo section, there is an option to choose whether or not to display a logo. By enabling the toggle, you have the ability to select an icon or upload a custom logo for the header.

• Display Logo: Toggle this option on if you wish to include a logo in your header.

• Logo Type: Here, you can select whether you would like to insert an icon as your logo or upload a custom logo. 

  • JPG, GIF, and PNG files are accepted with a 5MB file size limit. 

• Width: You can input a width for your icon/custom logo by either inputting a percentage, moving the slider bar, or using the up and down arrows in the input. 

Page Menu

This section gives you the ability to determine whether the page menu will be displayed at the top of your live app pages or not. Additionally, you have access to the following options here:

• Display Page Menu: This toggle is used to set whether or not the page menu will be displayed on your Live App pages.

• Page Menu Options: You can check this box if you would like the page menu to only show links to pages that the logged-in user has access to. 

• Format: You can choose between text, button, and tabs as the format for the page menu links. 

• Size: Here, you can select between small, medium, or large for the size of the page menu links.

• Text Color: You have the option to customize the color of the link text to your liking or keep it as the default link color.

• Fill Color: You can either leave the fill color of the links as the default color or use a custom color by inputting a hex code or selecting a color from the color picker.

• Active Link - Text Color: When a user is on Live App page, the text color for this page's link can be adjusted to:

  • Darken

  • Lighten

  • Same as fill color

  • Or, you can also select a custom color or input a hex code. 

• Active Link - Fill Color: This setting is for the background color of the page menu links and has the same options as above for the text color. 

• Text Options: Here, you have the option to enable uppercase text for the page menu links.

Page Menu - Dropdown

In the Page Menu - Dropdown section, you can customize the look of dropdown menus with the following options:

• Links - Text Color:  Here you can select the text color for your dropdown menu links or input a hex code.

• Links -  Background Color: Here you can select the background color for your dropdown menu links or input a hex code.

• Active Link - Text Color: This option allows you to set a text color for dropdown menu links while the user is actively on that Live App page. 

• Active Link -  Background Color: This option allows you to set a background color for dropdown menu links while the user is actively on that Live App page. 

Mobile Menu

In the Mobile Menu section, you have the ability to customize the look of the mobile page menu. You can find the same options here outlined above for the Page Menu - Dropdown section.

Furthermore, you have the ability to choose whether the text in the links is bold and/or uppercase. You can also select or input the color for the mobile menu toggle and the links' text color.

 

Menus

The Menus section allows you to customize global design settings for Menu formats. Below we will outline the available settings for menus.

Buttons

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

• Style: Here you have the options of Fill, Outline, or Legacy for the style of the buttons.

• Size: This settings allows you to choose between small, medium, or large for the size of the buttons.

• Text Color: You can use the default link color or use a custom color by inputting a hex code or by selecting a color from the color picker.

• Outline Color: This can be the same as the text color or you can also use a custom color for this setting.

• Text Options: Enables you to choose whether the text on the buttons should be in uppercase.

• Outline Options: You can select between thin or thick, and round corners or raised for the outlines of the buttons.

Tabs

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

• Style: Similar to buttons, you can select between Fill, Outline, Underline or Legacy

• Size: This setting is the same as it is for buttons. You can select between small, medium, or large.

• Active Color: You have the option to use the default link color or select a custom color for this setting, which will be applied when the user is directed to the page associated with the button.

• Text Options: Enables you to choose whether the text on the buttons should be in uppercase.

• Underline Options: You have the options of Thin or Thick if you select "Underline" for the style option. 

 

Grids

In the Grids section, you can customize the design defaults for grids with the following settings available:

• Format: You have the option to choose the format of your grid, whether you prefer a clean and borderless look or if you want to add borders to your grids.

• Row Striping: To customize the appearance of the rows in your grids, you have the option to select alternate background colors by checking the box provided.

• Row Hover: This option allows you to choose whether you want the row to be highlighted when users hover over it.

• Row Spacing: Here, you can select between cozy, default, or spacious for the row spacing. 

 

Menu Views- Custom Design Settings

To customize menu views at the input level, simply enable the "Use Custom Design Settings" option. This will allow you to override the defaults and customize the appearance of menu views. To do this, click on the pen icon for your menu view settings.

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

• Style: Fill, Outline, Underline, or Legacy

• Size: Small, Medium, or Large

• Text Color: Use the default link color or use a custom color.

• Outline Color: Use the default outline color or use a custom color.

• Text Options: Uppercase

• Underline Options: Thin or Thick

 

Grid Views- Custom Design Settings

You can also customize Grid Views at the input level. Override the defaults and personalize the appearance of Grid Views in the Builder by clicking on the pen icon for your grid view settings and enabling the "Use Custom Design Settings" option.

 

View Links

The View Links section provides you with the ability to personalize the styling of links in your views. You can customize links that direct to other pages that edit records, view record details, delete records, or other action links. 

Page Links

Here, you have the ability to personalize the links that direct to other pages for editing records or viewing record details. The available choices in this section are comparable to the other sections in Live App Design, with the only difference being the inclusion of a default icon setting.

Action Links

For this section, you can custom action links with similar settings as page links. To learn more about what action links are, see our article here. 

Delete Links

Within this section, users have the ability to personalize the links that allow for the deletion of records in views. The available options in this section are comparable to the options provided for page and action links.

 

View Links - Custom Design Settings

Similarly to grid views and menu views, you also have the ability to customize view links at the input level by selecting the pen icon while hovering over or selecting a view link. The settings available here are the same as the view links section, however, these settings only apply to the selected view link.

---