Forum Discussion
Remove the Start Course Button in Rise?
- 2 years ago
Good news, everyone! We've just released a new feature that allows you to turn off the cover page when you publish for LMS to improve compatibility, streamline training, and get learners into content faster. Give it a try, and let us know if you have any questions about it!
Note: You can't hide the cover page for training created from Next Big Idea Club content templates.
Building on my guide for removing "| Rise" from the title that appears in the browser tab (see https://community.articulate.com/discussions/rise/is-there-any-way-to-get-rid-of-rise-in-a-rise-course-s-output), I dug into the JS/CSS code and found solutions to:
- Remove [BEGIN] button;
- Remove [DETAILS] button;
- Remove Inverted caret/down chevron that appears to the right of the [DETAILS] button; and
- Add your favicon.ico (will appear in the browser tab).
Caveat (for those who are unfamiliar with digging into the coding):
For each course and after each course export from Rise, you must:
- Unzip the course ZIP file;
- Locate the applicable files, which may include:
Web Export:
\index.html
\lib\mainbundle.css
\lib\mainbundle.js
SCORM Export:
\content\index.html
\content\lib\mainbundle.css
\content\lib\mainbundle.js - Manually edit the applicable file(s) using a text editor;
- Save the updated file; and
- Re-ZIP the course files (may only be required for LMS deployment).
==============================
DEPENDING ON YOUR NEEDS, COMPLETE ONE OR MORE OF THE FOLLOWING TASKS:
A. To Remove the [BEGIN] Button
- Open index.html in a text editor;
- Search for "BEGIN";
RESULT:
"courseStart":"BEGIN"
- Delete BEGIN text, but leave the double quotes; and
- Save the file.
B. To Remove the [DETAILS] Button
- Open index.html in a text editor;
- Search for "DETAILS";
RESULT:
"courseDetails":"DETAILS"
- Delete DETAILS text, but leave the double quotes; and
- Save the file.
C. To Remove the White Inverted Caret/Down Chevron (part of the [Details] button)
- Open main.bundle.css in a text editor;
- Search for ā.overview__button,.overview__details-triggerā ;
RESULT:
.overview__button,.overview__details-trigger{display: inline-block;font-size: 1.2rem;font-weight: 800;line-height: 4rem;letter-spacing: .04em;text-decoration: none;text-transform: uppercase;
- Add "visibility:hidden;" property; and
RESULT:
.overview__button,.overview__details-trigger{visibility:hidden;display: inline-block;font-size: 1.2rem;font-weight: 800;line-height: 4rem;letter-spacing: .04em;text-decoration: none;text-transform: uppercase;
- Save the file.
D. To Add Your FAVICON.ICO to Your Course
Note: This assumes you already have one created and deployed on your web server - either in the root folder or in your CMS.
- Open main.bundle.css in a text editor;
- Search for "favicon.ico"
RESULT:
favicon:"https://f.vimeocdn.com/images_v6/favicon.ico"
- Replace the path in double quotes with the path to your favicon.ico on your web server.
RESULT:
favicon:"https://mywebserver/favicon.ico"
If unsure, view the source code on your website's home page and copy the path to the favicon.ico) -- because Rise uses HTTPS, your path must include this in the path as well; - Repeat steps 2 and 3 as there are two identical favicon.ico entries that should be replaced; and
- Save the file.
NOTE: I cannot explain why, but the main.bundle.js contains two favicon.ico references to Vimeo's favicon.ico (along with references to a Smithsonian Museum). But I replaced both of these with our favicon.ico path and the course displayed with our favicon.ico in the browser tab.
Finally, your favicon.ico may not display in the browser tab if your course title is long and you may get different results depending on operating system, browser, number of tabs open, etc.
Donald,
Thank you! But this is only if you are exporting, correct? I was just going to share it.