Course Content

Customize the Bottom XP/XXP Bar Style with CSS

Murray Gray in Course Content

Nov 04, 2022 - 1 min read. Available on Growth plan or higher.

Table of Contents

We've created some example CSS styles that will globally change the font that's used for your student membership site.

To get started:

  • Open any course and open the Course Settings section
  • Open the CSS sub-section
  • Set the Enable Custom CSS For This Course toggle to ON (green)
  • You should then see the CSS field appear. Add your CSS code to that box alongside any other code you may have already added to it.

Customize the membership site bottom XP points bar

Hide XXPs from the bottom points bar

/* Hide XXPs from bottom points bar */ .track-bar-title__xxp { display:none !important; }
.xp-list__xxp { display:none !important; }
.xp-sticky .col--action:after { width:0px !important; }

Completely Hide the Bottom Points Bar

Note: You'll still hear any sound effects that you may have set up. If you don't want them either, then you can turn them off using instructions here.

.xp-sticky, .xp-sticky-opener, .xp-overlay {display:none !important; }

Change "XP" to something else

This text is changeable in the XP Points Bar in the Notifications section of the Course Settings area inside your course.

Lots of people found these next topics pretty useful...