Step 3 - Widget Styling
To learn how to style your new reservation widget, please follow the steps below. Alternatively, please click on one of the headers below to jump to the relevant section:
Button Styling
- 1
- If you would like to edit the background colour for all buttons on your reservation widget, please select a new ' Background Colour'.
- 2
- To edit the text colour for all buttons, please select a ' Font Colour'.
- 3
- To adjust and set the rounding for all the buttons and form elements in the reservation widget, please select a pixel figure from the dropdown ' Rounding'.
2 - Reservation Form Styling
The reservation form section is the part of the reservation widget where the guest will be making their reservation choices and entering their details. It is the main part of the view.
- 4
- Click on ' Background Colour' to set the background colour for the reservation form section of the reservation widget.
- 5
- To edit the font colour for for the text on the reservation form section of the reservation widget, please select a ' Font Colour'.
- 6
- Click on ' Font' to edit the font for the text on the reservation form section of the reservation widget.
- 7
- To alter the font size, please click and choose a size from the ' Font Size' dropdown.
- 8
- To set an image background for the reservation form section, please click on ' Select Image' under the ' Background Image' header, and select an image.
Please Note: to learn how to upload an image to TablePath, please follow the instructions in this help article:
- 9
- To alter the background image size for the reservation form section, click and select an option from ' Background Size'.
- 10
- If you would like the background image to repeat, please choose an option from ' Repeat Background'.
3 - Reservation Navigation Styling
The reservation navigation section is the part of the reservation widget where the guest can view details on what they are booking. On a desktop/laptop, this section will be on the right. On a mobile, this section will be at the bottom of the page.
- 11
- Click on ' Background Colour' to set the background colour for the reservation navigation section of the reservation widget.
- 12
- To edit the font colour for for the text on the reservation navigation section of the reservation widget, please select a ' Font Colour'.
- 13
- Click on ' Font' to edit the font for the text on the reservation navigation section of the reservation widget.
- 14
- To alter the font size, please click and choose a size from the ' Font Size' dropdown.
- 15
- To set an image background for the reservation navigation section, please click on ' Select Image' under the ' Background Image' header, and select an image.
Please Note: to learn how to upload an image to TablePath, please follow the instructions in this help article:
- 16
- To alter the background image size for the reservation navigation section, click and select an option from ' Background Size'.
- 17
- If you would like the background image to repeat, please choose an option from ' Repeat Background'.
Custom CSS
- 18
- To set your own custom CSS, please enter this into the ' Custom CSS' box.
NEXT STEP
Please head back to the previous help article to continue the reservation widget setup: