Home / / Theme options – Change Main Color and Custom Colors

Theme options – Change Main Color and Custom Colors

13467 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

This help explains the main color settings available in WPRentals and where each group of color options is managed.

Most color options are managed from:

WPRentals Theme Options > Design

From this section, you can manage general website colors, sidebar widget colors, card/unit colors, calendar colors, fonts, and custom CSS.

Important: These Theme Options colors apply to the default WPRentals theme elements. If you use Elementor widgets, Elementor sections, or WPRentals Studio templates, the colors set directly in Elementor may override the Theme Options colors.

CONTENT

Custom Colors Settings

Go to:

WPRentals Theme Options > Design > Custom Colors Settings

This section controls the main theme colors used across the default WPRentals design.

The available options are:

  • Main Color – the main accent color used by the theme for important buttons, highlights, and selected theme elements.
  • Background Color – the general site background color.
  • Breadcrumbs, Meta and Listing Info Font Color – the color used for breadcrumbs, meta text, and listing information text.
  • Font Color – the general text color used by default theme elements.
  • Link Color – the default color used for links.
  • Headings Color – the color used for headings such as H1, H2, H3, H4, H5, and H6.
  • Hover Button Color – the color used when hovering over theme buttons.
Note: The theme does not include color controls for every small detail because that would make Theme Options overcrowded. Smaller design details can be changed with custom CSS.

CSS code for child theme

In Custom Colors Settings, you will also see:

On save, give me the CSS code to save in child theme style.css?

Recommended setting:

Leave this option unchecked if you want Theme Options to save and apply the selected colors automatically.

Important: Do not tick this option unless you want to manually copy the generated CSS code and paste it into the child theme style.css file. If this option is enabled, the colors will not be applied automatically from Theme Options.

The field Css Code for Child Theme shows the CSS generated by the selected color options. Use it only if you choose to manage the generated CSS manually in the child theme.

Go to:

WPRentals Theme Options > Design > Sidebar Widget Colors

This section controls the colors for sidebar widgets.

The available options are:

  • Sidebar Widget Background Color (for “boxed” widgets) – the background color used for boxed sidebar widgets.
  • Sidebar Heading Color – the color used for sidebar widget headings.
  • Sidebar Font Color – the color used for text inside sidebar widgets.
Note: These options apply to default theme sidebar widgets. If you add Elementor widgets or custom widgets with their own style settings, those styles may override the theme sidebar colors.

Property, Blog and Owner Card Unit Colors

Go to:

WPRentals Theme Options > Design > Property, Blog and Owner Card Unit Colors

This section controls colors used by default WPRentals card/unit designs.

The available options are:

  • Boxed Content Background Color – the background color used inside boxed property, blog, and owner card units.
  • Border Color – the border color used around boxed card/unit content.
Note: These settings apply to default WPRentals card/unit designs. If a card is created or styled with Elementor, Elementor widget styles may override these colors.

Calendar Colors

Go to:

WPRentals Theme Options > Design > Calendar Colors

This section controls the colors used in the listing availability calendar.

The available options are:

  • Calendar – Background Color for Fully Booked day – the background color applied to calendar days marked as booked.
  • Calendar – Font Color for Fully Booked Day – the text color used on days marked as fully booked.
  • Calendar – External bookings background color – the background color used for bookings imported via iCal, external bookings.
Important: These colors apply to the booking/availability calendar display. They do not change the booking status itself. They only control how booked and externally imported days are shown visually.

Header Menu Colors

Header menu colors are not managed from the Design section. They are managed from:

WPRentals Theme Options > Header > Header Menu Colors

Use this section to change colors for the default WPRentals header menu.

Common options include:

  • Header Background Color – changes the default header background color.
  • Header Border Bottom Color – changes the header bottom border color.
  • Top Menu Font Color – changes the top menu text color.
  • Top Menu Hover Font Color – changes the top menu text color on hover.
  • Top Menu Hover Background Color – changes the menu background color on hover, depending on the selected hover style.
  • Top Menu Hover Type – controls the hover effect used for menu items.
  • Active Menu Font Color – changes the color of the active/current menu item.
  • Transparent Header – Top Menu Font Color – changes the menu text color when the transparent header is used.
  • Transparent Header – Top Menu Hover Font Color – changes the hover text color when the transparent header is used.
  • Sticky Menu Font Color – changes the menu text color when the sticky header is active.
  • Menu Item Color – changes individual menu item text color.
  • Menu Item Background Color – changes individual menu item background color.
  • Menu Item Hover Font Color – changes menu item text color on hover.
Note: These options apply to the default WPRentals header. If you use a custom header created with WPRentals Studio and Elementor, style the header directly from Elementor.

Top Bar Colors

Top Bar colors are managed from:

WPRentals Theme Options > Header > Top Bar Colors

These options control the colors for the Top Bar / Header Widget Menu.

  • Top Bar Background Color (Header Widget Menu) – changes the background color of the top bar.
  • Top Bar Font Color (Header Widget Menu) – changes the font color used in the top bar.

Mobile Menu Colors

Mobile Menu colors are managed from:

WPRentals Theme Options > Header > Mobile Menu Colors

These options control the colors for the mobile header and mobile menu.

  • Mobile Header Background Color – changes the mobile header background color.
  • Mobile Header Icon Color – changes the icon color in the mobile header.
  • Mobile Menu Font Color – changes the mobile menu item text color.
  • Mobile Menu Hover Font Color – changes mobile menu text color on hover.
  • Mobile Menu Item Hover Background Color – changes the background color of mobile menu items on hover.
  • Mobile Menu Background Color – changes the mobile menu background color.
  • Mobile Menu Item Border Color – changes the border color between mobile menu items.

Footer colors are managed from:

WPRentals Theme Options > Footer > Footer Colors

These options control the default footer colors.

  • Footer Background Color – changes the footer background color.
  • Footer Font Color – changes the footer text color.
  • Footer Widget Title Font Color – changes the footer widget title color.
  • Footer Copyright Font Color – changes the copyright text color.
  • Footer Copyright Background Color – changes the copyright area background color.

Elementor colors and Theme Options colors

Theme Options colors and Elementor colors are separate.

If a page, section, widget, header, footer, listing template, or Studio template is edited with Elementor, the colors set inside Elementor can override the colors selected in Theme Options.

For example, if you set a button color in Theme Options > Design > Custom Colors Settings, but the Elementor widget has its own button color set in the Style tab, the Elementor color may be the one shown on the front end.

Important: If a color does not change after saving Theme Options, check whether that element is styled from Elementor, a Studio template, custom CSS, or a plugin widget.

After changing colors

  • Click Save Changes in Theme Options.
  • Clear WPRentals cache, if enabled.
  • Clear any cache plugin or server cache.
  • Refresh the page in a private/incognito browser window.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.