47 Replies
Katie (Gokhshteyn) Riggio

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!

Donald Kerns

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.
Donald Kerns

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.

 

Donald Kerns

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. 

Stuart Marshall
Donald Kerns

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

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.

Aakshi Manchanda

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!

 

Cory Warshawsky

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.