Skip to main content

How settings inherit

Design Upgrade Pro sets your design in layers. The General Design panel holds the global values: five color hues, a border radius, and border settings. Every other panel builds on those values. When you leave a panel setting empty, it falls back to the global value instead of using a fixed default.

This means you can restyle your whole site from one panel, then override only the elements that need something different.

The three layers​

Layer 1: Global values​

General Design sets the five hues (Primary, Neutral, Success, Warning, Danger), Global Border Radius, Border Color, Border Width, and Bold Border Width. Typography sets the base Text Color and the text size tiers.

Layer 2: Panel settings​

Each Core Features panel has settings for its own element, such as Primary Button on the Buttons panel. Most color settings say "Leave it empty to follow" a hue. If you fill one in, your value replaces the hue for that element only.

Layer 3: Your theme and LearnDash​

Some settings don't follow a hue. When you leave them empty, they inherit the surrounding color from your theme, or they render transparent. Each setting's description says which.

What follows each hue​

Use this section to predict what changes when you adjust a hue. It lists the panel settings that fall back to each hue when left empty.

Primary hue​

On the Buttons panel, Primary Button, Hover: Primary Button, Standard Button, Hover: Standard Button, and Focus Ring Color follow the Primary hue.

On the Typography panel, Link Hover Color follows it.

On the Tooltips panel, Background Color follows it.

On the Course Content Lists panel, Hover: Lesson Text follows it.

Neutral hue​

On the General Design panel, Border Color follows the Neutral hue.

On the Typography panel, Subtle Text Color follows it.

On the Alerts panel, General Alert: Text/Icon/Button, General Alert: Background, General Alert: Border, and Warning: Text/Button follow it.

On the Progress Bar panel, Progress Bar Container follows it.

On the Pagination panel, Background Color follows it.

On the Course Content Lists panel, Lesson Border and Line Separators follow it.

Success hue​

On the Alerts panel, Success: Text/Icon/Button, Success: Background, and Success: Border follow the Success hue.

On the Progress Bar panel, Progress Bar follows it.

Warning hue​

On the Alerts panel, Warning: Background and Warning: Border/Icon follow the Warning hue.

Danger hue​

On the Quizzes panel, the light incorrect-answer color follows a light tint of the Danger hue.

The Danger hue also colors a few elements that have no setting of their own, so changing the hue is the only way to restyle them:

  • The hover color of the remove-user and close icons in WisdmLabs Group Registration
  • LearnDash's red "danger" alerts
  • The required-field marker on the registration form

What follows the border settings​

Global border radius​

Alerts, tooltips, containers, and menus use the Global Border Radius. On the Course Content Lists panel, the Boxed header style, the Boxed container style, and the Default lesson style also use it.

Buttons and the progress bar have their own radius settings: Button Border Radius on the Buttons panel and Border Radius on the Progress Bar panel.

Bold border width​

On the Alerts panel, Border Width falls back to Bold Border Width when left empty. On the Course Content Lists panel, Lesson Border Width does too.

Border width​

Border Width sets the thin borders on separators, dividers, and form fields. Course Content Lists has its own Container Border Width for the Boxed container style.

What follows the base text color​

On the Typography panel, Text Color sets the base color for all LearnDash text. Any more specific color setting overrides it, including Subtle Text Color, Link Color, and text colors on other panels.

Link Color is the one exception to the hue pattern. When left empty, links inherit the color of the surrounding text, not the Primary hue. Link Hover Color still follows the Primary hue.

Moving from older versions​

Older versions of Design Upgrade Pro used individual color settings on the General Design panel. Those settings have been replaced:

  • Complete/Correct Color is now the Success hue.
  • Incorrect Color is now the Danger hue.
  • In Progress Color is now the Warning hue.
  • Link Color and Link Hover Color moved to the Typography panel.

Set these yourself​

No old setting feeds the Primary and Neutral hues, so they start at the plugin defaults. Open the General Design panel and set them to your brand colors.

Kept, but fixed in place​

Colors you set on individual elements, such as button backgrounds, alert text, tooltips, and pagination, keep their saved values. They stay fixed and don't follow the hues. To make an element follow its hue, clear its field.

Link Color and Link Hover Color are now on the Typography panel.

Tips​

  • Start with the hues. Set all five before touching any other panel, then only override what still looks wrong.
  • Clear a setting to restore inheritance. If an element stops changing when you adjust a hue, check whether its panel setting has a value saved.
  • Change one hue at a time and preview several page types, since one hue can affect elements across many panels.
Last updated on