Custom branding can not only boost a company's image; it can also make taking and making an online course a more beautiful and enjoyable experience, which is a motivational factor for learners and administrators alike. So whether you're creating courses for a company, organization, or a private group of learners, consider taking the time to make your account and your courses your own.

What can be branded? 

The following are areas that you can edit from within your account. If you would like to add a full landing page, which you may see in some of our example schools, see the instructions here for how to add your own landing page. 

For even more branding examples, see our blog post "What If You Didn't Have to Pay a Designer?" and our example board on Brand & Design. 

Home Page Background

An image or color that is displayed in the background of each user's Home page, the sign-in screen, and your Administrator Dashboard. 

Notes for use

  • This background will be the first thing you and your signed-in learners and teachers will see when they return to your site and open to their Home page. 
  • Make it brand-consistent and motivational. 
  • You will probably want to avoid wording or an image that is too busy. Make sure the color is dark enough to provide contrast, or users will have difficulty reading the overlaid text. 
  • You can use the blur option or a color overlay for a more abstract background or to improve contrast. 

To create your background, open the Account Settings from the menu or Dashboard and go to Customize your brand > Change background.

Brand Color

A color you provide that shows up throughout your account for links, buttons, and other things

Notes for use

  • Your brand color will appear mostly in high-impact areas, like action buttons. Because of this, choose a mid-tone color. Colors that are too dark or too light keep links and buttons from looking clickable and white makes some buttons seem to disappear (oh no!).
  • Some core interface styles won’t be affected to ensure they remain optimized for consistency, readability, or usability.

To set your brand color, or primary color, open the Account Settings from the menu or Dashboard and go to Customize your brand > Primary Color. 

Library Banner

A display area for announcements and promotions located at the top of your main Library page

Notes for use

  • Banner image width and height is flexible—no matter the size or shape the image will be resized to fit "automagically." But in terms of resolution, 1400x400 pixels or larger is a safe size. 
  • Don’t include any text or meant-to-be-read details on the image. You’ll get a separate place to enter text as you set up your banner/s.
  • Making sure that images you use aren’t too high-contrast and don’t contain too much detail will help text set on top of them read more easily. For example, here’s a safe image, and here’s a risky one.
  • If you want to get nerdy about it, try picking or editing images to have primarily midtones.
  • If you add multiple banners, they will automatically scroll across the top of your school. 

Find detailed instructions here: Create a custom Library banner.

Course Covers

Artwork or photos you choose to visually represent courses

Notes for use

  • Don’t include any text or meant-to-be-read details in the image. (Occasionally, one to two words of text may be okay, but be sure they are in the center and large enough at all sizes).
  • Course covers with a variety of colors and contrast work best.
  • Course covers appear at a variety of sizes depending on context. It’ll help to select images or artwork that work well both large and small.
  • The recommended dimensions are: 600 pixels wide by 450 pixels tall.
  • Max file size is 4MB.
  • You’ll upload your images as .PNG, .JPG, or .GIF, but do not include any transparent backgrounds. .JPG images are recommended for most images.

Find more instructions here: Customize your course cover, banner, and background.

Course Banner and Background

The course banner is displayed in the header section of your course Path; the background lays behind the lessons and steps that make up the course Path itself.

Notes for use

  • Banner image width and height is flexible—no matter the size or shape the image will be resized to fit "automagically." But in terms of resolution, 1400 x 400 pixels or larger is a safe size. 
  • Don’t include any text or meant-to-be-read details on the image. 
  • Making sure that images you use aren’t too high-contrast and don’t contain too much detail will help the text set on top of them read more easily. For example, here’s a safe image, and here’s a risky one.
  • If you want to get nerdy about it, try picking or editing images to have primarily midtones.
  • You’ll upload your images as .PNG, .JPG, or .GIF, but do not include any transparent backgrounds. .JPG images are recommended for most images.
  • The course banner will blur to produce an atmospheric background behind the course path. 
  • You can edit the banner by blurring or adding an overlay in order to improve contrast or coloring. 

Find more instructions here: Customize your course cover, banner, and background.

Navigation Bar Logo

Your account logo placed in the horizontal center of the top navigation bar (replaces default text with school name and small logo image)

Logo container: (blue = containing box, red = actual logo dimensions)

Notes for use

  • Use a .PNG file format with a transparent background.
  • Use white or a very light color for your logo to ensure enough contrast.
  • Logos used here will be contained within a 300x50 pixels box that shrinks down to 150x50 as the screen gets smaller (see example above).
  • Keep in mind the box (above) is just a container. If your logo is super long it will be constrained by width and it won’t fill up the height. If it is short it will be constrained by height and won’t fill up the width. So make sure you crop your logo with this in mind.
  • Make sure your file is twice the resolution above—so ~500x100 pixels.

To upload your navigation bar logo, open the Account Settings from the menu or Dashboard and go to Customize your brand > Change account icon > Add your logo.
 

Account Icon

Your account icon appears when your school is loading, as a favicon, and as your app icon if your site is added by a user to his homescreen on a mobile device. 

Notes for use

  • Use a .PNG or .JPEG file format.
  • Your image should be a square ratio and at least 100x100 pixels. 
  • You can also use an image with a transparent background, and your app icon will fill in the background when used on a mobile device homescreen. 

To upload your account icon, open the Account Settings from the menu or Dashboard and go to Customize your brand > Change account icon > Customize your account icon.

Custom CSS

Add custom font styles with CSS from your Account Settings. Learn more here: Edit your font styles with CSS.

Custom URL

Need to white-label the account? Most of our pricing plans allow for a custom domain. Learn more about setting up your custom domain here: Set up a custom domain.

Finding Images

Here are some sites where you can find high-quality images: 

https://unsplash.com/ (free)

https://www.pexels.com/ (free)

https://morguefile.com/ (free)

https://www.stocksy.com/ (purchase)

https://www.canva.com/ (A basic account is free and you can use free images and upload your own; some images are available for purchase individually. A "Canva for Work" account is not free, but can be used to create logos with transparent backgrounds. A free trial may be available.)

Did this answer your question?