Joe and Anna Stringer Family

Theme Builder

The Theme Builder allows you to customize the look and feel of the entire site. You can adjust colors, preview changes instantly, save your own themes, and apply themes site‑wide. This tool makes it easy to create a modern, consistent visual style for the family website.

What You Can Do in the Theme Builder

  • Preview preset themes
  • Customize individual colors
  • See changes instantly in the live preview
  • Save your own custom themes
  • Apply a theme to the entire site (admins only)
  • Browse shared themes created by others

Page Layout

The Theme Builder includes three main sections:

  • Left Panel — Preset themes and color controls
  • Right Panel — Live preview iframe showing the site with your selected colors
  • Shared Themes — Themes created by other users

Using Preset Themes

The top of the left panel includes several preset themes. Clicking one will:

  • Load its colors into the controls
  • Update the preview instantly
  • Allow you to customize it further

Customizing Colors

You can adjust any of the theme colors using the color pickers:

  • Primary Color
  • Secondary Color
  • Accent Color
  • Background Color
  • Text Color

Changes appear immediately in the preview iframe.

The preview iframe shows a live version of the site using your selected colors. It updates instantly as you make changes.

Saving a Custom Theme

To save your theme:

  1. Customize your colors until you’re satisfied.
  2. Click the Save Theme button.
  3. Enter a name for your theme.
  4. Choose whether to make it Public or Private.
  5. Click Save.

Applying a Theme Site‑Wide

Admins can apply any theme to the entire site:

  1. Select a theme (preset, custom, or shared).
  2. Click the Use Theme button.
  3. Confirm the change.

The new theme takes effect immediately for all users.

Shared Themes

The bottom section displays themes created by other users. Each theme card shows:

  • Theme name
  • Preview colors
  • Created by
  • Created date
  • Use Theme button

You can load any shared theme into the preview or apply it site‑wide (admins only).

Tips for Creating Great Themes

  • Use high‑contrast colors for readability.
  • Keep accent colors subtle for a modern look.
  • Preview multiple pages using the navigation inside the iframe.
  • Save themes you like so you can switch back easily.

Related Help Topics