Prerequisites: To access any of the settings described in this guide, you will need to be an org admin on the learning platform. Click here to read more about different roles.
Supported formats
The learning platform supports JPEG, PNG, and GIF image types for banners, learning platform tiles, brand logos, and favicons.
Theming your platform
To add logos, banners, and other images to the learning platform go to Settings > Image settings.
|
Login screen image: Located to the left of the Username/Password box when a user is logging in 400px x 400px
The learning platform favicon (the logo that appears next to the site title in the browser tab) is created from the learning platform Login logo, so the favicon image's size and dimensions are taken into account when it is shown on the browser tab. |
|
|
Organisation logo: Appears in the top-left of your navigation bar in the front end and in your emails sent from the learning platform. Typically, logos are submitted in either a 2:3 rectangle or a 1:1 square format. The PNG file format is advised for logo files since it has translucent backgrounds that allow it to blend in with the website. For desktops, logos of various widths should have a maximum height of 100px. Things to consider: Logo images can be square or rectangular. Therefore, a 1:1 or a 2:3 aspect ratio can be used.
|
|
|
Org banner image: appears toward the top of the screen when a user logs into the learning platform. This banner is responsive on the front end of the learning platform, adapting to the user's screen size as necessary. When designing your banner, consider the vertical banner navigation cut out and leave enough room to accommodate the new left navigation size. We advise setting the outside left and right of your banner to 60px padding to help with the new left nav dimensions because the new left navigation may hide them on tablets up to large screen desktops. We also advise giving the top navigation of the banner at least 70px because it will be partially viewable under the navigation. See the image safe zone guidelines to the right. 1920px x 300px |
Tip: right-click on images and 'Open in new tab' to see full size
Banner image without left side nav.
Banner image with left side nav.
|
|
Discover banner image: This image displays as a banner on the discover page (click here to read about the discover page). It displays in exactly the same way as the org banner, but with the addition of a "scrim". So, what is a scrim? To make the text and controls on the banner more visible, it might be covered with a darkish overlay or gradient. As you can see in the banner image to the right, the scrim over the image increases the prominence of the page title words by making them stand out more over the banner image. |
The discover banner without an image 👆 The discover banner with an image 👇 |
|
Default learning experience image: The default image for level and object tiles unless otherwise specified in the options below. 350px x 165px |
|
|
Default course banner: If you don't set a course banner, this one will appear on the enrolment screen and the levels if this is an "undertake an online course" learning experience. 1920px x 300px |
|
|
Default level image: If you're creating an "undertake an online course" learning experience, this will be the default level image. 300px x 300px |
|
|
Default user avatar: Shows for the user in the right hand corner of the interface (the user can change their avatar from their profile settings). 200px x 200px |
|
| Background: Appears on the login screen and on course backgrounds. |
Theming a learning experience
On the selected learning experience, choose Settings from the sidebar. Any changes made here will overwrite the default settings you may have added above.
|
Learning experience Tile Image: This is the image that appears on the learning experience tile itself. Consider the status icons that will be visible on the top left of the image while creating your learning platform Tile image and leave image space for up to 3 icons. We advise setting the padding at the bottom of the image to 42px to address the issue of status notifications that may partially obstruct the picture. Image size: 350px x 165px
|
|
|
Learning Experience Image: The image that appears on the learning experience details slide-out panel. Consider the status icons that will be visible on the top left of the image while creating your learning platform Tile image, and leave image space for up to 3 icons. We advise setting the padding at the bottom of the image to 42px to address the issue of status notifications that may partially obstruct the image when it appears below. 700px x 240px |
|
|
Level/Object Tile Image: The default image that appears on level and object tiles. 300px x 300px |
|
|
Banner Image: The image that appears along the top of the learning experience. 1920px x 300px |
You can change how the banners in your learning experience by going to Settings > Display options:
|
Full width |
Centred |
Theming levels and objects
If you've created an "undertake an online course" learning experience, you can add images to the individual levels and objects. On the selected learning experience, choose Manage Content from the sidebar, click the icon, and open the Image settings.
|
Level image: Appears on the level menu if you're using the standard object list view (enabled by default). 300px x 300px |
|
|
Level banner image: Appears at the top of a level page. 1920px x 300px |
|
|
Object image: Appears alongside an object in a level if you're using the standard object list view (enabled by default). We recommend using this image to indicate what kind of content it is. 300px x 300px |
Text on images: some things to consider
Pros:
- It will keep your designer happy (until they view it on a different device than the one they developed it for).
Cons:
- Text cannot be scaled, therefore it is not altered in conjunction with the browser's built-in font-scaling options.
- There is no SEO benefit because search engines can't read the text in photos because they can't see images.
- Screen readers won't read it aloud, thus only sighted people will be able to utilize it. (Well, with certain Alt text, you might hear it declared, but it will be in the form of descriptive text rather than a paragraph or header.)
- Text will distort when zooming or using the pinch-to-zoom technique since images are not vectors (unlike text). If it were actual text, this wouldn't happen.
- Maintainability - If you need to make changes to the text, you just change the text! You cannot change the text inside an image unless you have the original file that the image was created with as well as the program that created it.
Further reading: