Skip to main content

Match the look of your existing website

Make your Gizzago pages feel like part of the website families already know.

Who can do this: admins only.

If your library already has a website, families should not feel they have gone somewhere else when they click Browse toys. You do not need a designer: you take a few things from your website and set them in Settings, Public site.

Before you start​

Collect these from your website:

  • Colours. The main colour of headings, links and buttons; one accent colour; and the page background. You need the colour codes, which look like #2F5D50. Ask whoever built or looks after your website, or check your brand guide. If nobody knows, a free "colour picker" add-on for your browser can read the colour of anything on a page.
  • Fonts. The names of the heading font and the text font.
  • Pictures. Your logo (ideally a wide version on a clear background) and a square version for the browser icon.
  • Your home page. The order its sections come in, and its headline and main buttons.

Steps​

  1. Choose Settings in the sidebar, then Public site, then Colours.
  2. Type your website's main colour into Brand colour, its accent into Highlight colour, and its page colour into Background tint.
  3. Check the line under each colour. The brand colour needs at least 4.5 to 1 and the highlight at least 3 to 1, so text stays readable.
  4. If a colour is refused, look on your website for a darker colour in the same family: the edge or shadow of a button, or the colour it turns when you point at it. Try that first. If nothing from your website passes, press Use the nearest shade that passes.
  5. Press Look and feel, then Fonts. Choose your website's fonts if they are in the lists. If not, choose the closest: a rounded font such as Fredoka, Baloo or Nunito for a playful website, a serif such as Lora or Merriweather for a traditional one, or Source Sans or Figtree for a plain one.
  6. Open Icons and shape. Pick the icon set that looks most like your website's icons. Choose Round corners if your website has rounded boxes and pill-shaped buttons, or Crisp if it is square.
  7. Open Logo and browser icon and add your logo and browser icon (see Logo, browser icon and welcome photo).
  8. Under Home page sections, switch on the sections that match your website and move them into the same order. Use your website's headline and buttons in Welcome.
  9. Add Footer links back to your website's main pages, such as donations and policies.
  10. Check the preview at Phone width and in Dark, then press Publish changes.
What you'll see

"Your new look is live". Your Gizzago pages now share your website's colours, fonts and logo. Under Colours, the summary reads "Your own colours".

Bright colours​

Bright oranges, yellows and pale greens often fail the checks, because white text on them is hard to read. That is why it is better to use a deeper shade from your website than a made-up one. Look at the basket count in the preview: it sits in white on your highlight colour, and should be easy to read.