Advanced Custom CSS and Theming

We apply a variety of CSS classes to the "body" tag inside your Heights program to help you more flexibly customize the look of your program for a particular course, or even a single particular page!

Below is a description of what various body classes mean, and when they will appear. 

1. A body class will define the overall layout currently active and will be one of the three classes: 

  • ".application-layout" - active on any pages that are inside the logged-in view of your program, and do not have the creator only dashboard admin sidebar present. 
  • ".application-layout.lesson-layout" - the "lesson-layout" class is also present on lesson pages inside a course if you want to have a different style for lesson pages when inside a course. 
  • ".dashboard-layout" - active on any pages that have the creator dashboard admin sidebar present. 
  • ".sessions" - active on login pages. 


2. A body class starting with "url-" is present on pages with the main application layout. This can be used to differentiate each individual page. 

3. A body class starting with "app__" is present on pages with the main application layout. This indicates the current module in the app that the page is part of. For example: "app__courses", "app__users". 

4. Lessons inside a course have a body class starting with "course__" that has the slug of the particular active course so that you can applying styling to a specific course. This is present in addition to the "app__" class mentioned above. 

To sum it up, here is an example of what you will now find on the body tag when viewing a particular lesson: 

<body class="app__lessons course__acquiring-your-first-client url-courses-acquiring-your-first-client-lessons-introduction application-layout lesson-layout">

The above tells us we are inside a lesson, for the course slug of "acquiring-your-first-client", with a full URL text of "courses-acquiring-your-first-client-lessons-introduction", that is part of the main application layout and more particularly the lesson layout. If you wanted all lessons in the "acquiring-your-first-client" course to have a particular style, you could target the .course__acquiring-your-first-client in your custom CSS. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us