Brand your Learnster platform so that it matches your organization's graphic profile 🙌. The branding you add in Studio will be visible in Learnster U (the user interface), on course certificates, and in email notifications.

Click the links to go straight to the sections:

Branding of logo, colors, and hero image

Branding of certificate

Branding of email notifications

💡 Tip: Have a Learnster U window open at the same time as you do your branding. Then when you make any changes you can simply refresh the Learnster U page to immediately see what your changes look like for your users!

To customize the branding of the platform open Learnster Studio, and go to Settings > Customize.

You'll find all sorts of settings that will make your platform match your organization's branding. Let's walk them through to see exactly what each setting does.

The first thing to add is a logo. Supported formats are SVG, PNG and JPG.
Make sure that the logotype is no less than 50 pixels high. Your logo will be shown in the top left corner in Learnster U. (See #1 in the image below)

If choosing Yes here, the hero image will expand all the way to the top of the page. If choosing No, a white header bar will be shown at the top of the page.

With Opacity you can choose if you want the header bar to be partly transparent or not. Set opacity to 100% if you want the header bar to be all white.

You can also choose to Show header strip. Choosing Yes here will add a thin line (with your primary color) at the top of the header bar.

The hero image is the main image on top of the start page in Learnster U. The recommended image size is 1400x360px. Make sure the image is of good quality! (See #2 in the image below)

The color overlay is a covering layer of color over the hero image. This is useful and recommended to use if you have a hero image with lots of details. The overlay will then make the text show better since it makes the image "less busy".

If you have a hex code you can add it in the text field to get the correct color. Otherwise, you just click the color dot and choose what color you want to use.

With the Opacity bar you can choose to show more or less of the overlay color. Set opacity to 0% if you don't want to use color overlay at all.

The hero text color is for the text that is shown in the hero image. It's important to use a color that doesn't blend in too much with the hero image so it's easy for the users to read. (See #3 in the image below)

The images and the descriptions below explain the Color settings. To add a color, you can either add the hex code in the text field or click on a color dot to make a color palette appear. If your organization has branding specifications, use either the hex color code (for example #ab45c8) or the rgb code (for example 171.69.200).

💡 Tip: A good piece of advice is to not use too many colors. Between 2-4 colors will make your branding look clean and professional.

1. Primary color:
The primary color controls for example:

2. Button: Button and hover color.

3. Done/Up next
Color for course activity page icon. Displayed in activity tab (see image above).
​Done: Color when the icon activity is completed.
​Up next: Color when the icon activity is up next.

4. Progress bar
The progress bar is placed at the top of your hero image (see image above).
​Primary color: Shows the status for course completion in percentage (blue in the image above).
​Secondary color: Shows the status for not yet completed course (dark grey in the image above).

5. Links
Select the color for links - normal state and hover state.

Guide on how to brand your Learnster platform (page 3 of 5).

When a learner has finished a course, a Certificate in pdf-format will be available for download. The image and the descriptions below explain what you can edit to customize the certificate to match your company's branding.

1. Logotype (mandatory) #1 in the image above.
Upload a logotype to be displayed in the certificate. Supported formats are PNG and JPG with a maximum height of 50 pixels (#1 in the image above).

2. Participant name (mandatory) #2 in the image above.
The color of the participant name.

3. Issued by (mandatory) #3 in the image above.
Type a name in the text field to add a name/company name, to the certificate. This name will be on the certificate if there is no instructor assigned to the course.
ℹ️ Note that this field is mandatory so it needs to be filled in to save properly.

4. Display signature (optional) #4 in the image above.
If the assigned instructor has uploaded a signature, it will be shown on the certificate.
In order to upload, scan a signature and save it in PNG-format. Then upload the signature image in the instructor’s profile settings.

Notifications are automated emails that are sent to your learners when certain events occur, for example when learners are registered, assigned to courses, or other important events. Depending on your settings, notifications are sent by email or as SMS messages.

The notifications are listed in Settings > Notifications.

The emails can be customized with your text and will be sent with your branding if you've added a logotype in the email notification section in Customize.

Logotype:
Upload a logotype for the email notifications.
Maximum height of 50 pixels (see image below).

Notifications
​General Settings