Customize Your Branding

In order to more seamlessly integrate Academy of Mine with your company's site, you have the option of customizing the branding of your platform. It's helpful to set up the branding for your platform so that it represents your business and Students feel like they are on  your platform.

In this article

Logos & Colors

The Logos & Colors page can be found in the dashboard at Branding > Logos & Colors

The site logo will appear in multiple locations throughout the platform. This includes the header of all site pages, the dashboard, the login page, and on all automated emails. 

Logo

The recommended dimensions for your logo are 350px by 80px. This will make sure your logo will fit properly in all the locations it will be displayed. We also recommend a transparent background for your logo image, to not clash with the body background color you will also select on this page.

The file must first be uploaded to the Media Library, where it can then be selected for your logo.

The Media Library houses all the uploaded files you use in your account. All uploaded files can be found here. 

1

There are two ways to access the Media Library. 

You may upload files to the Media Library through your dashboard by navigating to Assets > Media Library. 

Or, you can launch the Media Library directly from the Logo & Colors page by selecting Browse Media.

2

Inside the Media Library, you can add your image by dragging your file or selecting Upload Media.

3

Once the file has been uploaded successfully, it will be listed in the Media Library. You can then select it for use in your Course.

Mobile Logo

The mobile logo will replace the large logo when your platform is viewed on a device with a smaller screen. 

The recommended size for the mobile logo is 50px by 50px, and again, a transparent background would be best.

Brand Colors

It's possible to customize the colors of your platform to better match with your company branding. There are three colors you can choose to customize, which will be used throughout your platform: theme color, body background color, and body text color.

Theme Color

Theme color will be the main color to accent your platform. This color will be used in a variety of locations, including on buttons, the dashboard, in text links, progress bars, and as the header color inside Course modules. 

To match your company branding, you can select the theme color from the color picker. Or, if you know your branding's hex color code, you can enter it under the color picker. 

Body Background Color

The body background color will act as the background across your entire platform. For better readability, we recommend a lighter color.

You can select the body background color from the color picker, or you can enter a hex color code under the color picker.

Body Text Color

The body text color will be the main text color across your entire platform. We recommend a darker color that will work well with your body background color.

You can select the body text color from the color picker, or you can enter a hex color code under the color picker.

Brand Texts

Be sure to review our overview of Site Pages: Introduction to Site Pages

Brand text will be displayed in the headers and footers of all of your site pages. This information will be publicly available, if your site is public facing.

Top Bar Email

You can include a contact email address to be displayed on your site pages header. This email address will display as a mailto link on the page. This email address is optional. Leave this field blank to not include an email address in your header.

Top Bar Phone Number

You can also include a contact phone number on your site pages header. This phone number will display as a tel link on the page. This phone number is optional. Leave this field blank to not include a phone number in your header.

Footer Text

You can include any text you would like in the footer of your site pages. As a sample, we have included copyright information, but you may replace that with any other text, or leave the field blank to not include footer text.

Footer text will be displayed like this on all site pages:

Custom Styling

Be sure to review our overview of Site Pages: Introduction to Site Pages

At times you might want to manually add custom CSS changes to your platform.  This is helpful if you need to modify text sizes, introduce new layout options, change the formatting of pages, and more.

Custom Styling can be found in the dashboard at Branding > Custom Styling

As a best practice, you should add any custom CSS snippets to the file with comments explaining each change.