This help explains how to manage the Advanced Search colors in WPRentals.
The settings from WPRentals Options > Search > Advanced Search Colors apply to the default theme-managed search forms. If the search form is created with the WPRentals Search Form Builder for Elementor, the colors are managed from the Elementor widget style settings instead.
Where to Find Advanced Search Colors
Go to:
WPRentals Options > Search > Advanced Search Colors
Advanced Search Color Options
From this section, you can manage the main color options for the default Advanced Search form.
Advanced Search Background Color
This option changes the background color of the Advanced Search form.
Advanced Search Background Color Opacity
This option controls the opacity of the Advanced Search background color.
- Use a value between 0 and 1.
- 0 means the background is invisible.
- 1 means the background is fully visible.
- This option applies only when the search form position option Use Float Search Form? is set to Yes.
Advanced Search Button Background Color
This option changes the default background color of the search button.
Advanced Search Button Hover Background Color
This option changes the background color of the search button when visitors hover over it.
Which Search Forms Use These Settings
The Advanced Search Colors settings apply to the default theme-managed search forms.
These can include:
- Hero Media Search shown over the hero media header
- Advanced Search Shortcode added inside page content
- Search Widget added in widget areas
- Default theme search forms managed from WPRentals Theme Options
Search Form Builder for Elementor
If your search form is created with the WPRentals Search Form Builder for Elementor, the button colors are not controlled from:
WPRentals Options > Search > Advanced Search Colors
To change the colors for an Elementor search form, edit the page with Elementor, select the search form widget, and open the widget Style tab.
From the Elementor widget style settings, you can manage options such as:
- Form spacing
- Label text color
- Typography
- Background color
- Field style
- Button style
- Button text color
- Button background color
- Button hover color
- Padding, margin, and border radius
Help – https://help.wprentals.org/article/wprentals-search-form-builder-for-elementor/
Default Theme Colors That Can Influence the Search Form
Some design details can also be influenced by the general WPRentals color settings.
These are managed from:
WPRentals Options > Design > Custom Colors Settings
For example, the theme Main Color, Hover Button Color, general font colors, link colors, and other default design colors may affect default theme elements, including parts of the search form design.
Theme options – Change Main Color and Custom Colors
Use Custom CSS for More Control
If you need a more specific design than the built-in color options allow, you can add custom CSS in:
WPRentals Options > Design > Custom CSS
You can also add custom CSS in your child theme style.css file.
Example CSS for the default search button:
#submit_booking_front,
#advanced_submit_widget,
#advanced_submit_2_mobile,
#advanced_submit_2 {
color: #ffffff;
background-color: #4d5567;
font-size: 16px;
font-weight: 600;
width: 100%;
border-radius: 2px;
padding: 13px 15px;
margin-top: 0;
margin-bottom: 0;
}
#submit_booking_front:hover,
#advanced_submit_widget:hover,
#advanced_submit_2_mobile:hover,
#advanced_submit_2:hover {
background-color: #576074;
}
Important Notes
- The settings in this article are managed from WPRentals Options > Search > Advanced Search Colors.
- These settings apply to default theme-managed search forms.
- The background opacity option applies only when Use Float Search Form? is set to Yes.
- The button background color controls the normal button color.
- The button hover background color controls the button color on hover.
- General theme colors from WPRentals Options > Design > Custom Colors Settings may also influence default theme elements.
- Elementor search forms are styled from the Elementor widget settings, not from Advanced Search Colors.
- If you do not see the color changes immediately, clear WPRentals cache, plugin cache, server cache, or CDN cache, then test again in a private/incognito browser window.
- If you use a child theme, CSS added in the child theme style.css file will remain safe after theme updates.