Note: Academies requires an Academies subscription. If you're interested in Academies, please contact your sales representative or email sales@workramp.com.
WorkRamp makes it easy for you to jump right into Theming Settings and brand your Academy. To collect your branding materials before starting on theming settings, please refer to the reference images and charts below covering the WorkRamp Academy:
Home Page
Registration & Login Page
Content Overview Page
Note: WorkRamp Academy pages are responsive and will adapt to any screen size. We have included our recommended specifications for the desktop experience - other options may appear nicely, as well!
Theming
After creating your WorkRamp Academy, customize the appearance from the Theming settings (Academies>Theming>Theming Editor).
Select each option to adjust the Header, Body, and Footer across your Home Page, Registration & Login Page, and Content Overview Page.
During setup, instantly preview how each page appears on a browser or mobile device and make further adjustments as needed.
Theming Guidelines and Specifications
The following recommendations have been optimized for the desktop experience. For the mobile experience, please ensure to test the learner’s experience on your device to ensure branding consistency.
Home Page
Home Page Recommended Specifications
|
Home Page Item (HEADER) |
Recommended Specifications |
Additional Information |
1. Logo & Logo Height |
Minimum 30 pixels tall image for clear resolution |
Image will be resized to be 30 pixels tall and unlimited width. |
2. Favicon |
16 x 16 pixels image |
|
3. Title *Decided by Custom Page Title* |
Less than 50 characters of text |
Above 50 characters of text may not display well on mobile devices and small screens. |
4. Description *Decided by Custom Page Description* |
Less than 255 characters of text |
Above 255 characters of text may not display well on mobile devices and small screens. |
5. Background Image |
16:9 aspect ratio image, for example: 1920 x 1080 pixels This image will be used on the Academy home page and course overview pages unless you have uploaded a custom collection banner. |
Choose a non-busy image with subdued colors and any important items featured within the center 50-75% of the image. Bear in mind that the height of this area will vary depending on the provided aforementioned Title and Description text lengths. |
Darken Background Image |
Optional |
Select to darken your background image to make title, description, and link text more readable. |
6. Foreground Image |
Optional We suggest a square/portrait aspect ratio image |
Choose a bold image that will feature prominently on top of your background image and to the side of your title and description. This image will occupy 35% of the horizontal space with the text shrinking appropriately. |
Image Alignment |
Optional |
Select to have your foreground image appear to the left of your title and description. |
Primary Color |
HEX RGB HSL |
Applies to title text, header links, Go To link, and Login button. |
Secondary Color |
HEX RGB HSL |
Applies to description text. |
Text Alignment |
Optional |
Choose left-aligned, center-aligned, or right-aligned placement of title and description text. |
Sub-Navigation Alignment |
Optional |
Choose left-aligned, center-aligned, or right-aligned placement of ‘My Trainings’, ‘Trainings’, ‘Certifications’ and ‘Events’ navigation labels (found under Home Page BODY settings). |
7. Header Links |
Maximum 3 links Less than 20 characters of display text each |
Additional and longer header links may not display well on mobile devices and smaller screens. |
8. Show Search |
Optional |
Include a search bar for Academy users to find content by titles, descriptions, and content tags. |
9. Show Filters |
Optional |
Include filter options for Academy users to find content by content tags. |
|
10. Show Go To Link
|
Optional Less than 30 characters of display text |
Include an option for Academy users to link back to your Academy homepage or to another webpage. |
|
Home Page Item (BODY) |
Recommended Specifications |
Additional Information |
Font |
Choose WorkRamp default font or a popular Google web font |
WorkRamp’s default font is called Lota Grotesque. The font you choose will apply to the learner's view of content within Guides, it is currently not available in preview mode /content creation. |
Custom Font |
You can upload a custom font with a .woff or .woff2 file that will apply to all the pages in your Academy. |
|
11. Collection Card Style |
If choosing the full background image: Upload an image that is at least 350x450 pixels, with at least the bottom 50% optimized to have legible text displayed over it. If choosing the partial background image: Upload a 16x9 aspect ratio image, minimum 350 pixels wide. |
|
12. Sub-navigation Background Color |
HEX RGB HSL |
Applies to the navigation bar under the home page background image. |
Sub-navigation Link Color |
HEX RGB HSL |
Applies to ‘My Training’, ‘Trainings’, ‘Certifications’, ‘Events,’ and 'Paths' text. |
Sub-navigation Active Link Color |
HEX RGB HSL |
Applies to ‘My Training’s, ‘Trainings’, ‘Certifications’, ‘Events,’ and 'Paths' text when selected. |
13. Show ‘My Trainings’ Tab & Override ‘My Training’ Label |
Optional Less than 20 characters of display text |
Replaces ‘My Trainings’ text |
14. Override ‘Certification/s/ed’ Label |
Optional Less than 20 characters of display text |
Replaces ‘Certifications’ text |
Override ‘Event/s’ Label |
Optional Less than 20 characters of display text |
Replaces ‘Events’ text |
Override ‘Path/s’ Label |
Optional Less than 20 characters of display text |
Replaces ‘Paths’ text |
Override ‘Training/s’ Label |
Optional Less than 20 characters of display text |
Replaces ‘Trainings’ text |
|
Home Page Item (FOOTER) |
Recommended Specifications |
Additional Information |
Background Color |
HEX RGB HSL |
Applies to bottom footer under content collections. |
Text |
Less than 150 characters of text |
Above 150 characters of text may not display well on mobile devices and small screens. |
18. Footer Links |
Maximum 3 links Less than 20 characters of display text each |
Additional and longer header links may not display well on mobile devices and smaller screens. |
19. Powered By WorkRamp |
This controls "Powered by WorkRamp" appearing in the Academy footer, as well as Contact-facing Academy notification emails. Selecting [x] will disable this from appearing in both places. |
Registration Page
Login Page
Registration & Login Page Recommended Specifications
Registration & Login Page Item (BODY) |
Recommended Specifications |
Additional Information |
1. Background Image |
16:9 aspect ratio, for example: 1920 x 1080 pixels |
Image will be scaled to occupy the entire browser’s width and height, with the registration/login box horizontally and vertically centered. This means that content within the image that’s behind the registration/login box will be covered up so please bear that in mind. |
2. Logo |
Minimum 30 pixels tall image for clear resolution |
Image will be resized to be 30 pixels tall and unlimited width. This is the logo that will be used in the Academy invitation and enrollment emails. |
3. Terms & Conditions (Registration Page) |
Maximum 3 lines Less than 20 characters of display text each |
Additional text may not display well on mobile devices and smaller screens. Hyperlinked terms & conditions are recommended. |
4. Agreement Required* |
Optional |
Will render a checkbox next to the above Terms & Conditions text that must be checked before a user can register. |
5. Terms & Conditions (Login Page) |
Maximum 3 lines Less than 20 characters of display text each |
Additional text may not display well on mobile devices and smaller screens. Hyperlinked terms & conditions are recommended. |
6. Button Background Color |
HEX RGB HSL |
Applies to “Register” and “Log in” buttons. |
7. Link Color |
HEX RGB HSL |
Applies to Terms & Conditions hyperlinks and log in links. |
Content Overview Page
Content Overview Page Recommended Specifications
Content Overview Page Item (BODY) |
Recommended Specifications |
Additional Information |
1. Accent Color |
HEX RGB HSL |
Applies to “Get Started”/"Continue" button and outline tasks on Course, Certifications, and Path pages. |
2. Breadcrumb Link Color |
HEX RGB HSL |
Applies to course navigation text. |