Remove the Start Course Button in Rise?

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?

Donald,

Thank you!  But this is only if you are exporting, correct?  I was just going to share it. 

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. 

Yes - but you only need the visibility part. The rest of the (existing) code that you include in the revised part is redundant as it is styling something that isn't visible.

Thank you so much Katie. I removed the Start button and managed to remove the Details button as well but then my course is embedded on a site and the learners cannot navigate through to the first lesson as they're unable to start the course. How can I get around this please?

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!

Hi Supada,

Line spacing in Rise is set to double spaces between bullet list items, but I can definitely understand why you'd want to have greater control over that setting! I'd be glad to pass along this idea for you! Thanks for letting us know what you'd like to see. 😊

Hi there,

Can I start my course from the first page of the RISE course i.e. from the blocks. As my course has only one page and we don't really need menu or table of content. So when user will launch the link it should directly land to blocks instead of Start course page.  

Thanks for the comments in advance!

Hi Aakshi,

I made a Peek for a similar question earlier this week. Take a look at it here.

Hope that helps! 

Ashley, thank you for posting that Peek example. 

Similar to Aakshi Manchanda, I'm looking for a way to export a course for my LMS, that begins on the lessons page and skips the introduction page. Although your example shows a way to do that, I need it to occur within the LMS.

Is there a way to have a RIse course launch directly into the lessons, skipping the introduction page with the "Start Course" button?

Background: We are attempting to build a curriculum that is made of several small modules that can also stand alone outside of the curriculum. When launched within the single curriculum, I don't want the learner to have to jump into an introductory page for each module. 

Outside of the curriculum, we'd want that intro page available for each course, but within, it becomes redundant. 

Hi Cory,

Thanks for sharing that additional info. I can see how removing that button would really help with your course design. There isn't an option to remove it right now, but I can definitely pass this along to the team. 

Thanks Ashley. Just to clarify, I'm looking to skip that entire page, not just remove the bottom. Thanks for passing It along 

Thanks, Cory for clarifying! So removing the introduction page entirely, and having the user start at the first lesson is what you'd like to see? I'll pass that feedback along to our product team. 

Does this still work? I tried it, but cannot get rid of the Details button. (I want to keep Start.)

Hi Patty,

Yes, you can still use the same method to remove the Details button from the Rise course main page. Here's another video demo to show you how it's done!

Hi, Ashley. Do you have any updates on this? We would also like to skip the entire cover page and start the course on the first lesson.

Hello, Rethink Compliance!

Check out Ashley's Peek video where she demonstrates how you can skip the main menu page and link directly to any lesson within a Rise course.