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