Acadio is a white-label solution that can be fully customized to match your brand. The platform's robust theme settings allow you to edit the site's colors, logos, images, certificates, and more to give your learners a seamless experience.

Branding Assets

Follow the steps below to edit the platform's logo, favicon, and sign-in page:

  1. Select Settings>Theme from the main menu.
  2. Under Branding Assets, replace the following images: 
    • Standard Logo - displayed in system emails, on certificates, and in the expanded main menu
    • Condensed Logo - displayed when the main menu is collapsed
    • Favicon - displayed in web browser tabs and windows
    • Sign-in Background - displayed on the student sign-in page 

IMPORTANT: It is a best practice to use an SVG or PNG file with a transparent background for your logos. This helps to minimize distortion during resizing and ensures your logo looks great across the platform. 

Below are the recommended file formats and dimensions for your branding assets:

  • Standard & Condensed Logos
    File type: SVG is preferred, PNG is acceptable. A transparent background is required.
    Dimensions: This will vary based on your logo's design. A minimum width of 300px is recommended for your standard logo. 

  • Favicon
    File type: SVG is preferred, PNG is acceptable.
    Dimensions: 32 x 32px

  • Sign-In Background
    File type: PNG, JPG, SVG, or GIF
    Dimensions: 400 x 920px

Theme Colors

Follow the steps below to edit the platform's theme colors:

  1. Select Settings>Theme from the main menu.
  2. Locate Theme Colors on the Theme Options page. Use the Primary and Surface color selectors to set your desired colors. The primary color is used for various elements, including icons,  buttons, and active links.  The surface color is used for the main navigation, backgrounds, and borders. Acadio will automatically assign shades of these colors to elements on the platform to ensure visual consistency and a good learner experience.

    Enabling the Force Contrast setting will shift from the default shades to shades offering better legibility. Additionally, enabling the Allow Dark Mode setting allows users to view the platform in Dark Mode by switching a toggle just below their profile picture on the main navigation menu.



    Individual element colors can also be set by selecting Custom under Menu Colors. 
  3. When finished, click Save Theme. 

 

Advanced

As the name implies, the options available on the Advanced tab are for advanced users only. Changes to this section can break the appearance of your platform.

Themes can be exported as a JSON file. If you've customized your theme, we recommend downloading a backup of the theme settings.

Follow the steps below to save a JSON file of your theme settings:

  1. Select Settings>Theme from the main menu. 
  2. Click on the Advanced tab.
  3. Under Export Theme, click Download.

You can also use the code editor to manually edit the theme JSON. 

Be sure to test your theme by logging in as a student and observing the newly selected colors across the platform. We also recommend downloading and storing a copy of your theme JSON in the event that a team member inadvertently saves changes.