Forum Discussion
Changing the background color in Rise
Hello, our customer would like us to change the color of the background from white to a different color. How can we do that in Rise? Thank you.
Good news, everyone! You can now customize your blocks with distinctive color and image backgrounds using enhanced block settings! Check out the new feature, and let us know what you think!
- GiseleRolimCommunity Member
I can't change background collor of "Process" interaction. Could you help me?
- BeckyDymondCommunity Member
+1 vote
- EugeneElliottCommunity Member
+1 for background coloring, themes, fonts, etc. This is a requirement for my organization. Thank you!
- HollyKeelCommunity Member
Would adding an option to change the background to an image be possible? Our organisation has different themes (images) for different groups and it would be helpful to set this up as the background rather than have to colour match a block colour.
Holly, can you use a text on image block, or a labeled graphic block? Those blocks will allow you to have text elements showing over your "background" image.
- HeidiWalshCommunity Member
Any chance of global settings for colour and font yet? I really need these for accessibility purposes.
No changes on this yet, Heidi.
- JonesWhiteCommunity Member
Global background coloring - please!
- JenJensonCommunity Member
+ global background colouring please
- CathyGregory-1bCommunity Member
Yes agree +++ I'm going through the process right now of needing to change the background color of 100s if not 1000+ blocks across current courses, and I'm not the only one on the team.
- Tim_Community Member
+1 from me.
The only way to thoroughly change the background on a Rise 360 course is to edit the course by hand after publishing. That in itself can cause some issues, as Rise tends to hard code background colours on some block types and not others.
I downloaded, unpacked and then edited the scormcontent/index.html file and added a new reference to a custom CSS file where I could do my own colour work.
<link rel="stylesheet" type="text/css" href="custom.css">
For instance, in my example below I have had to remove the background colour on the process block as Rise puts in a default value of something like #f4f4f4. This gets rendered to the HTML tag as a 'background-color' style, which of course overrides any CSS. You have to go in and manually edit those to be the correct colour (or edit it in the base64 content block inside the index, if you know how). Only then can you begin to ensure styles can be applied. It's fiddly time consuming work.
There is no way to re-load these custom styles back up into Rise or Review afterwards, so if you make changes in the source you have to then remember to go back to the downloaded package and re-apply the extra changes back to the published package.
I've attached the custom.css file that was used to render the course above in case anybody is interested. It's not the greatest formatting and doesn't cover every block type that Rise can offer - but it might show someone a place where they can start on their ever-treacherous road to customising Rise outputs. Some bits are ugly - I mainly wanted to find out what could be changed, not design something beautiful.
I wish they would implement a way to change the background colour of every element - AND automatically adjust foreground text colours based on established contrasting colour guidelines and practices.
- hazelBStaff
Thanks for sharing your thoughts with us, Tim! I will add this information to the feature request.
Good news, everyone! You can now customize your blocks with distinctive color and image backgrounds using enhanced block settings! Check out the new feature, and let us know what you think!
- HeatherVogt-d32Community Member
Thank you so much! It looks great!
- StephanieMcC942Community Member
Can I apply a custom colour to multiple blocks at once?
Hi Stephanie! Currently, there isn't a way to apply custom color globally to your course.
However, we are tracking requests for this ability in Rise. I'll be glad to add your name to the list so that you'll get notified if we make changes that will help.
- MichelBeraudCommunity Member
That's great. But is there a way to change the BG color of the entire page? I often have a block that doesn't take the entirety of the page leaving a large white space in the bottom... :(
Hi Michel,
The background color can only be changed on a per block basis, but I'll add your voice to a feature request that we have open to add the background color as a controlling theme setting.