Archive

Mastering Rise Customization: How to Target Specific Elements with Data Block IDs

TutorialCSS

Articulate Rise is fantastic for rapid e-learning development, but sometimes you need that extra touch of customization to make your course truly shine. You might want to change the color of a specific button, adjust the spacing of a text block, or add a unique animation to an image. The challenge? How do you tell your CSS exactly which block or element to modify without affecting others?

Enter the data-block-id! This attribute is assigned at the block level in Rise—not to every individual element, but to the main container for a "Block" (which can include text, images, buttons, and more). Each block gets a unique ID, and all the content and elements for that block are nested inside it.

What is a data-block-id?

Think of a data-block-id as a unique address for a collection of elements that make up a single block in your Rise course. When Rise builds your course, it assigns a special identifier to each block container. This ID is embedded in the HTML as an attribute on the outermost div for that block, like this:

<div class="noOutline" data-block-id="ckmqdb7zl004q3f6ddydj4rf4">
  ...all the content and elements for this block are inside here...
</div>

Inside this block container, you might have text, images, buttons, or other elements. The data-block-id lets you write CSS rules that only apply to that block and its contents, leaving the rest of your course untouched.

How to Find a data-block-id (the Easy Way)

Traditionally, finding these IDs involved using your browser's developer tools (right-click → "Inspect"). While that works, it can be a bit daunting for beginners.

Now Live for All Slate for Rise (formerly RiseOverride) Users: The new dedicated Slate for Rise (formerly RiseOverride) button in the Rise editor toolbar gives you two menu options: Copy Block ID (instantly copies the current block's ID to your clipboard) and Add Class (lets you add a custom class to the block). No more right-clicking or digging through code—just click the toolbar button and select your action. Both features are available for free to all Slate for Rise (formerly RiseOverride) users.

Targeting Elements Within a Specific Block: A Simple Recipe

Once you have your data-block-id, applying CSS to elements inside that block is straightforward using a descendant selector. This means you're telling your CSS: "Find this block container, and then find this element inside it."

For example, suppose you want to change the appearance of a "Continue" button within a specific block. Your CSS would look like this:

/* Target the div with the specific data-block-id, then find the button inside it */
[data-block-id="ckmqdb7zl004q3f6ddydj4rf4"] .continue-btn {
  background-color: #ff5722; /* A vibrant orange */
  color: white;
  border-radius: 8px;
  padding: 15px 30px;
  font-size: 1.1em;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

/* Optional: Add a hover effect for that button */
[data-block-id="ckmqdb7zl004q3f6ddydj4rf4"] .continue-btn:hover {
  background-color: #e64a19;
}

Let's break down that CSS selector:

  • [data-block-id="..."]: This is an attribute selector. It picks out the block container with the specific data-block-id.
  • (a space): This is the descendant combinator. It means "look inside the previously selected element for the next part of the selector."
  • .continue-btn: This targets any element with the class continue-btn inside that block.

Why is this so powerful?

  • Precision: You modify only what you intend to, avoiding unintended changes elsewhere in your course.
  • Maintainability: Your CSS is clear about its purpose, making it easier to manage and update.
  • Flexibility: You can create truly unique designs for individual blocks or elements, even if Rise's built-in options are limited.

With Slate for Rise (formerly RiseOverride)'s free Chrome extension, you can easily add this custom CSS to your Rise SCORM exports in seconds—no unzipping or manual file editing required. Just paste your CSS into the editor, select your SCORM file, and let Slate for Rise (formerly RiseOverride) do the rest!

Ready to take control of your Rise course designs? Install Slate for Rise (formerly RiseOverride) for free and start customizing today!

← Back to Developer Notes