Custom scenario scene background image in RiSE

The avatar would have to be part of the background image to be consistently cut off at the eyeline.

The elements of the page (avatar, background, text boxes) are relatively positioned rather than absolutely positioned. So the avatar's eyeline will move up and down in relation to the background. It all depends on the size and orientation of the screen the user looks at it on. The avatar and text boxes will also move left and right in relation to the background.

Drag your web browser window to make it slowly smaller or larger to see how the different elements move around.

Yep, I'm another one that needs a clear background. It had to be programmed into the function so it shouldn't be too difficult to link that to an 1/0 input to toggle it on or off.

Where I work we have a workaround to use other characters in these scenarios. When downloading the Rise output, check inside the folders (in content > assets) and there you should be able to find the pngs for the character.

You'd have to replace each one of them with the png of the character of your liking, if you had designed them for example. It's quite time consuming but it works.

If you just want to get rid of the character altogether, simply edit the image in any image editor, like paint net for example, which is free, and just erase the character so only a transparent block stays; I guess you could delete them but I don't know how that would affect the scenario within rise, by erasing the content you make sure it's "still there", just transparent and you won't be able to see a thing.

So, I did what Simon Smith suggested and it worked! Here are the steps I took:

1. I created a Rise course ensuring the Scenario block was used in one of the lessons

2. I exported the course for web (for easy testing)

3. I unzipped the exported folder and followed the filepath: content>lib>main.bundle.css

4. I opened the main.bundle.css file in Notepad (don't be scared by the block text that appears!)

5. I used Ctrl+F (on Windows) to open up the Find function and I typed in blur and hit Enter

6. Amongst the mass of text, the Find function quickly found this line:

scenario-block__background{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:-.2rem;filter:blur

7. I deleted the words filter:blur and clicked File>Save and then exited Notepad

8. To test the result, I returned to the exported folder and followed the filepath: content>index.html

9. I clicked on index.html to open up the course in my browser and voila! The blur was gone (see attachment)

I have no experience at all with CSS but this took me less than 2 mins to do. 

Thank you Simon! I'd be interested to learn how else CSS manipulation can extend the functionality of Rise!

Cheers

Alex 

I third, fourth and fifth what Juan Napoli said!

Second the request to be able to unblur the background and as I posted on a separate thread, the option to remove the character as well. The reason being - Scenarios is the only programmable option in interactive blocks and it forces you down a path of using a blurred background and a character that is not consistent with most corporate enterprise design approaches. I would like to offer a short custom adventure or even an interactive quiz that depends on reaching the right combination of alternatives, all that is possible with Scenarios, you guys just need to give us control by making our background unblurred and no characters, please.

Cool tip Simon. Nevertheless i prefer it being in Rise somewhere... blur background checkbox.
As i can get it done by CSS, but most of the editors that will create the courses/scenarios donot know how to get that done. Further more as Brian asked for too, i do prefer having the option to hide, disable or make a character transparant, because i do want to use custom backgrounds without an character in front. Would be even better if we could use custom .png's in front...

Hey Nancy & David.

You can remove the blur in the background by editing main.bundle.css. You probably want to Unminify the CSS first to make it more readable.

Just look for scenario-block__background and remove the filter:blur; parameter.

There's a bunch of other good stuff around here for playing with the look and feel of the scenario block.