All Collections
Developer Guide & Integrations
Customize Styling
How To: Moving CSS within <style> tags from HTML areas to the Public Stylesheets
How To: Moving CSS within <style> tags from HTML areas to the Public Stylesheets

Keep your custom styles from breaking once the use of <style> tags will is no longer supported within HTML areas

Lindsey Gagnon avatar
Written by Lindsey Gagnon
Updated over a week ago

The use of <style></style> tags to add CSS within HTML areas will soon no longer be supported within the Waitwhile interface. To prevent your custom styles from "breaking" on your Public Pages, all CSS currently held in these areas will need to be moved to either the Public Page Stylesheet or the Public Account Stylesheet.

CSS styles will need to be moved if contained in any of the following sections within Settings > Styling area:

  • Settings > Styling > Welcome Page

  • Settings > Styling > Check-in (and Confirmation)

  • Settings > Styling > Public waitlist

  • Settings > Styling > Waitlist confirmation page

  • Settings > Styling > Booking Page

  • Settings > Styling > Booking confirmation page

This is a fairly simple process, however, if you are currently using <style> tags in multiple of the above listed HTML areas, then we recommend utilizing some sort of text or code editor to compile and keep track of all of the CSS together before pasting it into the appropriate Stylesheet area.

If you only have CSS contained in a single HTML area, then you can copy/paste that CSS (excluding the <style></style> tags themselves) directly into either the Public Page Stylesheet or Public Account Stylesheet.

  • Public Page Stylesheet - for if you only want the styles to be affected for that single location

  • Public Account Stylesheet - for if you want the styles to be affected for ALL LOCATIONS within your account.

Steps:

  1. Highlight and copy all CSS (excluding the actual <style></style> tags) from the HTML area

  2. Paste CSS to a text editor (if you have styles in more than one HTML area)

  3. Repeat 1 & 2 for each HTML area that contains <style> tags with CSS.

  4. Remove any duplicate CSS (for if you had the same CSS reused in different HTML areas)

  5. Copy the compiled and edited CSS from your text editor (or directly from the HTML area if you were only using one) and Paste it into either the Public Page Stylesheet or the Public Account Stylesheet and Save.

  6. Go back to each HTML area and remove all <style></style> tags (and CSS within them) and then Save the changes for each section.

Did this answer your question?