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 is helpful to set up the branding for your platform in a way that 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 and registration pages, and on all the automated emails that go out from the LMS. 

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 or make sure that the background of the image does not clash with the body background color that can also be selected on the Logo & Colors page.

In order to select your new logo, you will first need to upload 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, and you can select it using the Choose/Select button provided next to the file. This will both copy the URL as well as automatically populate the associated field if you were uploading a file directly into the Logo field.

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 we once more recommend a transparent background.

Brand Colors

It is also possible to customize the colors of your platform to better match with your company branding and its one of the first things we recommend clients to do. There are three colors you can choose to customize and 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 Player. By default, this will be the purple theme color of Academy of Mine. Also, you will see "plain" colors across the platform for secondary buttons. That will essentially be the lighter color of the theme color you select here.

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. Be sure to click the OK button to set the theme color.

Body Background Color

The body background color will act as the background across your entire platform. For better readability, we recommend a lighter color, and most clients actually choose to keep it set to the default selection.

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. In most cases, some shade of dark gray to black works best for most of our clients.

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 which will display as a mailto link on the page. This email address is optional and you can leave it blank if you wish not to share this publicly.

Top Bar Phone Number

Similarly, you can also provide a public phone number of your business that gets added to the top navigation header of the site pages, although you can also choose to leave this blank.

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.

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

Some clients wish to apply more flexible styling across the LMS, whether to the front-end pages, the Dashboard, or the Course Player. This can be done using the Custom Styling tab, allowing clients to add their own Custom CSS code that automatically gets applied to the aforementioned areas.

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

As a best practice, make sure you add CSS formatted comments when applying custom CSS code, so you will be able to determine its function more easily at a later moment, and properly vet the code when deploying it to the platform. When experiencing styling issue on your platform, be sure to first evaluate the CSS for potential errors before reaching out to our Support team.