Remove the Start Course Button in Rise?

Hi Kris,

That's a great question, and you certainly can remove the Start Course and Details buttons on the cover page in Rise! 

I created a screencast on the process which can be viewed here. You might also find this article on customizing text labels handy.

I hope this helps, and let me know if you have any other questions!

That's great! I had never thought of deleting the text :)

Any idea on how to remove the little down arrow? No big issue with it being there, perhaps there is something in Javascript that can be removed? I know absolutely nothing about that side of things but perhaps someone else does?

Hi Michael,

You can remove the little arrow / caret using css. Some instructions here: https://community.articulate.com/discussions/rise/remove-carrot-to-the-right-of-the-get-started-button-in-rise

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:

1. Unzip the course ZIP file;
2. 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
3. Manually edit the applicable file(s) using a text editor;
4. Save the updated file; and
5. 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

1. Open index.html in a text editor;
2. Search for "BEGIN";
   
   RESULT:
   

   "courseStart":"BEGIN"

3. Delete BEGIN text, but leave the double quotes; and
4. Save the file.

B. To Remove the [DETAILS] Button

1. Open index.html in a text editor;
2. Search for "DETAILS";
   
   RESULT:
   

   "courseDetails":"DETAILS"

3. Delete DETAILS text, but leave the double quotes; and
4. Save the file.

C. To Remove the White Inverted Caret/Down Chevron (part of the [Details] button)

1. Open main.bundle.css in a text editor;
2. 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;

3. 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;

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

1. Open main.bundle.css in a text editor;
2. Search for "favicon.ico"
   
   RESULT:
   

   favicon:"https://f.vimeocdn.com/images_v6/favicon.ico"

3.  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;
4. Repeat steps 2 and 3 as there are two identical favicon.ico entries that should be replaced; and
5. 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.

A & B are both best achieved by just setting those fields to use an empty string from within Rise label settings.

C only requires visibility:hidden;

Could anyone please tell me if we can also remove the Percentage Completion by modifying the Java Script file?

Yes, my suggestions are intended only for an exported course (web only or LMS) - but as Stuart points out, you can remove the "Begin" and "Details" button directly through Settings>Labels (so I was over thinking it). 

Unfortunately, there does not appear to be any way in the Settings>Labels to remove the inverted caret/downward chevron (so you can hide the  "Details" button but you are left with the inverted caret/downward chevron only). So currently, the only way to hide the icon is by hiding it using the CSS change. Articulate really needs to address this through the Settings>Labels (e.g, make the icon optional, let the user select an icon to go with label text, etc.).

Also, to clarify my "C" suggestion above - my ONLY suggested addition/change was:

visibility:hidden;  

I was simply showing the steps to locate the location in the file to place the visibility:hidden; property  (for those who need/want detailed instructions).

Finally, here is how you can hide the progress bar:

E. To Remove the Progress Bar

1. Open main.bundle.css in a text editor;
2. Search for “.progress-bar” ;
   
   RESULT:
   

   .progress-bar{font-weight:700;text-transform:uppercase;letter-spacing:.12rem;font-size:1.1rem;color:#fff}

3. Add ONLY the "visibility:hidden;" property; and
   
   RESULT:
   

   .progress-bar{visibility:hidden;font-weight:700;text-transform:uppercase;letter-spacing:.12rem;font-size:1.1rem;color:#fff}

4. Save the file.

I will add two more CSS solutions for a long-standing Rise pet peeve - the font size used in Rise's "Details" list of Sections/Lessons is too small (I submitted a suggestion that the user should be allowed to modify the Details font/sizes):

F. To Change the Details "Lesson" Font Size

1. Open main.bundle.css in a text editor;
2. Search for “.overview-list__link{” ;
   
   RESULT:

   .overview-list__link{display:block;padding:2rem 6rem 2rem 4rem;font-family:lato,sans-serif;font-size:1.3rem;line-height:1.6rem;font-weight:700;text-decoration:none;color:#313537}

3. Change any property values according to your needs, e.g., I changed the font-size from 1.3rem (above) to 1.6rem (below); and
   
   RESULT:
   

   .overview-list__link{display:block;padding:2rem 6rem 2rem 4rem;font-family:lato,sans-serif;font-size:1.6rem;line-height:1.6rem;font-weight:700;text-decoration:none;color:#313537}

4. Save the file.

G. To Change the Details "Section" Header Font Size (if you are using section headers)

1. Open main.bundle.css in a text editor;
2. Search for “.overview-list__title-content{” ;
   
   RESULT:
   

   .overview-list__title-content{margin-top:1.5rem;margin-bottom:1.5rem;padding:.5rem 0;color:#313537;font-family:lato,sans-serif;text-transform:uppercase;font-size:1rem;font-weight:700;letter-spacing:.06rem;border-bottom:.1rem solid rgba(49,53,55,.1)}

3. Change any property values according to your needs, e.g., I changed the font-size from 1rem (above) to 1.8rem (below); and
   

   .overview-list__title-content{margin-top:1.5rem;margin-bottom:1.5rem;padding:.5rem 0;color:#313537;font-family:lato,sans-serif;text-transform:uppercase;font-size:1.8rem;font-weight:700;letter-spacing:.06rem;border-bottom:.1rem solid rgba(49,53,55,.1)}

4. Save the file.

Note that these changes do not impact the font size of the Sections/Lessons listed in the side menu. 

Hi Angel! 

If you remove the Start Course button from the course main page, your learners should still be able to scroll down and click the first lesson title in the course outline to navigate to the first lesson.

Do you see the course outline on the main page of your course, as shown below?

Does anyone know how to change line height in Rise? I added bulleted lists and they seem to be a little bit of big gap.

Thanks!