Courses - Progress Bar Style

---

1. Plugin Info

Adjust and add additional styles to the courses progress bar.

• Works with Squarespace 7.1

• Uses Custom CSS

---

2. Add this code to Custom CSS

// COURSES - PROGRESS BAR STYLE - GHOST PLUGINS //

@progress-bar-background: #fff;
@progress-bar-border-radius: 50px;
@progress-bar-border: 1px solid #eee;
  
@percentage-bar-color: #000;
@percentage-text-color: #fff;
@percentage-text-size: 14px;
  
@progress-text-color: #000;
@progress-text-size: 14px;
@progress-background: #fff;
@progress-padding: 5px 15px;

/* --- Do Not Edit Below ---- */

.course-list .course-list__progress-bar-container { border-radius: @progress-bar-border-radius !important; border: @progress-bar-border; background: @progress-bar-background;
} .course-list .course-list__progress-bar-container .course-list__progress-bar { border-radius: @progress-bar-border-radius; background: @percentage-bar-color; } .course-list .course-list__progress-bar-container .course-list__progress-bar-percentage { background: @percentage-bar-color !important; color: @percentage-text-color !important; font-size: @percentage-text-size; } .course-list .course-list__progress-bar-container .course-list__progress-bar-text {
background: @progress-background; color: @progress-text-color; font-size: @progress-text-size;
padding: @progress-padding;}

// COURSES - PROGRESS BAR STYLE - GHOST PLUGINS //

---

3. Customizable Options

• Progress Bar Background Color

• Progress Bar Border Radius

• Progress Bar Border Style

• Percentage Bar Color

• Percentage Text Color

• Percentage Text Size

• Progress Text Color

• Progress Text Size

• Progress Text Background

• Progress Padding

---

4. Plugin Notes

• No plugin notes

---