Design Your BoothBook Using a Custom Style Sheet
Further tailor the way your BoothBook system looks
BoothBook
Last Update 1 年前
Use the Theme Builder to update the look of your BoothBook system.
Alternatively, using a custom style sheet allows users to apply their own custom css to both their customer and admin facing pages in their BoothBook system.
NOTE: Updating your custom style sheet does require a good knowledge of HTML and CSS. Changes to it could greatly affect the appearance and customer experience of the software. If you are not a website designer, you can hire one to make these changes for you - perhaps try a website such as peopleperhour.com to find one suitable.
Design Your BoothBook by Adding a Custom CSS file
- Go to Top User Menu > Settings > Branding
- Under Theme Type, choose Custom CSS. (By choosing Custom CSS, this will override any settings from the Theme Builder option).
- Choose and add a css file from your device and click upload (find more information about CSS below)
- Click Save Configuration
- Once saved, view your landing page (click BoothBook in the top left of your admin menu bar), a client portal, or any widgets that are embedded on your website and you will see the effects of your custom css file immediately.
More Information About CSS
CSS stands for "Cascading Style Sheet". CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers.
By uploading a CSS file to this field, you are able to completely change the look and feel of your BoothBook.
However, if you only want to make small changes to colours, you can easily create your own CSS file by following the instructions below.
To get started, you will need to...
- Create a basic textfile on your computer. On windows, right click on your desktop, hover over "New", and select "Text Document".
- Rename the new text file, so that extension is .css instead of .txt , if your computer asks you if you wish to change the extension, please confirm.
- Select and copy the example below, paste into your new CSS file and save.
4. Now go back to your settings page, click "choose file" to select the CSS file, press "upload", and then click "Save" at the bottom of the page.
5. Head back to the home page, and you will see the new changes. It may not look too pretty, but you have now taken the first step towards theming your website.
For a full tutorial on CSS, and what is possible with a single CSS file, we recommend you use this tutorial... https://www.w3schools.com/css/css_intro.asp