Course Content

Customizing the Bottom XP/XXP Bar Style with CSS

Murray Gray in Course Content

Dec 09, 2020 - 1 min read. Available on Growth plan or higher.

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 Advanced 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; }

Change "XP" to something else

In this example we're changing the "XP" point name to "OM".

.xp-sticky .xp span {
visibility: hidden;
.xp-sticky .xp span:after {
content: 'OM';
visibility: visible;
display: block;
text-indent: 0;
display: block;
line-height: initial;
/* This removes the XP disc from all other mentions of points */
.points .small {
visibility: hidden;

You can change the rest of the text on this bar by following these instructions.