Mastering Rise Customization: How to Target Specific Elements with Data Block IDs (Beginner Guide)

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. This makes it possible to target everything inside a specific block, or just certain elements within it, using CSS.

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)

Above: The new RiseOverride toolbar button in Rise, with quick access to Copy Block ID and Add Class (free for all users).

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 RiseOverride Users: The new dedicated 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—more on this in a future post). 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 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. The block's HTML structure might look like this (simplified):

<div class="noOutline" data-block-id="ckmqdb7zl004q3f6ddydj4rf4">
  ...
  <button class="continue-btn brand--ui" data-continue-btn="" type="button">
    <div class="brand--linkColor">
      <div class="fr-view rise-tiptap">CONTINUE</div>
    </div>
  </button>
  ...
</div>

To target only the "Continue" button inside this specific block, your CSS would look like this:

/* Target the div with the specific data-block-id, then find the button with class 'continue-btn' inside it */
[data-block-id="ckmqdb7zl004q3f6ddydj4rf4"] .continue-btn {
  background-color: #ff5722; /* A vibrant orange */
  color: white;
  border-radius: 8px; /* Slightly rounded corners */
  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; /* A slightly darker orange on hover */
}

Let's break down that CSS selector:

• [data-block-id="ckmqdb7zl004q3f6ddydj4rf4"]: 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. Because of the descendant combinator, it will only apply to continue-btn elements found within the block with that ID.

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 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 RiseOverride do the rest!

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