Injecting CSS into Rise via Storyline

If you're looking to add a touch of customization to your Rise course, one effective method is to insert CSS  via a Storyline block. In this example, I’ll show you how to draw extra attention to the "Continue" button at the bottom of your lesson using some custom CSS and JavaScript.

Step 1: Inspect the Element

The first step is to identify the target element you want to style. I used Chrome DevTools to inspect the "Continue" button and found that all these buttons share the class lesson-nav-link__link.

Step 2: Create a Simple Storyline Course

Next, I created a small Storyline course with just one slide and no player buttons—keeping it minimal so it seamlessly integrates into the Rise course.

Step 3: Inject Custom CSS with JavaScript

I added a trigger in Storyline that runs the following JavaScript code when the timeline starts. This script injects a CSS animation into the parent document, highlighting the "Continue" button by shifting its color in a loop.

  // CSS to be injected into the parent document
const css = `
  @keyframes colorShift {
    0% {
      color: #ff0000; /* Red */
    }
    33% {
      color: #00ff00; /* Green */
    }
    66% {
      color: #0000ff; /* Blue */
    }
    100% {
      color: #ff0000; /* Back to Red */
    }
  }

  .lesson-nav-link__link {
    animation: colorShift 3s infinite;
  }
`;
// Create a new style element
const style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
// Append the style to the parent document head
parent.document.head.appendChild(style);

Step 4: Publish and Add to Your Rise Course

Publish your Storyline course and add it as a block in your Rise course. This way, the styling will be injected whenever the block is loaded.

Step 5: Test Your Course

Once you publish your Rise course and upload it to your LMS or a testing platform like ReviewMyElearning.com, you’ll see the effect in action. The "Continue" button at the bottom of each lesson will stand out with a looping color shift, making it more noticeable to users.

Final Thoughts

This approach is a simple yet powerful way to enhance the user experience in your Rise courses, drawing attention to key elements. You can further customize the CSS to match your branding or highlight different parts of the course as needed.