You can add CSS to the Public Page Stylesheet** to alter the look and feel of your public pages. Below we will highlight a few basic style changes that can be made using CSS, such as altering the background color, button colors, and changing the font style using a Google Font.
Page Background Color
Replace #000000 in the below examples with your desired color hex code.
For all Public Pages:
.mainpp, .container-ww, .public-header {
background-color: #000000 !important;
}For Welcome Page only:
.mainpp {
background-color: #000000 !important;
}
Button Colors
Replace #000000 in the below examples with your desired color hex code.
background-colorwill be the actual button colorcolorwill change the text/font color for the button
All buttons:
.signup-btn, .google-btn, .submit-btn {
background-color: #000000 !important;
color: #000000 !important;
}Join waitlist button:
.signup-btn {
background-color: #000000 !important;
color: #000000 !important;
}Booking button:
.google-btn {
background-color: #000000 !important;
color: #000000 !important;
}Confirm button:
.submit-btn {
background-color: #000000 !important;
color: #000000 !important;
}
Text and Font Style
Google Fonts has over a thousand different free and publicly available fonts to choose from that can be used on your Waitwhile Public Pages. To use a Google font, simply search and select the Font Family. We recommend selecting whichever font weight and style is your basic Medium (usually labeled as 500).
Once you've selected your fonts, under the "Use on the web" section:
Select the "@import" option
Copy the bit of code that is in between <style></style>
Paste it to the top of your Public Page Stylesheet
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap');Below the above @import code, copy/paste the following:
body {
}Then go back to Google Fonts and copy what is listed under "CSS rules to specify families," and paste it between the { } brackets that we added to the Public Page Stylesheet. For the example we're using, it would look like this:
body {
font-family: 'Open Sans', sans-serif;
}
Don't forget to hit "Save." All together, it should like like this in your Public Page Stylesheet:
** Public Page Stylesheet is only available on paid plans