Customize app appearance

Prev Next

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, select Settings.

  2. Under App icon and color, select Edit. The Update App dialog appears.

  3. 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.

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, select Settings.

  2. Select App properties, then select Branding.

  3. Select Customize app header & footer. Customization options appear:
    App header and footer customization options panel

Hide menu options

You can check Hide Quickbase standard menu options to set the visibility of these menu options:

  • My Apps tab

  • Pipelines tab (if present)

  • Alerts

  • User menu

  • Solutions (if present)

  • Exchange V2 elements

Hide Quickbase standard menu options checkboxes for selecting which menu items to hide

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. Select the Header tab.

  2. Select Basic. The options Left Element and Right Element appear along with a Colors section.
    Header tab showing Left Element, Right Element, and Colors sections

  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 adding images for more details.

  4. To make the text or image a hyperlink, select the link icon Link icon .

  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 choose is used for the main portion of the header. Quickbase 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:
    Example app header using the cornflowerblue color with darker inactive tab row

  1. Select the Footer tab.

  2. Select Basic. The option Right Element appears:
    Footer tab showing the Right Element option

  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 adding images for more details.

  4. To make the text or image a clickable hyperlink, select the link icon Link icon.

Add 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 Quickbase) – 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 Feature not available on Quickbase Essential planpublicly accessible.
    You can get the URL of an image stored as a file attachment by opening the record. Select 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 Quickbase Help feedback app: https://team.quickbase.com/up/bguzysv2x/g/rf/eg/va/5.png.