Skip to main content

Your Brand Dialog

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

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 important 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 it is intended to be.

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

  • Do not use an image if it has 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 that 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 than 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 a particularly complex logo we'd recommend you use a simplified version if one exists.

Favicon

You can change the favicon image that appears on the tab of the browser. The image must be in the .ico format. It must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of 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

The list of font styles that you can use 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. If you use your own custom font for headings, this overrides any fonts specified in the Fonts fields for the headers.

Font name

The font that 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 include 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. If you're using custom fonts, you must upload all four of these to ensure a consistent experience in all browsers.

UPLOAD TTF FONT

UPLOAD SVG FONT

UPLOAD EOT FONT

Body font face

If you use your own 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 things like 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 detail.

CSS

The CSS code that styles your footer HTML code only. This won't affect any other part of your Applaud tenant. You should make your footer is responsive. See the W3 schools article, Responsive Web Design.

Footer background-color

The background color of the footer HTML.

Task you can perform here:

See more:

Sections in this article