Appearance
By default everything follows your theme: its font for the text and the headings, its heading sizes. Set a font or sizes here only to override the theme for the VEFmultiBooking widgets.
- Text color — titles, labels and descriptions of the block. Empty = the text color of the surrounding section; set it when the block sits on a background that changes from page to page.
- Price color — the prices on the offers and the total. Empty = the accent color; set it when the accent is hard to read on the background.
- Success color — the round check mark of the booking confirmation. Empty = green. The symbol turns light or dark by itself.
- Error color — the round warning mark of the messages and the fields to correct. Empty = red. The symbol turns light or dark by itself.
- Accent color — selected choices, progress steps, calendar days and highlights — and the buttons, unless a button color is set.
- Button color — the background of the buttons, separate from the accent. Empty = the accent. The text turns light or dark by itself to stay readable.
- Button text color — empty = chosen automatically for the button color.
- Button color on hover — empty = the button gets slightly brighter.
- Button shadow — off by default; applies to every VEFmultiBooking button, color and transparency included.
The settings of a block or widget in your page builder (colors, spacing, border, width…) still apply on top of these global settings.
Shape, shadows and layout
These settings are the default look of the whole site. The same settings exist on each block in your page builder (Gutenberg, Divi 5, Elementor), where the result shows at once. A block setting left on "Site default" follows what you chose here; any other choice applies to that block only.
- Corner roundness — square to very rounded, or pill-shaped fields and buttons: block, cards, fields and buttons together.
- Spacing — compact, normal or spacious: the space inside the block and between its parts.
- Title alignment — left, centered or right: the block title, the step titles and the offer names together. Left follows your theme. The same choice exists on each block in the page builder.
- Field style — outlined, filled or underlined form fields.
- Shadows — a soft, medium or strong shadow for the block, the cards and the fields, in the color you choose (with its opacity). The button shadow stays a site-wide setting, above.
- Offers shown — which offers a booking module presents: every published offer by default, or only one category (set on each offer, in the Offers screen: the offers added to it later appear by themselves), and you can untick single offers in the list.
- Adding another offer — what visitors are offered when they use "Add another offer" in the cart: every published offer (the default), only the offers this module shows, or a selection you tick. A module that shows a single offer therefore lets the visitor add a different one.
- Offers layout and columns — the offers of the booking module as cards or as a list; the wanted number of columns (the cards still wrap when the block is narrow).
- Dates and times layout — side by side or one per line.
- Progress steps — show or hide the numbered steps above the booking form.
- Descriptions — where the description of the offer and the one of the resource are shown in the booking module: under the offer title (the default), above or below the buttons of the booking step, or hidden.
- Prices on the offers — the price shown on each offer before the visitor chooses. When the price depends on what the visitor enters (persons, categories), "From" shows the lowest one, "Range" the lowest and the highest, "Every price" one line for each case; or no price at all.
Fonts, margins, padding, borders and shadows of a block are the usual settings of your page builder: in Gutenberg the Typography, Dimensions, Border and Shadow panels; in Divi 5 the Design tab (Font, Spacing, Border, Box Shadow); in Elementor the Style tab (Container and Titles sections, where you can also set the font, color and margin of the titles only).
Every setting is also a CSS variable (–vefmb-accent, –vefmb-widget-radius, –vefmb-density, –vefmb-card-min, –vefmb-slot-min, –vefmb-field-height, –vefmb-shadow-soft, –vefmb-shadow-medium, –vefmb-shadow-strong…). Set one in your theme's custom CSS to go further than the settings allow. The blocks adapt to their own width, so a block in a narrow column behaves like on a phone.