I am using Rise to create training/reference documentation for a business application. Learners will be visiting the site to find the knowledge they need as they need it. In this setting, the progress indicators in the side menu are unnecessary. To some reviewers, they have been a turn-off.
I request a configuration setting be developed that could on/off toggle the display of these indicators.
Hi, Good news: I managed to hide the progress bar and progress mark icons in the lessons.
It is relatively simple, but it requires attention. As our colleagues said here, Rise does not have this functionality. So, this is a "clandestine" solution.
I inserted a CSS hack into the index.html <head>: <style type = "text / css"> .brand - fill {display: none;} .brand - stroke {display: none;} .progress-bar {display: none;} .lesson-link__progress {display: none;} .overview-list-item__pie {display: none;} </style>
I ran some tests and didn't find any problems. I can't say that there are no problems, I'm just saying that I didn't identify them. Eventually, something can go wrong.
It is necessary to pay attention. If you update your content and re-export the package, you need to re-enter the CSS hack.
Hi Gustavo - i see this css workaround is no longer working (unless i've done something incorrectly) . I believe css tags have changed sine the Rise update. Do you have a new version of the CSS workaround. Sorry my coding knowledge is not great...
10 Replies
Hi there, Mark. No way to remove the progress indicator right now, but I'll let you know if that changes. Thanks for your feedback!
I am looking to turn off progress indicators as well. Has this feature been added?
Hi Kaye,
The progress indicators cannot be turned off.
Hi,
Good news: I managed to hide the progress bar and progress mark icons in the lessons.
It is relatively simple, but it requires attention. As our colleagues said here, Rise does not have this functionality. So, this is a "clandestine" solution.
I inserted a CSS hack into the index.html <head>:
<style type = "text / css">
.brand - fill {display: none;}
.brand - stroke {display: none;}
.progress-bar {display: none;}
.lesson-link__progress {display: none;}
.overview-list-item__pie {display: none;}
</style>
I ran some tests and didn't find any problems. I can't say that there are no problems, I'm just saying that I didn't identify them.
Eventually, something can go wrong.
It is necessary to pay attention. If you update your content and re-export the package, you need to re-enter the CSS hack.
Thank you for sharing your workaround, Gustavo!
Thank you, Gustavo! I'll give it a try.
It's easy, Kaye. There is no secret.
In fact, you can consider this other CSS hack:
<style type = "text / css">
.progress-bar {display: none;}
.lesson-link__progress {display: none;}
.overview-list-item__pie {display: none;}
</style>
I went ahead with this workaround and I used this piece of code inside Google TagManager. It also worked.
Using TagManager, it is possible to add other things. For example, the Google Analytics tag.
Thanks, Crystal!
I remembered something important.
Whenever you export your course, you need to reinsert that code snippet into the index.html file.
Hi Gustavo - i see this css workaround is no longer working (unless i've done something incorrectly) . I believe css tags have changed sine the Rise update. Do you have a new version of the CSS workaround. Sorry my coding knowledge is not great...
This post was removed by the author