Step-by-Step Guide: Customizing Exported Rise 360 Files
-
01
Create Your Course & Text Blocks
Build your course in Articulate Rise 360 as usual. Insert the Text blocks where you want custom inline image layouts to appear.
-
02
Export Your Course Output
- Navigate to the top-right menu in Rise 360 and click Export.
- Select your preferred LMS format (e.g., SCORM 1.2, SCORM 2004, or Web).
- Click Export Package and download the resulting .ZIP archive file to your computer.
-
03
Extract Package & Locate Main Content Files
- Extract the downloaded .ZIP package.
- Navigate to the course folder structure:
scormcontent/index.html(orcontent/index.html). - Copy the custom image files you want to display into the
scormcontent/directory.
-
04
Identify Target Block ID
Articulate Rise uses a single default CSS class (
.fr-view) across text blocks. To target a specific text block without altering all text boxes across the course:- Open
index.htmlin your web browser. - Right-click the target paragraph and select Inspect (or press F12) to open Developer Tools.
- Locate the unique block identifier attribute:
data-block-id="YOUR_BLOCK_ID".
- Open
-
05
Add Custom CSS to index.html
Open
index.htmlin a text editor (e.g., VS Code, Notepad++). Add custom CSS rules inside the<style>section in the document<head>:<style> /* Target a specific text block by ID and set a background image beside text */ [data-block-id="YOUR_BLOCK_ID"] .fr-view { background-image: url("your-image-filename.png"); background-repeat: no-repeat; background-position: right center; background-size: 150px auto; padding-right: 170px; /* Space reserved for the image */ } </style>Tip: To apply this image layout to all text blocks globally across the entire course, remove the
[data-block-id="..."]attribute selector and target.fr-viewdirectly. -
06
Save and Test
Save your modified
index.htmlfile, re-compress the package folder into a .ZIP file, and test the published output locally or in your LMS environment.
Frequently Asked Questions
Will custom CSS edits persist if I re-export the course from Rise 360?
No. Exporting a new package from Rise 360 overwrites published files. You must re-apply the custom CSS script to index.html after every fresh export.
Are CSS image modifications responsive on mobile screens?
Yes, provided you use CSS media queries (e.g., @media (max-width: 768px)) to adjust background-size or hide the image on narrow smartphone viewports.
Do I need access to full source code to make these changes?
No. You only need to edit the exported web output files (index.html and standard image assets) using a text editor.