Customize Points Badge Style with CSS

We've created some great countdown timer styles for you that you can apply to your membership site experience.

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 Style for ALL Points Badges (Completed and Uncompleted)

.point_badge_uncomplete, .point_badge_complete {
   background-color:lightyellow !important;
}
.point_badge_text {
   color: black !Important; //This is text color
}
. point_badge_star {
   color:gold !important; //This is the star color
}

Customize the Style for Either Completed or Uncompleted Points Badge Style Only

You can use the .point_badge_uncomplete CSS rule to style the points badge of UNCOMPLETED actions only. For example:

.point_badge_uncomplete {
   background-color:lightyellow !important;
}
.point_badge_uncomplete .point_badge_text {
   color: black !Important; //This is text color
}
.point_badge_uncomplete. point_badge_star {
   color:gold !important; //This is the star color
}

You can use the .point_badge_complete CSS rule to style the points badge of COMPLETED actions only. For example:

.point_badge_complete {
   background-color:lightyellow !important;
}
.point_badge_complete > .point_badge_text {
   color: black !Important; //This is text color
}
.point_badge_complete >.point_badge_star {
   color:gold !important; //This is the star color
}