Documentation
Documentation

Customizing Header Branding settings

From the Header branding settings, you can tailor the TopClass header to reflect your organization’s brand and create a consistent experience across desktop and mobile devices. By updating the header settings, you can control the size and appearance of the header, upload your organization’s logo, define how it displays on mobile, and determine whether the logo links to an external website.

You can also customize the header’s background and text colors using hex codes to match your brand guidelines. Together, these options allow you to create a polished, professional look that aligns TopClass with your organization’s visual identity.

👍

Tip

It is recommended to use a strong primary color for the header color, for example, your organization’s brand color.

To customize the global branding of the TopClass header, do the following:

  1. Go to Customizations > Branding.
  2. Click the Header tab. Update the following settings to modify the appearance of the header:

    • Header Height - Set the height of the header between 40 - 200px.

    • Header Logo open in new Tab – If set to Yes, the associated URL link will open in new tab (set link below in Header Logo URL). If no link has been set, the default URL is set to TopClass.

    • Logo – Upload an image file of the organization’s logo. Use a transparent PNG image. The file size must be less than 0.256 MB.

    • Logo Height – Set the height of the logo between 30 - 40px.

    • Logo Width – Set the width of the logo between 40 - 400px.

    • Header Logo URL (Link) - Add external resource URL (link) to header logo.

    • Logo (Mobile) – Upload an image file of the logo for display on mobile devices. Use a transparent PNG image. The file size must be less than 0.256 MB.

      📘

      Note

      Use a small version of your logo (for example, 30 – 60 px high by 90 –120 px wide, PNG or GIF format) to improve display on mobile devices.

    • Logo Height (Mobile) - Set the height of the logo, for display on mobile devices, between 20 - 100px.

    • Logo Width (Mobile) - Set the width of the logo, for display on mobile devices, between 20 -120px.

    • Header Background Color – Set the background color of the header using a hex color code.

    • Header Text Color – Set the text color of the header using a hex color code.

  3. Click Save.
  4. To reset a single customization, click Reset. To restore all branding settings to the system defaults, click Reset All at the top of the page.