Your new BoothBook installation comes with the default theme enabled, which is the same for all users.


Using the options available to you under the Configuration (cog) icon on the tool bar on the left, Global Settings> Branding, you can completely customise the look and feel of your BoothBook, allowing you to match the them to the style of your main business website.

 

Add a Business Logo

Adding your logo to your BoothBook is simple, just click "choose file" to select an image from your computer, and click upload to upload the file to the server. You're able to upload a png, jpg or jpeg file.


Design Using the Theme Builder

  • Under Theme Type, choose Theme Builder (By choosing Theme Builder, this will override any settings from the Custom CSS option).
  • Enter your chosen colours as Hex colour code format or click in the colour field and choose a colour from the pop-up.
  • Your chosen colours will be reflected in the Landing Page Example Preview, so you can choose what works best and what reflects your company's brand.
  • 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 your changes immediately.

 

Design Your BoothBook by Adding a Custom CSS file 

  • 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.


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.

If you are not a website designer, you should contact the web designer who designed your website, and ask them to create a CSS file you. 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...

1. Create a basic textfile on your computer. On windows, right click on your desktop, hover over "New", and select "Text Document".

2. 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.

3. Select and copy the example below, paste into your new CSS file and save.

body {
  background: #d7d7d7;
}

#headerbar {
  background: #f45050;
  border-bottom: 4px solid #ffffff;
}


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

If you don't wish to try this yourself, and don't have a web designer available, you can contact us to do it for you for free!