Changing the background color in Rise

+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.