How to change your website’s theme, colours and motion

Appearance (the owner’s menu) decides how the public website looks. Your pages, services, prices, bookings and settings stay the same whatever you choose here: a theme changes the look, never the content.

Video tutorial #

How to change your salon website’s theme in Salon Booking OS by OsDot™ 1.0.0

Watch on YouTube

The website shows the theme and the look saved here to every visitor. A preview shows only to you, until you activate it.

Themes #

Appearance → Themes shows the three themes, each with a small sample in Light and in Dark:

• Linen — editorial, calm and light-first: warm paper, ink type, a deep sage and a clay accent.
• Onyx — premium and dark-first: near-black, champagne gold, letter-spaced capitals, square edges and hairline rules.
• Bloom — modern, bold and colourful: blush whites, raspberry and violet, rounded shapes and confident heavy type.

The theme in use is marked Current. For any other theme:

• Preview opens your website in that theme for you alone. A bar at the top says that only you can see it and that visitors still see the saved appearance; it offers Activate, Back to Appearance and End the preview.
• Activate saves the theme for every visitor. Because it changes the whole website, the site may ask you to confirm your password first.

Under When you switch theme you choose what happens to your own colours and fonts: Keep my current brand colours and fonts (the default; a colour that does not read well on the new theme follows the theme instead, and you are told which) or Use the new theme’s recommended colours and fonts. The colour mode, the Light/Dark switch, the motion level and the layout options stay as they are when you switch.

Colours and mode #

Appearance → Colours and mode:

• Colour mode — Follow the visitor’s device (recommended), The theme’s default (Dark for Onyx, Light for Linen and Bloom), Always Light or Always Dark.
• Show the Light/Dark switch to visitors — a button in the website’s header; a visitor’s choice is kept in their own browser only.
• Brand colours in Light and Brand colours in Dark — a Main colour (buttons, links) and an Accent colour (small highlights) for each mode, as six-digit colours such as #6E5020. Leave a field empty to use the theme’s own colour, which the hint under it names.

Choose Save colours and mode, or Preview on the website to see the change first.

Typography #

Appearance → Typography sets the fonts for Headings and for Text: The theme’s choice, or one of Inter, Montserrat, Poppins, Sorts Mill Goudy and Marcellus SC, each shown in a sample line. The fonts ship with the product; nothing is loaded from another website. Save typography or Preview on the website.

Layout and motion #

Appearance → Layout and motion:

• Content width — Standard, or Wide (more room on large screens).
• Header — Scrolls away with the page, or Stays at the top while visitors scroll.
• Motion — how much moves on the website:
  • Off — nothing moves.
  • Subtle (recommended) — sections ease in as they appear, and the theme’s signature moment plays once on the homepage.
  • Cinematic — the fuller version of the theme’s signature moment; still never more than one per page.

Visitors who ask their device for reduced motion see no movement: the homepage slideshow then changes slides with a gentle fade only. Save layout and motion or Preview on the website.

Images #

Appearance → Images holds the pictures the theme places on the homepage: the Homepage hero (used when a slide of the slideshow has no picture of its own) and the three pictures of Recent work (shown only once you add that section under Website → Homepage). Each slot says how the current theme shows it — its proportion and the smallest width to use.

For each slot choose a picture from the media library, or upload a new website image (PNG, JPEG or WebP) with its description; the Alternative text is required with a picture (what it shows, for people who cannot see it). Four focal point fields (from the left and from the top, for wide screens and for phones, in percent) keep the important part of the picture in view when the theme crops it. Choose No image to use the theme’s own picture again.

Your pictures show in every theme. A slot without a picture of yours uses the theme’s own picture — an illustration of a salon scene, never your salon, your clients or your staff — or a plain background where the theme has none. Recent work has no sample pictures: show your salon’s own work only. Save images.

Who can change the appearance #

The owner. A role can be given Change the website theme, appearance, motion level and image slots under People → Roles and permissions (see Roles and permissions).