Home / / Theme options – Design – Custom Colors Settings

Theme options – Design – Custom Colors Settings

17925 views
Before reading this help file you may want to check this video. It explains theme functionality and may be easier to understand. Watch Video on Youtube

The Custom Colors section allows you to change the main color scheme used by WPResidence theme elements.

These options are useful when you want to match the website design with your brand colors without adding custom CSS for the main theme colors.

Important: These options control the main WPResidence theme colors only. They do not control every small design detail, and they do not override colors set directly in Elementor sections, columns, widgets, or Elementor global styles. Smaller design changes can be handled with Elementor styling or custom CSS.

Content

Where to find Custom Colors

Go to:

Theme Options > Design > Custom Colors

From this section, you can change the main colors used by the theme.

How to change a color

  1. Go to Theme Options > Design > Custom Colors.
  2. Find the color option you want to edit.
  3. Click Select Color.
  4. Choose the new color or add the color code.
  5. Click Save Changes.
  6. Clear cache if the change does not show immediately.

Available color options

Main Color

The Main Color is used for the primary theme color. This can affect important theme elements such as buttons, highlighted areas, icons, and other main accent elements.

Second Color

The Second Color is used as a secondary accent color in the theme design.

Page Background Color

The Page Background Color changes the general page background color. The default color is light grey.

Page Content Background Color

The Page Content Background Color changes the background color of the main page content area. The default color is light grey.

Content Area Background Color

The Content Area Background Color changes the background color of text sections and content blocks. The default color is white.

Breadcrumbs Color

The Breadcrumbs Color changes the color used for breadcrumb text.

Text Color

The Text Color changes the default text color used by theme content.

Link Color

The Link Color changes the default color used for links.

Headings Color

The Headings Color changes the color used for heading titles.

Map Controls Background Color

The Map Controls Background Color changes the background color of the map control buttons.

Map Controls Font Color

The Map Controls Font Color changes the text/icon color used inside the map control buttons.

Custom Colors and Elementor pages

The Custom Colors options apply to WPResidence theme elements.

If a page is built with Elementor, some colors may be controlled directly from Elementor widget, section, or global style settings.

Important: If an Elementor widget has its own color set inside Elementor, that Elementor setting can override the theme color. In that case, edit the color directly from Elementor.

Use Theme Options > Design > Custom Colors for theme-controlled colors. Use Elementor style options for Elementor-controlled sections and widgets.

When to use Custom CSS

The Custom Colors panel does not include color controls for every small theme detail.

Use custom CSS when:

  • You need to change the color of a very specific element.
  • The color option is not available in Custom Colors.
  • An Elementor or plugin element needs extra styling.
  • You want different colors on a specific page only.

Custom CSS can be added from:

Theme Options > Design > Custom CSS

Save or reset color settings

After changing any color, click Save Changes.

You can also use:

  • Reset Section – resets only the current Custom Colors section.
  • Reset All – resets all Theme Options settings. Use this carefully.
Important: Do not use Reset All unless you want to reset all theme options, not only the color settings.

If the new colors do not show immediately, clear:

  • WPResidence cache
  • Plugin cache
  • Server cache
  • CDN cache, if active
  • Browser cache

Custom Colors and Elementor pages

The Custom Colors options apply to WPResidence theme elements.

These colors are independent from Elementor colors and Elementor widget styling.

If a page is built with Elementor, the colors you see on that page may be controlled from Elementor instead of Theme Options. This depends on how the page, section, column, or widget was styled inside Elementor.

Important: Elementor style settings can override WPResidence Theme Options colors. For example, if a button, heading, section background, or widget color is set directly in Elementor, that Elementor color will usually apply instead of the color selected in Theme Options > Design > Custom Colors.

Use Theme Options > Design > Custom Colors for theme-controlled colors.

Use Elementor style options for colors added directly in Elementor pages, Elementor sections, Elementor columns, or Elementor widgets.

If a color does not change after updating Theme Options, check if that element has a color set directly in Elementor.

Leave a Reply