Archive

Slate for Rise (formerly RiseOverride) v1.5.0 Release: Live CSS Preview & Copy Block ID Selector

ReleaseTutorial

We're excited to announce Slate for Rise (formerly RiseOverride) v1.5.0—our biggest update yet for creators who want total control over their Articulate Rise courses! This release brings two major features designed to make your workflow faster, smoother, and more visual than ever before.

Live CSS Preview: See Your Changes Instantly

With Live CSS Preview, any changes you make in the CSS window of the Slate for Rise (formerly RiseOverride) Chrome Extension are now reflected in real time inside Articulate Rise's editor and course preview. This feature is completely free for all users. No more guessing, saving, or reloading—just type your CSS and see the results instantly, right where you're working.

  • Instant feedback: Tweak colors, spacing, fonts, and more, and watch your course update as you type.
  • Works in both the Rise editor and course preview: Perfect your design before you export.
  • Save time and reduce trial-and-error: Focus on creativity, not on switching tabs or reloading pages.

Copy Block ID Selector: Target Elements Even Faster

We've added a new button to the Slate for Rise (formerly RiseOverride) toolbar: Copy Block ID Selector. With one click, you can copy a ready-to-use CSS selector for any block in your Rise course. This feature is also completely free for all users. This makes it even easier to target specific blocks or elements for custom styling—no more digging through HTML or using developer tools.

Note: The copied selector targets the block container itself. For best results, you'll want to add a descendant selector (e.g., [data-block-id="..."] .your-element) to scope your CSS changes to specific elements within the block, rather than the entire block.

  • One-click selector copy: Instantly get the exact selector you need for your CSS.
  • Perfect for advanced customizations: Combine with Live CSS Preview for rapid design iteration.

Try It Yourself: Make a Floating Pink Continue Button

Want to see how easy it is to style a specific block? Here's a quick experiment you can try in any Rise course:

  1. Use the Slate for Rise (formerly RiseOverride) toolbar's Add Class option to add pink-button as a custom class to your chosen block.
  2. Paste the following CSS into the Slate for Rise (formerly RiseOverride) CSS window:
.pink-button .continue-btn {
  background-color: pink;
  color: black;
  border-radius: 50px;
  animation: floatY 2.5s ease-in-out infinite;
}

.pink-button .continue-btn:hover {
  background-color: black;
  color: pink;
}

@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

This will give your Continue button a playful pink look and a gentle floating animation. You can use any class name you like—just be sure to match it in both the toolbar and your CSS.

How to Get Started

  1. Update or install the Slate for Rise (formerly RiseOverride) Chrome Extension from the Chrome Web Store.
  2. Open your Articulate Rise course and launch the extension.
  3. Start customizing! Use the CSS window for live previews and the new toolbar button to copy selectors as needed.

We can't wait to see what you create with these new tools. As always, Slate for Rise (formerly RiseOverride) is free for all users.

Note: To make your custom CSS work in your published course, you'll need to patch your final SCORM file using the Slate for Rise (formerly RiseOverride) extension. This process automatically injects your CSS into the export—no manual editing required.

← Back to Developer Notes