Benefits of Customizing the Print Results Screen
- ✓Brand Consistency
Matches printouts with corporate color schemes, logos, and visual brand identity standards.
- ✓Enhanced Readability
Adjusts text colors, row shading, and contrast ratios to ensure high-visibility print copies.
- ✓Professional Layout
Transforms basic default report templates into polished certificates or official compliance documentation.
Step-by-Step Customization Guide
-
01
Locate the Report File in Published Output
Publish your Storyline project for Web or LMS. Open the published output directory and navigate to:
[Published Folder]\story_content\report.html -
02
Replace with Custom HTML Template
Replace the default
report.htmlfile with your custom HTML/CSS plugin template file. -
03
Edit CSS Rules in Text Editor
Open the
report.htmlfile in a code editor (e.g., Notepad++ or VS Code) and modify the CSS property lines to update branding styles:- Title Background Color: Edit line 124 to update the header background color block.
- Title Text Color: Edit line 125 to assign target font colors for the report header.
- Table Header Background & Text: Edit lines 68 and 69 to change background fill and font styling across header rows.
- Table Row Styles: Edit lines 58, 62, and 54 to customize alternating row fill shades and primary text colors.
- Assessment Feedback Colors: Edit line 93 to update the specific text color highlighting Correct and Incorrect response tags.
(Note: CSS modifications will not render when launching files directly from a local hard drive. Content must be hosted on an LMS or web server to view updated print styling.)
Style Line Editing Quick Reference
| Target Report Element | CSS Line Location | Design Application |
|---|---|---|
| Header Banner Background | Line 124 |
Sets background branding color behind the main report title block. |
| Table Column Headers | Line 68 & 69 |
Configures table column fill shades and heading font colors. |
| Data Rows | Line 54, 58, 62 |
Alters alternating table row shading and question text formatting. |
| Pass/Fail Feedback Tags | Line 93 |
Assigns color accents for correct vs. incorrect evaluation text. |
Frequently Asked Questions
Will re-publishing the Storyline project overwrite my custom report.html file?
Yes. Every time you re-publish from Storyline, the software generates a default report.html file. You must swap in your custom HTML file after each publish export.
Does this print customization technique work in Storyline 360, 3, and 2?
Yes. The report.html template structure in story_content remains compatible across Articulate Storyline 2, 3, and 360 versions.
Can I insert a corporate logo into the customized print result page?
Yes. You can insert standard HTML <img> tags directly into the body section of the report.html file to display company logos alongside score tables.