Customizing app appearance

App admins can customize the appearance of an app, including the app icon, header, and footer.

App icon and color

For the app icon that appears on My Apps, you can select a different icon image and color.

Change the app icon in Settings

  1. From the app home page, click Settings.

  2. Under App icon & color, click Edit.

  3. Use the Update app dialog to select a different app icon. You can select a different color from the list, or enter the hex value for the color you want.

Change the app icon in Visual Builder

You can also open your app in Visual Builder and change the app icon and color in the App properties panel.

Header and footer

You can customize the app header to hide menu options, change colors, and add text and images. You can also customize the footer to add text or an image.

To access header and footer customization options
  1. From the app home page, click Settings.

  2. Click App properties, then click Branding.

  3. Select the Customize app header & footer check box. The customization options appear:

Hide menu options

You can check Hide Quick Base standard menu options to control these two menu options:

  • Alerts

  • User menu

Note: You can hide other menu options, such as Favorites, Search, and Help, by customizing the user interface by role.

Customize the header text, images, and colors

  1. Click the Header tab.

  2. Click Basic. The options Left Element and Right Element appear along with a Colors section.

  3. Use the Left Element and Right Element options to enter text or URLs to images (.gif, .jpg, .jpeg, .png). If you enter text it will appear as-is in the header. If you enter a URL path starting with http:// or https:// and ending in .gif, .jpg, .jpeg, or .png, your image will appear. See the section About adding images below for more details.

  4. To make the text or image a clickable hyperlink, click the link icon to display the Hyperlink dialog, enter a URL, and click Save.

  5. Use the Colors section to set the background and text color. You can enter a hex value, one of the 140 HTML color names (for example, white, blue, green), or use the color picker.

    Note: The background color you set is used for the main portion of the header. Quick Base automatically chooses a companion color for the tab row portion of the header, for example, this header is set to the HTML color name cornflowerblue and the inactive tabs appear in a darker blue:

Customize the footer with text or an image

  1. Click the Footer tab.

  2. Click Basic. The option Right Element appears:

  3. Enter text or the URLs to an image (.gif, .jpg, .jpeg, .png). If you enter text it will appear as-is in the footer. If you enter a URL path starting with http:// or https:// and ending in .gif, .jpg, .jpeg, or .png, your image will appear. See the section About adding images below for more details.

  4. To make the text or image a clickable hyperlink, click the link icon to display the Hyperlink dialog, enter a URL, and click Save.

About adding images

If you want to add an image to your header or footer, the image needs to be stored in one of two places:

  • Internet (external to Quick Base) – Ensure your image uses a secure URL (one that begins with https).

  • File attachment in an app record – If you store your images this way, you must ensure that the table that stores these images is accessible by everyone on the internet.
    You can get the URL of an image stored as a file attachment by opening the record. Click the link to open the attached file and copy the URL from within your browser's address bar. For example, here’s the URL to an image stored in a record in our Quick Base Help feedback app: https://team.quickbase.com/up/bguzysv2x/g/rf/eg/va/5.png.

Related Topics: