With the new look and feel, Custom CSS will continue to be supported.
Our goal remains to be a platform for creating engaging content, and allowing users to adjust activities to their learners is a priority for us. Thanks to our Custom CSS, organizations can apply their own styling when needed, with some limitations.
Now, together with the new look and feel, you'll have more control over how you wish for your content to look. But there are a few key details to keep in mind.
In this document, we’ll cover:
- Recommended CSS and the new look and feel workflow for admins
- Existing CSS that might break
- Custom color overrides in content types
Recommended CSS and the new look and feel workflow for admins
If you’re already using Custom CSS, parts of your styling may conflict with the new look and feel. So to safely test your CSS, we recommend using the setting for Admin Only in the Content Look & Feel to preview your code. This will allow you to see how your Custom CSS behaves without interfering with your learners' or authors' progress.
Once you're happy with the CSS you've added and how it behaves with the new theme, you can go ahead and enable the Content Look and Feel for Everyone.
Here is the recommended workflow:
Step by step
-
Step 1 — Enable the new look and feel for Admin Preview
Go to Settings → Manage Organization → Content Look & Feel and set Visibility to Admins only. -
Step 2 — Review H5P Content using Custom CSS
Open an old H5P content that uses Custom CSS and review it after the new look and feel has been enabled. You may notice some issues with element alignment or the colors selected here. -
Step 3 — Update Custom CSS, if needed
Open the Custom CSS editor, using only the preview panel, and update the code to match the new look and feel theme. -
Step 4 — Validate that the Custom CSS behaves correctly with the new look and feel
Confirm content displays correctly, and that it is readable, consistent, and aligned with your branding. -
Step 5 — Publish to Everyone. Important: Wrong order of this step may result in students temporarily seeing broken activities.
Go to Settings → Manage Organization → Content Look & Feel and change Visibility to Everyone.
Then go to Settings → Manage Organization → Custom CSS, push CSS from Preview → Live, and save.
Existing CSS that might break
With the new look and feel, we've introduced some changes in our code, which may result in some Custom CSS being overridden, style or theme conflicts, and, in some cases, the UI may be inconsistent or broken.
In detail, here are the changes we made:
- New class names
- Updated layout spacing
- Modernized UI components
Color overrides in content types settings
Some content types, such as Memory Game and Interactive Book, include some color options within the behavioral settings for elements within them. When an author applies custom colors within these content types, those colors will override the main color defined by the selected theme in the new look and feel, but not the Custom CSS.