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.