Customizing Your Training Site with CSS and Javascript: Element Targeting Overview

  • Updated

Targeting different areas of the Skilljar Platform

 

This article breaks down the page types in Skilljar and provides key objects that your web developer can use to customize your training site. You can target any of the elements on the Skilljar platform using Code Snippets in the Theming section of the dashboard. 

 

Related Articles:

 

How to use this Article:

The majority of the pages in your Skilljar Site are defined below with the important Page Selectors and Children classes/id's that can be targeted on each page. This should be useful as a starting point for web developers who are working on the front end work to customize the training site theming.  We also include some Javascript Objects that are surfaced on each of the pages, as well as ones that are surfaced across the entire site.

In the Tables Below - you can click on the image to expand it, and you can reference the pages that were used to gather the images on Skilljar Academy. All of the children objects are labeled on the image corresponding with their list number. 

Site Wide Elements / Sign In / Sign Up Pages / Profile Page / Catalog Pages / Course Pages

You can also check out the Skilljar Academy - Example Site Map which can help you understand the general relationship between pages on a Training Domain. 

This article is not a comprehensive list of objects that can be customized with CSS and Javascript, but we hope that it will be helpful in providing an introduction to the different pages across the Skilljar platform, setting your web developer up for success in their customization work.  

 

Site Wide Elements

  

Header

Selector:
#header
Children:
  1. .header-left
  2. .header-right
 Header.png

Footer

Selector:
#ep-footer
Children:
  1. #footer-left
  2. .right
 Footer.png

Javascript Objects

isSkilljarFirstPageviewSinceAuth
isSkilljarFirstPageviewSinceNewDomainMembership
isSkilljarTestUser

Available only when user is signed in:
skilljarUser
skilljarUserStudentGroups

Available only when custom Sign Up Fields are present:
skilljarUserSignupFields
  

  

 

Sign In / Sign Up Pages

  

Sign In Page

Body Selector:
.sj-page-login
Children:
  1. #login_form
 Login_Page.png

Sign Up Page

Body Selector:
.sj-page-signup
Children:
  1. #signup_form
 Sign_up.png

  

 

Profile Page

  
Body Selector:
.sj-page-profile
Children:
  1. .profile-course-table
 Profile_Page.png

 

 

Catalog Pages

  

Catalog Root Page

Body Selector:
.sj-page-catalog-root
Children:
  1. .search-container
  2. .catalog-header
  3. #catalog-courses
  4. .coursebox-container
    • Use this Selector if targeting all tiles on the catalog
  5. .sj-course-page
    • Use this selector if only targeting Page Tiles (not courses or legacy Series)

Group Root Page: 

If the root page is the root because of a group association, the #main_container has data-group-id="group_id,..." which contains a comma separated list of group IDs which are telling the platform to make this the home page for the user. (If the user is in other groups but those groups are not designating this as the root catalog page, they will not be listed).

 Catalog_Page.png

Catalog Page (non Root page)

Body Selector:
.sj-page-catalog
Children:
  1. .catalog-header
Non Root Page Specific info:
The #main_container has a data tag: data-catalog-page="page-slug" . The page-slug will be blank if it is the domain root catalog page.
 Course_Series.png

Learning Path Page

Body Selector:
.sj-page-detail-path(pre-enrollment)
.sj-page-path(post-enrollment)

Children:
  1. .purchase-button-wrapper
  2. #catalog-courses
 Bundle_Page.png

 Legacy Course Series 

Note: This object cannot be created anymore via the dashboard (Catalog Page Object should be used instead), but the selector listed here for Legacy Usage

Body Selector:
.sj-page-series
Children:
  1. .catalog-header
 Course_Series.png

Search Results

Note: This object is available on any page where search has been enabled in the Page Settings

Body Selector:
.sj-page-catalog
Children:
  1. #catalog-search-info
Callback Function
searchCompleteCallback()
 Search_Page.png 

 

Course Pages

  

Course Detail Page

Body Selector:
.sj-page-detail-course
Children:
  1. .purchase-button-wrapper
  2. #dp-details
 Course_Details.png

Curriculum Page

Body Selector:
.sj-page-curriculum
Children:
  1. #resume-button
  2. .section-container .tabs
  3. .curriculum-list
 Curriculum.png

Purchase Page

Body Selector:
.sj-page-checkout
Children:
  1. .payment-top-row
  2. .payment-methods-container
 Purchasing_Page.png

Lesson Page

Body Selector:
.sj-page-lesson
Children:
  1. .lp-left-nav
  2. #details-pane
  3. #lesson-main-content
  4. .next-lesson-button
  5. .prev-lesson-button
 Lesson.png

 

Skilljar Academy - Example Site Map

This site map is an example of the structure of the pages within an older version of Skilljar Academy. This is built from Onboarding Course 1: Planning, which is a course in the Onboarding Course Series on Skilljar Academy (Domain Access is Public).

With the release of Pages, you now have the ability to add multiple layers of pages below the root catalog page to this structure, so your domain could have much more complicated web of page relationships. Specific theme/access/course settings within your site can also impact how this maps for your domain, but this image should still be useful in understanding the basics in Skilljar site page relationships:

Screen_Shot_2021-01-04_at_2.52.19_PM.png

Was this article helpful?

2 out of 2 found this helpful