When setting up your institution, branding is important to give the course a consistent look and feel. This article is to give admins an overview of all opportunities for branding and image specifications.
Areas where images can be added:
- Institutional Logo
- Course Cover Image (thumbnails/course cards)
- Course Header (flyer, course, lesson pages)
- Email Header
Quick Reference: Image Recommendations
- Favicon: 32px x 32px with 8 or 16 bit color
- Logo: 60 px width x 60 px height
- Header/Intro Page/Flyer: min 2000px width x 1350px height for large monitor width
- Course Cover: 2:1 wide aspect ratio - will resize to 700 x 350 and will be cropped if necessary (below 1MB recommended)
- Email Template: min 50 px in height
A favicon is a small image that appears in the browser tab for all courses. If none is chosen, the NovoEd logo will appear on the tab for the course.
- Upload 16x16 or 32x32 px image
- 8-bit or 16-bit colors
- Accepted file types: png, gif, ico
Institution, Course: Logo
The institutional logo appears on the institutional dashboard and can only be viewed and changed by org admins. For your institution, you can select the brand color, organization logo, and organization name at the top of the institution dashboard page.
Where does this appear?
- Institutional Dashboard
- Course header unless if it is overridden on the course level
- Size: displays 60px in height (the image must be at least 60 px in height)
- File type: .png, .jpg, .jpeg
- Quality Suggestion:
- Use a png file with a transparent background and set the background color
- Choose higher image resolution and image size
Note: You may only select one image for the logo, so if you need to include several, it will need to be included in one image
For the org name, you can select white or black for the font color and the name cannot exceed 75 characters
How do I change my institution’s logo?
As an org admin:
- Go to the institutional dashboard
- Look to the top left corner of the header
- Click on the left side “Edit Branding” hover over the area to select
- Upload an image and/or choose a color for background and text
Course Cover Image
The course cover image can represent your course in a variety of different places. If a course image is not chosen, the course color will appear as the background. Org admins, super admins, and course builders have the ability to make these modifications.
Where does this appear?
- As a thumbnail image to represent the course on the left navigation menu
- As the course card on the learner and admin dashboards (web and mobile apps)
- If using Degreed, this image will be sent to Degreed as a cover photo
Course - Navigation Menu
Course on Institutional Dashboard
How to Add Course Cover Image:
From Course Basics:
- As an org, super or course builder admin, go to the course dashboard
- Click on the wrench and choose “Basics” from the drop-down menu
- On Course Basics, scroll down until you see “Upload a Cover Picture for this course”
- Upload your image and scroll down to click “Save”
- Upload an image no larger than 5 MB (1MB or below is recommended)
- We recommend using an image with a wide 3:1 aspect ratio with a minimum height of 300 px (the image will be cropped from the center to accommodate different devices)
- If using Degreed, it is recommended to upload an image with dimensions: 1128px width x 350px height
Tip: If you want to put in your logo, please keep it in the middle of the image so it will not be cropped when trying to fit it for different sizes.
Example: Make the logo centered in the middle third of the image. For example, the original 70x70px logo without padding is added to an artboard with 52px of space around it to make it 174x174 so that there is some padding and to allow for cropping.
The header is the upper part of a course lesson, introduction or flyer pages.
- Due to the monitor shape, a landscape format works better than portrait
- Please upload a file no larger than 1MB to optimize the loading time
- Wide 3:1 aspect ratio (see image below for an example)
- The height of the lesson header is 300px so the image must be more than 300px in height
- Consider an image that can accommodate bigger monitor width (more than 2000px)
Example of how an image will be cropped:
Lesson Header Example, applied
Note: While each looks similar, the course intro/flyer page displays a slightly smaller height than the lesson page.
How do I change my course introduction header?
This is the course introduction/flyer page where learners will land before entering the course.
- Go to the course dashboard page
- Click on the wrench
- Choose “Admin Dashboard”
- Then choose “Course Introduction Page” from the left side
- Scroll down to “Cover Picture and Executive Summary”
- Under “Course Introduction Page” attach your file and submit to save changes
How do I change my lesson header?
This is the top of the lesson/ lecture pages for the course.
- Go to the lesson page where you would like to add an image to the header.
- Click on the cog to enter Edit Mode, choose “Edit Content”
- To the left side, click on “Edit Header”
- You then can choose to upload an image and it will crop, resize and save automatically
Email Header Image
NovoEd and Org Admins can establish an institution-wide email header that may also be overridden on the course-level.
Where does this appear?
The email header appears as the top portion of an embedded email for all courses.
- Format: Horizontal logo text (a horizontal logo with the name of the company alongside it)
- Size: The display size is approximately 50px in height; a larger image will improve quality and will be resized down to the display size
- File format: png (transparent background) - we will add the background color with HTML
- Quality Suggestion: Make sure that there is very little padding around the logo and text in the original file
How do I change email branding?
Setting up email branding can be a bit tricky since it requires code, so we take care of it for you.
Simply reach out to Support (firstname.lastname@example.org) and provide:
- Institution or Course URL where you would like the email branding to appear
- Logo text file (horizontal, png with transparent background)
- Background color as HEX
- Placement: e.g. left or centered-alignment
We will make the changes for your institution and send a preview of how it will appear.