Note: Academies requires an Academies subscription. If you're interested in Academies, please contact your sales representative or email sales@workramp.com.

Looking to customize the look/feel of our default Academy landing site template? We now offer admins the ability to add CSS and Javascript code directly to their Academy. Read ahead for an overview of the page elements that you can customize with custom code!

Prerequisite

While Custom CSS has no special prerequisites, Custom JavaScript requires a custom domain. To set up a custom domain for your Academy, please follow the steps in our help article. Additionally, custom JavaScript functionalities rely on this setup as they will not execute on WorkRamp's default domain. This requirement ensures scripts adhere to domain-specific security and functionality protocols.

How to add custom code in the Admin Console

Head over to your Academy Theming Editor to get started!

Javascript: Custom Script Tags

For use cases like installing third-party scripts and snippets, input Javascript code directly into the Custom Script Tags field.This functionality is dependent on your Academy being hosted on a custom domain. Without a custom domain, custom JavaScript will not execute due to security restrictions associated with domain-specific script execution.

Testing Custom JavaScript in Sandbox Environments

If you are developing or testing custom JavaScript, it is critical that you set up a custom domain for your sandbox environment. Without it, scripts will not execute.

Suggested Approach:

Create a subdomain for your sandbox, e.g., sandbox.[YOURDOMAIN].com.
Configure the subdomain to point to your WorkRamp sandbox instance using proper DNS and CNAME settings.

This setup replicates the conditions of your production environment and ensures accurate testing.

CSS: Master List of Supported CSS Classes

Part I: Header
Part II: Tab Bar
Part III: Footer
Part IV: Body
- Collections List (Trainings)
- Collection Detail
- Guide Overview
- Certifications List
- Paths List (note: Same as Certifications List)
- Path or Certification Overview

NOTE: † = elements that are only visible at the mobile breakpoint (<= 767px width)

Part I: Header

No.	Description	Official ClassName	Notes
1	Whole Navigation Area	`.AL_Custom_NavContentWrapper`	put this on `.academy-navigation-content-wrapper`
2	Logo anchor <a> (contains logo image)	`.AL_Custom_NavLogo`
3	Custom Links List (optional)	`.AL_Custom_NavCustomLinksList`	put on the `<nav>`
4	Individual links in Custom Links	`.AL_Custom_NavCustomLink`	put this class on the `<li>`
5	Search Bar (contains Input)	`.AL_Custom_NavSearchBar`	put on the `.dropdown-enabled-search-bar`
6	🔍 icon that opens Search Bar †	`.AL_Custom_NavSearchTriggerMob`
7	Close Button for Search †	`.AL_Custom_NavSearchCloseMob`
8	Menu Button †	`.AL_Custom_NavMenuBtnMob`
9	Close Button for Menu †	`.AL_Custom_NavMenuCloseMob`
10	Login Link for Mobile (inside Menu) †	`.AL_Custom_NavLoginBtnMob`
11	Academy Banner Main Heading	`.AL_Custom_BannerMainHeading`	Appears on multiple pages
12	Academy Banner Subheading	`.AL_Custom_BannerSubHead`
13	Nav image background (note that it doesn’t contain the whole nav, though it appears to. It comes after the nav in the DOM)	`.AL_Custom_NavBg`	put it on `.academy-banner` div
14	Backdrop when the mobile menu is open †	`.AL_Custom_MenuBackdropMob`	this will need to be applied dynamically because it’s not a separate element, but the academy-nav itself that gets this appearance using styled components
15	Person icon - Account menu trigger (logged-in view)	`.AL_Custom_NavAccountMenuTrigger`
16	Login Button (logged-out view)	`.AL_Custom_NavLoginButton`
17	Account Menu Popup	`.AL_Custom_NavAcctPopupMenu`
18	Items within Account Popup	`.AL_Custom_NavAcctPopupMenuItem`	`<a>`s

Part II: Tab Bar

No.	Description	Official ClassName	Notes
1	Tab bar itself	`.AL_Custom_TabBar`	use the `<nav>`
2	Tab within the tab bar	`.AL_Custom_TabBarTab`	use the `<a>`
3	Tab that’s selected	`.AL_Custom_TabBarTab.active`	note that we don’t have to add a class for this, we should just let the true active class be used by the customer together with the class from #2

Part III: Footer

No.	Description	Official ClassName	Notes
1	Footer bar itself	`.AL_Custom_Footer`	use the `.academy-footer`
2	Link List	`.AL_Custom_FooterLinkList`	use the `<nav>`
3	Each Link	`.AL_Custom_FooterLinkListItem`	use the `<a>`
4	Powered by WR Logo	`.AL_Custom_PoweredBy`	use the `.powered-by`

Part IV: Body

Collections List (Trainings)

This is the default landing page.

Note that two sections, Featured and All, will be present if you have “featured” any content. Each one uses these same classes.

No.	Description	Official ClassName	Notes
1	Container for all cards	`.AL_Custom_CardContainer`
2	Single Card	`.AL_Custom_SingleCard`	Use the `<a>`
3	Card Image	`.AL_Custom_CardImage`
4	Card body	`.AL_Custom_CardBody`
5	Card footer	`.AL_Custom_CardFooter`
6	Card Title	`.AL_Custom_CardTitle`
7	Card description	`.AL_Custom_CardDescription`
8	Content Type Label	`.AL_Custom_ContentTypeLabel`
9	Items Count	`.AL_Custom_ItemsCount`
10	Decorative Shadow elements	`.AL_Custom_CardShadows`	Customer Note: These elements show a visual hint of how many items are contained in this piece of content.
14	Section title	`.AL_Custom_OverviewSectionTitle`	Customer Note: This is present if you have set any of your content as Featured. The sections will be labeled “Featured” and “All.”
15	Duration (Time Estimate)	`.AL_Custom_PCDuration`

Collection Detail

No.	Description	Official ClassName	Notes
1	Container for all cards	`.AL_Custom_CardContainer`
2	Single Card	`.AL_Custom_SingleCard`	Use the `<a>`
3	Card Image	`.AL_Custom_CardImage`
4	Card body	`.AL_Custom_CardBody`
5	Card footer	`.AL_Custom_CardFooter`	Customer Note: This element has the top border that makes the visible line
6	Card Title	`.AL_Custom_CardTitle`
7	Card description	`.AL_Custom_CardDescription`
8	Content Type Label	`.AL_Custom_ContentTypeLabel`
11	Breadcrumb Bar	`.AL_Custom_BreadcrumbBar`
12	Each Breadcrumb	`.AL_Custom_Breadcrumb`
13	Card CTA	`.AL_Custom_CardCta`

Guide Overview

No.	Description	Official ClassName	Notes
1	The words “Course Outline”	`.AL_Custom_GOHeading`
2	Section Container	`.AL_Custom_GOSectionContainer`
3	Section Title	`.AL_Custom_GOSectionTitle`
4	Section Tasks Container	`.AL_Custom_GOSectionTaskContainer`
5	Module Title	`.AL_Custom_GOSectionTask`
6	Breadcrumb Bar	`.AL_Custom_BreadcrumbBar`
7	Each Breadcrumb	`.AL_Custom_Breadcrumb`

Certifications List

Note that two sections, Featured and All, will be present if you have “featured” any content. Each one uses these same classes.

No.	Description	Official ClassName	Notes
1	Container for all cards	`.AL_Custom_CardContainer`
2	Single Card	`.AL_Custom_SingleCard`	Use the `<a>`
3	Card Image	`.AL_Custom_CardImage`
4	Card body	`.AL_Custom_CardBody`
5	Card footer	`.AL_Custom_CardFooter`	Customer Note: This element has the top border that makes the visible line
6	Card Title	`.AL_Custom_CardTitle`
7	Card description	`.AL_Custom_CardDescription`
8	Content Type Label	`.AL_Custom_ContentTypeLabel`
9	Items Count	`.AL_Custom_ItemsCount`
10	Decorative Shadow elements	`.AL_Custom_CardShadows`	Customer Note: These elements show a visual hint of how many items are contained in this piece of content.
11	Breadcrumb Bar	`.AL_Custom_BreadcrumbBar`
12	Each Breadcrumb	`.AL_Custom_Breadcrumb`
13	Card CTA	`.AL_Custom_CardCta`

Paths List (note: Same as Certifications List)

Note that two sections, Featured and All, will be present if you have “featured” any content. Each one uses these same classes.

No.	Description	Official ClassName	Notes
1	Container for all cards	`.AL_Custom_CardContainer`
2	Single Card	`.AL_Custom_SingleCard`	Use the `<a>`
3	Card Image	`.AL_Custom_CardImage`
4	Card body	`.AL_Custom_CardBody`
5	Card footer	`.AL_Custom_CardFooter`	Customer Note: This element has the top border that makes the visible line
6	Card Title	`.AL_Custom_CardTitle`
7	Card description	`.AL_Custom_CardDescription`
8	Content Type Label	`.AL_Custom_ContentTypeLabel`
9	Items Count	`.AL_Custom_ItemsCount`
10	Decorative Shadow elements	`.AL_Custom_CardShadows`	Customer Note: These elements show a visual hint of how many items are contained in this piece of content.
11	Breadcrumb Bar	`.AL_Custom_BreadcrumbBar`
12	Each Breadcrumb	`.AL_Custom_Breadcrumb`
13	Card CTA	`.AL_Custom_CardCta`
14	Section title	`.AL_Custom_OverviewSectionTitle`	Customer Note: This is present if you have set any of your content as Featured. The sections will be labeled “Featured” and “All.”

Path or Certification Overview

No.	Description	Official ClassName	Notes
1	Path or Certification Detail Page Body	`.AL_Custom_PathDetailBody` OR `.AL_Custom_CertDetailBody`	Customer Note: This is an ancestor container for all the below elements. You can prefix your rules with one of these if you want them to apply only for paths or only for certs. Otherwise, you don’t need these classes.
2	Summary Box	`.AL_Custom_PCSummaryBox`
3	Title	`.AL_Custom_PCTitle`
4	Module Count	`.AL_Custom_PCModuleCount`
5	Summary CTA	`.AL_Custom_PCSummaryCta`
6	Module Box	`.AL_Custom_PCModuleBox`	Customer Note: The thick top border of this box will be gray for uncompleted steps, and green for completed steps. It’s suggested not to theme that bar. INTERNAL DEV NOTE: Put this class on the div that is a sibling of the “dotted line” element (14), not on the parent of the box and dotted line.
7	Module Title	`.AL_Custom_PCModuleTitle`
8	Module Description	`.AL_Custom_PCModuleDescription`
9	Guide Section	`.AL_Custom_PCModuleGuideSection`
10	Guide Task Title	`.AL_Custom_PCModuleGuideTaskTitle`
11	Breadcrumb Bar	`.AL_Custom_BreadcrumbBar`
12	Each Breadcrumb	`.AL_Custom_Breadcrumb`
13	Show/Hide Content Toggle	`.AL_Custom_PCShowHideToggle`
14	“Dotted Line”	`.AL_Custom_PCPathLine`

Custom Awarded Certification

#	Description	CSS Class Selector	Notes
1	Cert Wrapper	.CertBodyWrapper {	Styling applied here would generally apply to all elements within the cert
2	Top Bar	.TopBlueBar {	Can customize the top bar with color/width/etc.
3	Content Wrapper	.CertContentWrapper {	Wrapper for all of the Text within the Cert
4	Certified Text	.CertCertifiedText {	From the ‘Certificate Issuer’ field in Cert Settings
5	Learner Name	.CertLearnerName {	Learner’s Name
6	Completion Text	.CertHasCompletedText {	Only the ‘passed the requirements for the’ text line
7	Certification Title	.CertHasCompletedText span {	Certification Name
8	Awarder Name	.CertAwardedByName	Name of person listed as the ‘Person Awarding Certificate’
9	Awarder Title	.CertAwardedByTitle {	Person Awarding Certificate job title (in settings for that particular cert)
10	Earned Date	.CertEarnedOn {	Date the certificate was earned
11	Expiration Date	.CertExpiration {	Date the Certificate is set to expire
12	Logo	.CertLogo {	Logo from the main Certification settings page

Examples:

Changing the Size of text for the Certification Title:

.CertHasCompletedText span {

font-size: 2rem !important;

}

General Guidelines for CSS customization

Do:

Target the documented classes
Use pseudoselectors such as :first-child, :before, :hover, etc.
Use these media queries to target mobile or desktop device breakpoints specifically
- Use @media (max-width: 767px) to target the mobile device breakpoint
- Use @media (min-width: 768px) to target the desktop breakpoint
- Most of our elements are present on both views, so if you have a customization for mobile only or desktop only, using these values will sync your changes with the rest of the layout for a consistent experience. (A few elements only exist on one or the other – see reference tables for details)

For best results, avoid:

Targeting elements by a specific tag name when not absolutely necessary (use .AL_Custom_NavSearchBar not div.AL_Custom_NavSearchBar)
Targeting a specific element using descendent notation (a space) instead of direct child notation (>)
- Bad: .AL_Custom_NavSearchBar div Better: .AL_Custom_NavSearchBar > *
Targeting elements that have class names that look like gibberish
- e.g. - sc-gsNilKThese will absolutely change randomly with every code release.
Using tricks like order to dramatically relayout the page
- This is pretty brittle and could lead to complete breakage.
- Also can cause some unexpected behavior for accessibility.

Articles in this section

Adding CSS & Javascript to your Academy