Changing Your Look from One Colour

You do not need to open the page editor to give your website your brand. Choose one colour, add your logo and a tab icon, and Bizzly works out the rest: the lighter and darker shades, and the text colour that reads best on top. If some buttons were coloured by hand, the same sheet can let them follow your colour too.

Where to Find This

Open the Website screen and press Colour, logo and fonts, the one row under Appearance. The row shows a dot of your current colour and a line such as "Green, logo added", "Your own colour, no logo yet" or "No colour yet, no logo yet". It opens a sheet headed Colour, logo and fonts, with the line "Pick your colour and add your logo. Your website does not change until you press the button below."

You can also open it from the page itself: press Change the logo at the start of your header.

Changing the look is for people who are allowed to change the website. If that is not you, the row leads to the full page editor instead, where you can look but not save.

How to Change Your Look

1. 1

   Pick your colour

   Under Your colour, choose one of the six ready-made colours: Green, Blue, Orange, Purple, Pink or Teal. The name of the one you choose appears under the swatches. If your site already uses a different colour, it appears first as Your colour now.

2. 2

   Or use your own colour

   Press Your own colour and type a colour code in the Colour code box, such as #1d7a44. If the code is not valid the sheet says Use a colour code like #1d7a44. If the colour is very light, it warns you that "This colour is light, so words in it will be hard to read. A darker one reads better." It is only a warning, because it is your site.

3. 3

   Watch the sample

   A sample stays at the top of the sheet while the rest scrolls. It shows your logo (or your business name) with a Book now button, and a small card, A class near you, with a Book button, all dressed in the colour as you pick it. On a wide screen the page beside the sheet takes the colour too. Nothing is saved yet: you are only trying it.

4. 4

   Add your logo and tab icon (optional)

   Under Your logo, press Add a logo (or Change logo if you have one). Under Icon in the browser tab, press Add an icon (or Change icon). A square picture works best for the icon, which is the small picture on a browser tab and in bookmarks. Use a PNG, JPG, SVG, WebP or GIF file of up to 25MB. The picture you choose is shown before anything is sent, and Do not add it (or Keep the old logo and Keep the old icon) lets you change your mind. Take the icon off removes an icon you already have, and Keep the icon changes your mind about that.

5. 5

   Press the button in the foot of the sheet

   As soon as you choose something different, a foot appears at the bottom of the sheet with Cancel and the button that makes the change. It reads Use this colour when you have only changed the colour, and Use this look when you have also chosen a logo or an icon, or taken the icon off. Press it and your colour, logo and icon are saved at once, the sheet closes and a message says Look changed, with an Undo button. Until you change something the foot is not there, and the top of the sheet says Saved.

What One Colour Changes

Your colour becomes your brand colour for buttons, links and highlights across the whole website. From it, Bizzly works out:

• a darker shade for hovering and pressing buttons
• a pale tint for selected and highlighted areas, and a paler one for soft backgrounds and borders
• a deep shade for secondary badges and surfaces
• the text colour that sits on your colour, white or dark, whichever is easier to read
• a matching brand gradient

Everything else is left as it was: your backgrounds, text colours, fonts, spacing, corners and shadows.

Buttons With a Colour of Their Own

A button follows your colour unless someone coloured it by hand in the page editor. Once a button has a background, text or border colour of its own, it ignores your site colour. When your website has pages, the sheet checks them as it opens, and says Checking your pages for buttons with a colour of their own while it does.

If it finds any, a card shows how many, for example 3 buttons use a colour of their own (or 1 button uses a colour of its own), with the line "They were coloured by hand in the page editor, so they ignore your colour." (for one button, "It was coloured by hand in the page editor, so it ignores your colour.") Each button has a row:

• the title is the part of the page it stands in: Header, Footer, Welcome, Classes, Prices, Times, Booking, Shop, Reviews, Contact form, Map or Call to action, or the page's name when the part has no name
• under it are the words on the button in quotation marks, or "A button with no words", and for a named part, "On" and the page's name
• Show me opens the full page editor with that button selected. It is not shown on a phone

Press Use my colour on them under the list and those buttons follow your colour. It is made at once, with no foot to press. Only the colours of those buttons change: their words, size and link stay as they are, and a button added since is left alone. A message says Look changed, with an Undo button, and the sheet stays open so you can carry on. The card then reads Every button follows your colour. If a page cannot be saved, Bizzly puts back any page it had already changed, so nothing is left half done.

If some pages could not be checked, a note says so, for example "1 page could not be checked, so any button on it is not listed." If the check itself fails, the card says "Your buttons could not be checked. Please try again." with a Try again button.

One Logo, Everywhere

The logo you add here is your business's logo. It shows at the top of your website, in the emails you send, and when your website is shared. When you add or change it, Bizzly also puts it in your website's header (and in the footer if the footer already shows a logo), so it appears at the top of every page at once.

If your website has no shared header to put it in, the logo is still used for your emails and shares, and the message tells you: Look changed. Your website has no shared header and footer, so no header was changed. (or, if there is a layout but no header, Look changed. Your website has no header to put the logo in, so no header was changed.). These messages stay on screen until you dismiss them.

Fonts and Everything Else

At the foot of the sheet a Fonts row names the font your site uses now and says "Fonts and everything else about your look are changed in the full page editor." Press it to open the full page editor, which needs a larger screen. On a phone the row says Best on a larger screen instead of leading anywhere. See Customising Styles and Themes.

Taking It Back

Press Undo on the message, or use the Undo a change row under Tools on the Website screen. Undo puts back only what the change made: the colours, the logo and the tab icon, or, after Use my colour on them, the colours those buttons had. Anything else you have changed in the editor since is left alone. See How Changes Work.