How the settings work
Design Upgrade Pro for H5P sets your design in layers. A few global settings on the General Design section drive almost everything; the sections below it let you override individual parts.
Start with the hues
Primary Hue and Neutral Hue each produce a range of lighter and darker tones. Buttons, selections, progress fills and accents use steps of the Primary Hue; borders, answer backgrounds and progress tracks use steps of the Neutral Hue.
Set these two first, then preview a few activities before you touch anything else. Most sites need little more.
Empty means "inherit"
Most settings start empty. An empty setting doesn't mean "no color": it follows something else, and its description in the Customizer says what. The common notes are:
| Note in the Customizer | What it means |
|---|---|
| Empty: inherits Primary Hue. | Uses a step of the Primary Hue |
| Empty: inherits Neutral Hue, or keeps its own gray while that is empty. | Uses a step of the Neutral Hue once you set one; until then, keeps the plugin's own gray |
| Empty: inherits Main Text Color. | Uses the Main Text Color from Typography |
| Empty: a darker step of Primary Hue. | A darker shade of the Primary Hue, usually for hover states |
| Empty: white or black, whichever reads better on its background. | Picks a readable text or icon color automatically |
Fill in a setting to override it for that one element. Clear it again to go back to inheriting.
If an element stops changing when you change a hue, check whether its own setting has a saved value.
Newer and older H5P activities
H5P is gradually moving its content types to a newer design. Your site can have both kinds at once, depending on which version of each content type is installed. The plugin styles both, with two differences:
- Content Density on General Design only affects activities that use H5P's newer design.
- Content Containers → Background Color is transparent by default on older activities; newer ones keep H5P's white surface until you set a color.
Using Design Upgrade Pro for LearnDash too?
If Design Upgrade Pro for LearnDash is active and has saved hues, an empty Primary Hue or Neutral Hue here follows the LearnDash one. The description under the setting names the source, for example "Empty: inherits Design Upgrade Pro for LearnDash › General Design (#6f38b8)". Set a hue here to give H5P its own.
What always wins
Colors that an author sets inside an H5P activity override the plugin. That includes:
- colors and opacity set in an activity's own settings, such as Drag and Drop's background opacity
- Memory Game's Look and feel → Theme Color in H5P's settings
When changes appear
The Customizer preview reloads after each change. When you click Publish, the plugin rebuilds one stylesheet that every H5P activity on your site loads, so visitors get one small, cached file. If your changes don't appear on the live site, see Troubleshooting.