Example CSS

Styling the search to fit your theme

Every theme is different and therefore we are creating the Availability Search with flexibility in mind.

  • The search will try to inherit as much of your theme’s styling as possible.
  • The Search will use the default WooCommerce stying for displaying the products. (Themes may override this with their own.)

Sometimes you’ll need to create your own CSS to match your theme perfectly. Below you’ll find a simple example of using the CSS selectors. You can then create your own style by putting the custom CSS into your theme or the WordPress customizer.

Copy and paste only examples that you need.

/* * Search & Fields */ /* Center the Search */ .aswb-wrapper form.aswb-search { text-align: center; } /* Stack Search Fields */ .aswb-wrapper form.aswb-search { text-align: left; display: grid; } /* Stack Search Lables */ .aswb-label { display: block; } /* Change the font and background color of the date input */ form.aswb-search input { background: grey; color: white; } /* Change the submit button color and background*/ button.aswb-submit { background: cadetblue; color: white; } /* * Date Picker */ /* Changes font and background color of the apply button in the date picker*/ button.aswb-datepicker-buttons.aswb-apply-button { background: grey; color: white; } /* Changes font and background color of the cancel button in the date picker*/ button.aswb-datepicker-buttons.aswb-cancel-button { background: white; color:grey; } /* Increase size and padding on datepicker buttons*/ button.aswb-datepicker-buttons { padding: 20px!important; font-size: 14px!important; } /* Selected date color on the datepicker range */ .daterangepicker .calendar-table tbody tr td.active, .daterangepicker .daterangepicker .calendar-table tbody tr td.active:hover { background-color: #15b3b0; border-color: transparent; color: #fff; } /* Change the highlighted color on the datepicker range */ .daterangepicker .calendar-table tbody tr td.in-range { background-color: #15b3b021; border-color: transparent; color: #000; } /* * The rest of the date picker uses your themes styling. */ /* Results: Adds light grey box with adding around the bookable product results*/ div.aswb-results { margin-top: 35px; background: #f9f9f9; padding: 30px 60px; }
Was this page helpful?