Important: Do not tick the “On save, give me the CSS code to save in child theme style.css?” option if you want the new colors to apply when saving Theme Options. This option should be ticked only if you plan to manually add the CSS code to style.css , as it will prevent Theme Options from saving styles.

Use these settings to change the look and feel of your Advanced Search Form when the search form is managed from Theme Options (not Search Form Builder for Elementor)

🔹 Background Color

• What it does: Sets the background color of the entire search form.

• How to use: Use the color picker to choose your color.

🔹 Background Opacity

• What it does: Controls the transparency of the background.

• Range: 0 (completely transparent) to 1 (fully opaque).

• Note: Only works when “Use Float Search Form?” is enabled.

🔹 Search Button Background Color

• What it does: Sets the default background color of the search button.

• How to use: Use the color picker to choose your color.

🔹 Search Button Hover Background Color

• What it does: Changes the button color when hovered.

• How to use: Select a color for the hover effect.

Additional Notes:

• These color settings apply to the search form when it is displayed over the hero media header in float mode, which is set from the Advanced Search & Display Settings.

• The purple color of the icons will match the Main Color you set in Design → Custom Color Settings → Main Color.

Custom CSS for Search Button Colors

If you want to customize the search button colors further, you can add custom CSS.

How to use: Add the following custom CSS to Design → Custom CSS or your child theme’s style.css (if activated):

#submit_booking_front, 
#advanced_submit_widget, 
#advanced_submit_2_mobile, 
#advanced_submit_2 {
    margin-top: 0px;
    padding: 13px 15px;
    color: #fff;
    background-color: #4d5567;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    margin-bottom: 0px;
    border-radius: 2px;
}

#submit_booking_front:hover, 
#advanced_submit_widget:hover, 
#advanced_submit_2_mobile:hover, 
#advanced_submit_2:hover {
    background-color: #576074;
}