Indicating Completion on Lesson Title

By default, for a completed lesson in LifterLMS, the text Lesson Complete is displayed in place of the Mark Complete button.

Completed Lesson

In addition, the syllabus widget reflects completion.

Completion Indicators in Syllabus

However, it could be interesting to add more obvious visual indicators to the lesson itself and this recipe will explore that with a few examples.

Basis in Lesson Markup

On a lesson that’s completed, the class .is-complete is added to the article tag that wraps the lesson content.

Completed Lesson Markup

This means that we can add specific CSS using article.is-complete in our selectors. That’s just the tech way of saying that we can now style anything inside the lesson differently based on whether it is complete or incomplete.

Example 1: Task like Title

Task like Title Indicator

We add a strikethrough through the title and make it slightly lighter in colour. To maintain readability, we can remove the strikethrough on hover.

Task like Title on Hover

Additionally we add a little checkmark at the end just like the syllabus. The CSS that we used (on Astra theme) is this:

article.lesson.is-complete h1.entry-title {
    text-decoration: line-through;
    color: #ccc;
}

article.lesson.is-complete h1.entry-title:hover {
    text-decoration: none;
}

article.lesson.is-complete h1.entry-title:after {
    content: "\f058";
    font-family: FontAwesome;
    text-decoration: none;
    margin-left: 1rem;
    display: inline-block;
    color: #0274be;
}

Example 2: Completed Label

Instead of a checkmark, we could actually add a label that says Completed.

Title with Completed Label
article.lesson.is-complete h1.entry-title:before {
content: "Completed";
    text-decoration: none;
    display: inline-block;
    position: absolute;
    top: -25px;
    left: 0;
    background-color: #0274be;
    color: #fff;
    margin: 0;
    padding: 2px 5px;
    font-size: 0.5em;
    font-weight: bold;
}

You could, of course, style these same examples differently based on your theme. Using the same principle, you could do other things like a custom background and text color. The possibilities are endless.

How would you like to differentiate between a completed and an incomplete lesson? Let us know in the comments.

1 thought on “Indicating Completion on Lesson Title”

  1. Pingback: Improving Course Navigation User Experience [Part 2]: Planning UI Copy & Markup - Make LifterLMS

Leave a Comment

Your email address will not be published. Required fields are marked *