General Design

The General Design panel sets the color palette and border styling LearnDash applies sitewide. These settings also shape the design of several companion LearnDash plugins (see Integrations), keeping your site’s appearance consistent throughout.

Color hues

Five hues make up LearnDash’s color system. Each hue drives a ladder of derived tones, lighter and darker shades generated automatically from the base color. Section-specific controls elsewhere in LearnDash can override individual components within that ladder.

Primary hue

The primary hue drives the primary ladder: buttons and interactive accents.

Neutral hue

The neutral hue drives the neutral ladder: surfaces, borders, and secondary text.

Success hue

The success hue drives the success ladder: correct answers and completion states.

Warning hue

The warning hue drives the warning ladder: in-progress states.

Danger hue

The danger hue drives the danger ladder: incorrect answers and destructive actions.

Global border radius

Global border radius sets the corner rounding for LearnDash elements, including:

  • containers
  • alerts
  • tooltips
  • menus

Enter the value in pixels (px).

Borders

Three settings control border appearance across LearnDash templates.

Border color

Border color sets the container and separator borders across all templates. It overrides tones derived from the neutral hue, though individual border controls elsewhere still take precedence over their own components. Leave it empty to follow the theme’s neutral hue.

Border width

Border width sets the hairline borders for separators, dividers, and field outlines. Enter the value in pixels; the default is 1 px.

Bold border width

Bold border width sets the emphasis borders for alert outlines, list-item outlines, and the content footer rule. Enter the value in pixels; the default is 2 px.