This tutorial shows you how to set up your course dashboard page to include progress percentages 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:
Example
Here is an example of how your course icon could look.
Code
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”>Invalid 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;
}
