1. Home
  2. AccessAlly
  3. Progress Tracking & Checklists
  4. How to Add A Styled Progress Percentage To Motivate Participants (Advanced)

How to Add A Styled Progress Percentage To Motivate Participants (Advanced)

This tutorial shows you how to set up your course dashboard page to include progress percentage alongside the course icon. This helps your membership site subscribers to see at a glance where they left off in a course before clicking deeper.

ARTICLE CONTENT:

Video Tutorial

HTML code used to show icon and progress

<div class="program-badge">

[accessally_icon post_id="123" width="127" height="127" text="30 Day List Building Challenge"]

<p class="progress-text">[progressally_progress_text post_id="123"]</p>

</div>

Styling code used in the tutorial video

.program-badge {
display:inline-block;
margin:10px;
position:relative;
}
.progress-text {
margin: 0;
position: absolute;
bottom: 0;
right: 0;
line-height: 40px;
font-size: 15px;
border: 2px solid #b2bf00;
border-radius: 30px;
width: 40px;
height: 40px;
text-align: center;
background-color: #00A4B3;
color: white;
}
Updated on September 10, 2018

Was this article helpful?

Related Articles