- For organizations
- Owners and co-leaders
- Website plan
Your site's look: theme, colors, logo and details
Three tabs in Website set how your whole site looks and what it says on every page: Theme for the design, colors and fonts, Logo & icon for your logo and the browser icon, and Details for the announcement bar, contact details, social links and footer line. You need the Website plan and School settings set to Edit settings, which Owners and Co-leaders have.
These tabs save straight to your live site
Unlike the on-page editor, these three tabs don't use a draft. Nothing goes live until you save, and once you save, families see the change without you publishing anything.
- As soon as you change something, a bar appears at the bottom: "Unsaved changes · live on your site within 5 minutes of saving", with Discard and the tab's save button (Save theme, Save logo and icon or Save details).
- After you save, the notice says when the change will show, for example "Theme saved. Live on your site within a minute or two."
In the on-page editor, Theme in the left rail opens the Theme tab, and Site settings opens Details. See Edit your website on the page.
Choose a look
A look is the design every page of your site is drawn in. Your words, photos and classes stay the same in every look, so you can switch whenever you like.
- Open Website, then Theme (1).
- Under Theme, choose a look and select Use this look (2). The look you have now says Your look.
- Select Save theme (3).
There are eleven looks. Each card shows what it's good for.
| Look | What it's like |
|---|---|
| Sunny | Playful, pastel and warm, with handwritten touches |
| Bright | Bold color blocks, cut-out photos and doodles |
| Editorial | A calm magazine spread: serif italics, photo mosaic, deep green |
| Lavender | Soft lilac, polaroids and handwritten words |
| Classical | A school prospectus: crest, gold rules, serif type |
| Wildwood | Earthy and calm: arches, field-journal photos and line-drawn leaves |
| Studio | Loud poster type, lime and blue |
| Modern | Crisp and school-like: a clean grid, one teal accent |
| Playroom | Chunky type, bright shapes and wavy edges, for little ones |
| Coastal | Sand and sea: a beach-photo hero, wave edges and deep-water quotes |
| Original (the Famlo design) | The Famlo design every site started with |
Preview on a look's card opens demo.famlo.co, a made-up sample site, drawn in that look, in a new tab. To see your own site in a look before you switch, use Full preview in website setup.
Changing the look resets your colors and fonts. As the tab says: "Choosing another look starts its own colors and fonts." If you've chosen colors of your own, you'll also see Keep my colors when I change the look (or Keep my colors (from my logo) when I change the look). Tick it before you save to carry your colors over. If they're hard to read in the new look, the notice after saving tells you, and you can pick the new look's colors instead.
Colors and fonts
Under Colors and fonts on the Theme tab, pick the colors and type for every page. The tab's advice: "Keep the text color dark against the background so it stays easy to read."
Colors. Choose one option:
- From your logo: up to three sets read from your site logo, called "Your logo's colors", "Your logo, colors swapped" and "Your logo, softer". They appear once you've saved a logo on Logo & icon.
- One of the look's named color sets, such as Lagoon or Berry on Bright.
- The look's own colors, named after it (for example Sunny’s own colors): the colors the look was made with.
- Custom: my own colors, below: set Background, Text, Accent, Soft panels and, on every look except Original, Second accent.
Original has no named color sets, so on Original you set the colors straight in those fields (or pick a set from your logo).
Colors from your logo are only suggestions. Nothing changes until you pick a set and select Save theme. Famlo adjusts them to stay readable in your look and leaves out any set that wouldn't be. If no sets appear, the tab says why, for example "Your logo is black and white, so pick one of the look's colors below."
If your accent color is very light or very dark, Famlo shades buttons and colored bands slightly so their words stay easy to read, and the tab says so: "Your accent is light, so buttons and colored bands use a slightly darker shade so the words stay easy to read."
Fonts. Every look except Original has one Font pairing list of type pairs made for that look. Original has Headings font and Body font instead.
There's no way to add your own code or style rules. The look does the design, and you choose its colors and fonts.
Add your logo and browser icon
Your site logo is separate from the logo on your Famlo listing. As the tab says: "Shown on your website only. Your Famlo profile logo is set in School settings." Until you add one, your site shows your organization's name in text.
- Open Website, then Logo & icon (1).
- Under Add a logo, choose your file (2). Use a PNG, JPG, WEBP or SVG up to 2 MB (an SVG up to 512 KB). A wide logo works.
- To use a browser icon, choose a file under Site icon (browser tab) (3).
- Select Save logo and icon.
If your Famlo listing already has a logo, you can select Use my Famlo profile logo instead. It copies that logo to your site. Changing either logo later doesn't change the other.
Logo settings
Once a logo is saved, more settings appear, with a preview of your header on a computer and a phone and of your email header:
| Setting | What it does |
|---|---|
| Size | Small, Medium (recommended) or Large. Medium is 56 px tall on a computer and 42 px on a phone; Small is 40 and 32; Large is 76 and 52. |
| Trim empty space around the logo | Shown only when your file has blank space around the logo. Famlo crops it away so the logo fills its spot. Your original file isn't changed. |
| Show the name beside the logo | Turn it off when your logo already spells out your name. |
| Logo in emails | Left or Centered: where your logo sits at the top of emails sent in your site's look. See branded emails. |
To take a logo off, tick Remove this logo and save.
The browser icon
The site icon is the small picture in the browser tab. Phones also use it when someone saves your site to their home screen. Use a square PNG at least 180 by 180 pixels, up to 1 MB. Until you add one, your site uses a plain icon. To take yours off, tick Remove this icon and save.
Set your details
The Details tab holds what shows on every page apart from your pages' own content.
- Open Website, then Details (1).
- Fill in the cards you need. Anything you leave blank doesn't show on your site.
- Select Save details.
Announcement bar
"One line across the top of every page, for news families shouldn't miss, like "Fall registration is open"."
- Tick Show the announcement bar (2) and type the line in What it says (up to 120 characters).
- Link name (optional), up to 30 characters, is shown as "Learn more" if you leave it blank. Link (optional) can be a page on your site, like /classes, or a full https:// address.
- Hide after (optional): the bar shows through this day, then hides itself.
Contact and hours
"Shown at the bottom of every page, so families can call, write or find you." Fill in Phone, Email, Street address, City, State, ZIP and Hours (written the way you'd say it, like "Mon to Thu, 9am to 3pm").
- Tick We meet in different places (show the town only) if you don't have one address. Your site then shows your town, never a street.
- Your website doesn't read these from your Famlo listing on its own. To start from your listing, select Copy from my Famlo listing (3). It fills in the address, phone and email from your listing, and you then save them yourself ("Copied from your Famlo listing. Save to use them.").
Emails sent in your site's look use these contact details too.
Social links
Icons at the bottom of every page for Instagram, Facebook, YouTube, TikTok and LinkedIn. Paste the address of your profile. For Instagram and TikTok, your @name works too. Each link must go to that network's own site.
Footer line
One line at the very bottom of every page. In Contact line, type an address, phone number or email, up to 200 characters. Leave it blank to show your city.
Troubleshooting
I saved, but my site still looks the same. Changes on these tabs reach your site within a few minutes; the notice after saving says when. If your site still isn't online at your own address, see Domain troubleshooting.
I changed the look and lost my colors. A new look starts its own colors and fonts. Pick your colors again under Colors and fonts, or next time tick Keep my colors when I change the look before you save.
No colors from my logo appear. Save a logo on Logo & icon first. If you have one, the tab says why there are no sets, for example when the logo is black and white. Pick one of the look's colors instead.
I don't see Size, Trim or Show the name beside the logo. They appear once a logo is saved. Trim empty space around the logo shows only when your file has blank space around it.
My browser icon won't save. It must be a square PNG at least 180 by 180 pixels and under 1 MB. The message under the form says what's wrong with the file.
A social link won't save. Each link must be an https address on that network's own site, such as instagram.com for Instagram. For Instagram and TikTok you can type your @name instead.
My logo on famlo.co didn't change. Your site logo and your Famlo listing's logo are separate. Change the listing's logo in School settings › Identity. See Your organization profile.