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 (add to the WordPress page itself):

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

CSS Styling code used in the tutorial video (append to your theme’s CSS):

.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 July 8, 2019

Was this article helpful?

Related Articles

NO QUESTION GOES UNANSWERED

If you have any questions, we're just an email away at your@accessally.com.

We take your success seriously, and you'll always get a speedy reply from a real person during business hours.

AccessAlly is the #1 WordPress Course and Membership Solution for Industry Leaders

WATCH THE DEMO

You'll get follow-up emails about AccessAlly and new features. Opt out anytime. Full privacy policy here.