Skip to main content

Your Brand Dialog

Use this dialog box to determine the style of your brand.

Theme Id

The unique ID of your brand so that you can identify it.

Organization name

The name used in email notifications.

Theme name

The unique name of your brand so that you can identify it.

Logo

Your logo image. Most image file types are accepted. It's essential to use a correct and well-designed logo. A bad logo degrades the user experience and has the reverse impact you intended.

Please observe these guidelines and take time to get the logo right:

  • Never change the aspect ratio of a logo image so that it is wider or taller than intended.

  • Never scale an image logo larger than its source. This results in unattractive pixelation.

  • Please don't use an image with an embedded background color or other artifacts unrelated to the logo. This looks unprofessional. A logo file should have a transparent background.

  • Try to use a logo that is wider than it is taller. Your logo needs to be able to fit on the global navigation bar.

  • Ensure the logo file is small and doesn't contain spaces in its name.

  • White logos work best. If your company has a white version of a logo, this can be used as a 24-bit transparent PNG.

  • The logo should be ideally sized so that there is no extra padding needed around the logo. Any padding required by your brand guidelines might be met. Test this out by adding a logo with no padding.

  • When the logo is rendered, the actual size is 32px high.

  • 32px high works well for the majority of brands. If your company has an exceptionally complex logo, we'd recommend you use a simplified version if one exists.

Favicon

You can change the favicon image that appears on the browser's tab. The image must be in the .ico format. It must be 16x16 or 32x32 pixels, using either 8-bit or 24-bit colors. The image format must be PNG (a W3C standard), GIF, or ICO. The file should be called favicon.ico.

Primary Color

The color of the global header bar and other primary colors. This is used subtly in hundreds of places throughout the application.

Secondary Color

The color of the subtitles and non-primary colors. This is used subtly in hundreds of places throughout the application.

Fonts

You can use the list of font styles on your pages in your Applaud tenant.

Advanced options

Select the option to see the rest of the advanced options

Page background-color

The background of each page.

Sub-navigation text color

The font color of the sub-navigation text.

Link color

The color of the links.

Link weight

Indicates whether links are bold or not.

  • Normal - Keeps link text balanced without any additional formatting.

  • Bold - Makes link text stand out by applying a bold format to it.

Positive color

A neutral color is used for page components such as an Add button.

Balanced color

We use this for actions such as Approve or Submit.

Energized color

A warning color to highlight an alert or confirmation.

Assertive color

A color indicating a cautionary action, such as a Delete button.

Header font face

If you have a specific font that you want to use for your pages in your Applaud tenant, you can upload them here. Using your own custom font for headings overrides any fonts specified in the Fonts fields for the headers.

Font name

The font you want to use for all your headings on your pages in your Applaud tenant. Take care to write this correctly so that the browser can read it. For example, see the W3 schools article, CSS Web Safe Fonts.

Fallback fonts

The font to use if the browser can't read the font for whatever reason. If a font name includes spaces, you must have the font name in speech marks. For example, Arial or 'Times New Roman'.

UPLOAD WOFF FONT

Opens the dialog box so that you can locate and select your font to upload. You must upload all four to ensure a consistent experience in all browsers if using custom fonts.

UPLOAD TTF FONT

UPLOAD SVG FONT

UPLOAD EOT FONT

Body font face

If you use your custom font here, this overrides any previously specified fonts for the body.

Font name

The font that you want to use for all your body text on your pages in your Applaud tenant.

Fallback fonts

The font to use if the browser can't read the font for whatever reason.

UPLOAD WOFF FONT

Opens the dialog box so that you can locate and select your font to upload.

UPLOAD TTF FONT

UPLOAD SVG FONT

UPLOAD EOT FONT

Footer

The footer appears at the bottom of every page. Only those with a good understanding of HTML and CSS languages should configure this section. Try to make the code responsive to work on mobile devices.

Note

  • We don't support JavaScript unless within an iframe.

  • If you include social icons, these are styled by existing default styles.

Enable footer?

Turns on the footer for your Applaud tenant pages and shows the footer options.

HTML

The HTML code that contains your footer details.

CSS

The CSS code that styles your footer is HTML code only. This won't affect any other part of your Applaud tenant. It would be best if you made your footer responsive. Please take a look at the W3 schools article, Responsive Web Design.

Footer background-color

The background color of the footer is HTML.

Task you can perform here:

See more:

Sections in this article