Widget Style Customization for Booking Widget (v3)

ID

Properties

Description

1️⃣

--app-border-radius

Controls the roundness of the main window, when not displayed full-screen. Can be set to a pixel value (greater values = more roundness) or 0 for square corners.

2️⃣

--app-margin

Pixel value that controls the minimum spacing around the main window, when not displayed full-screen.

3️⃣

--app-shadow

Controls the drop shadow behind the main window. Specified as a [CSS box-shadow].

4️⃣

--backdrop-color

Controls the background outside the main window. Specified as a [CSS color value]. Supports alpha.

ID

Properties

Description

1️⃣

--background-color

Background color of the main window, not including primary and secondary header areas.

2️⃣

--foreground-color-primary-rgba

Color of primary text. Specified as the components of the [CSS rgba() function].

3️⃣

--foreground-color-secondary-rgba

Color of secondary text. Specified as the components of the [CSS rgba() function].

4️⃣

--header-background-color

Background color of the primary (top) header area. Specified as a [CSS color value].

5️⃣

--header-font-text-transform

Transform an element's text to upper or lowercase. This property is applied to the application's main header bar and for the card header title.

6️⃣

--header-font-size

The font size to use for the application's main header bar and for the card header title.

6️⃣

--header-font-weight

The font weight to use for the application's main header bar and for the card header title.

6️⃣

--header-title-letter-spacing

The font letter spacing to use for the application's main header bar and for the card header title.

6️⃣

--header-title-line-height

The font line height to use for the application's main header bar and for the card header title.

7️⃣

--section-header-background-color

Background color of the secondary header area that displays the title of each section.

8️⃣

--separator-color

Color of the separator lines between the headers and panels. Specified as a [CSS color value].

9️⃣

--separator-width 

The size of the separator lines, specified in pixels.

🔟

--separator-style

Decoration style of the separator lines, specified as a [CSS border-style].

ID

Properties

Description

1️⃣

--font-family

The font to use throughout the application. Take note that web safe, web and custom fonts are allowed. Booxi can reference fonts hosted by a third party or customer/brand if required, however Booxi cannot host custom fonts. Custom fonts must be hosted by the brand and corresponding URLs must be provided.  If you are expecting to use a proprietary font or font without a free license, please inform your Booxi presentative.

2️⃣

--font-size

The primary font size.

--font-size-mobile

Alternate primary font size to use on mobile devices.

3️⃣

--font-size-small

Font size to use for smaller text (e.g. labels, subtitles).

ID

Properties

Description

1️⃣

--focus-outline-size

Controls the size of the outline indicating keyboard focus. This property’s value can be set to 0 to hide it, but such a setting will cause the widget to NO LONGER BE ADA-COMPLIANT.

--focus-color-background

Background color of an element when being focused on.

--focus-color-foreground

Foreground color of an element when being focused on.

ID

Properties

Description

1️⃣

--list-icon-size

The max width/height of images displayed in lists.

2️⃣

--list-node-padding

The horizontal and vertical spacing inside each list item.

3️⃣

--list-item-title-margin

The amount of space between the title of a list item and any text displayed below it.

4️⃣

--list-item-title-font-weight

The font weight of the title of a list item.

 --time-slot-text-align

Determines the alignment of the time slot text (i.e. time selection screen)

ID

Properties

Description

--selection-color-rgb

Color of the outline around selected items. Specified as the components of the [CSS rgba() function].

1️⃣

--selection-foreground-color

Color of the outline around a selected item.

Inherit from –selection-color-rgb.

2️⃣

--selection-background-color

Background color of a selected item. Inherit from –selection-color-rgb.

3️⃣

--selection-hover-background-color

Background color of a selected item while the cursor is hovering over it. 

Inherit from –selection-color-rgb.

4️⃣

--selection-outline-size 

Size of the outline around a selected item.

--selection-hover-font-weight

The font weight of a selected item when hovering over it.

--selection-hover-foreground-color

Foreground color of a selected item when hovering over it.

ID

Properties

Description

1️⃣

--error-color-rgb

Color used to indicate an incomplete or invalid entry when filling out a form (e.g. the label and outline of the first name field turns this color if you forget to fill it in). Specified as the components of the [CSS rgb function]

2️⃣

--input-border-color-rgb

Color of the border around text entry fields. Specified as the components of the [CSS rgb function]

3️⃣

--input-border-radius 

Controls the roundness of the border around text entry fields.

4️⃣

--input-focus-box-shadow

Controls the shadow/outline of focused text entry fields.

ID

Properties

Description

1️⃣

--button-border-radius

Controls the roundness of the button.

2️⃣

--button-padding

Amount of space between the button's text and its edges.

3️⃣

--button-background-color

The color of the button.

4️⃣

--button-box-shadow

Enables a shadow effect for the button itself.

5️⃣

--button-text-shadow

Enables a shadow effect to the button text. Specified as a [CSS text_shadow].

--button-letter-spacing

Changes the letter spacing of the button text.

6️⃣

--button-text-transform

Enables text transformation (e.g. uppercase) of the button text.

7️⃣

--button-font-family

Allows customizing the font used by the button.

8️⃣

--button-font-weight 

Changes whether the button text is displayed in bold.

9️⃣

--button-font-size 

Allows customizing the font size used by the button.

ID

Properties

Description

1️⃣

--survey-checkbox-radio-outline

Controls the outline displayed around a radio or checkbox buttons in the survey questions.

2️⃣

--survey-checkbox-radio-accent-color

The accent color of the radio and checkbox buttons in the survey questions. Not supported in all browsers.

ID

Properties

Description

--store-location-image-display

Allows hiding of the store location images in the location list.

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

box-shadow: 16px 16px 8px grey;

background-color: rgb(red, green, blue);

background-color: #RRGGBB;

background-color: hsl(hue, saturation, lightness);

background-color: rgba(red, green, blue, alpha);

background-color: hsla(hue, saturation, lightness, alpha);

background-color: rgb(255, 255, 255);

background-color: #FFFFFF;

background-color: hsl(100%, 100%, 100%);

background-color: rgba(255, 255, 255, 0.5);

background-color: hsla(100%, 100%, 100%, 0.5)

text-shadow: h-shadow v-shadow blur spread color

text-shadow: 2px 2px 5px #FF0000;

border-style: all

border-style: top right bottom left 

border-style: dotted;

border-style: double solid solid double;

dotted

dashed

solid

double

groove

ridge

inset

outset

none

mix