Skip to main content
Customize the Bottom XP/XXP Bar Style with CSS

Learn how to customize or completely hide the XP points bar in your membership site, including how to change 'XP' to something else using CSS.

Updated over 3 months ago

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

Did this answer your question?