Customizing your Site: CSS and Javascript - Element Targeting Overview

Avatar
by Jeff Richmond
Follow

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 Page

Body Selector:
.sj-page-catalog
Children:
  1. .search-container
  2. .catalog-header
  3. #catalog-courses
  4. .coursebox-container
  5. .sj-course-series
Catalog_Page.png

Search Results

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

Course Series

all Catalog page elements also exist on the course series page

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

Course Bundle Detail Page

Body Selector:
.sj-page-detail-bundle
Children:
  1. .purchase-button-wrapper
  2. #catalog-courses
Bundle_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 Skilljar. This is built from Onboarding Course 1: Planning, which is a course in the Onboarding Course Series on Skilljar Academy (Domain Access is Public).

Due to customization and specific theme/access/course settings within your site, there may be some minor differences in page structure, but this should still be useful in understanding the general page relationships:

Academy_Wireframe.png

Powered by Zendesk