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

In order to use Custom CSS, your Academy will need to be using a custom domain. To setup a custom domain for your Academy, please follow the steps in our help article.

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.

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`

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.