Forum Discussion

HeidiWoodruff's avatar
HeidiWoodruff
Community Member
2 years ago

Change the background colour for a Process Block

How can I change the background colour for a Process block? The default grey does not match my theme.

  • Good news, everyone! You can now customize the Process block interaction with distinctive color and image backgrounds using enhanced block settings! Check out the new feature, and let us know what you think! 

  • Hi Heidi,

    This is a feature we have requested from our Rise engineers.  It's not in our roadmap yet, but we will let you know as soon we hear an update about this feature from our team.

    I may have found a workaround for you, though.  In the below screenshot, I was able to change the Process block background color from gray to blue:

    Here's how I did it:

    1. Export your course as LMS and extract the contents on your desktop.
    2. Navigate to ../scormcontent/lib folder and open main.bundle.css using a text editor (e.g., Notepad or Notepad++).
    3. Locate .block-process (as shown below)
    4. The hex value #f5f5f5 is the color gray (or smoky white).
    5. Change this value to the hex code of your preferred color.  In the first screenshot, I changed it to #2986cc.
    6. I saved the file and re-zipped the files and folders I extracted.  In the below short clip, you can see the files and folders I zipped into Archive.zip:
    7. Upload the new zipped file to your LMS.
  • I have to add that this is an unsupported process by Articulate.  You may need to familiarize yourself with CSS if you need to further explore this option.

  • Good news, everyone! You can now customize the Process block interaction with distinctive color and image backgrounds using enhanced block settings! Check out the new feature, and let us know what you think! 

  • Please can this change be implemented - it isn't great that we have to resort to code editors for this in 2023.