Reference → Appearance

Appearance

FieldValue
Audiencepublic
Page typereference
Areasg-admin
Updated2026-05-14

The SG-Admin Appearance pillar — site-wide visual configuration.

The Appearance area in the admin is the per-site surface for site-wide visual configuration — themes, custom code, custom fonts, menus, design tokens, and the system surfaces that govern how the site looks and behaves across pages. Where SG-Builder handles per-page visual composition, Appearance handles the cross-page visual baseline. This page is the Reference definition.

What is this for?

Read this page when you want the structural definition of the Appearance pillar — what surfaces it contains and the boundary against per-page work in SG-Builder.

Good use cases

  • You are scoping site-wide visual configuration (theme switch, font registration, custom CSS).
  • You are explaining to a stakeholder the difference between Appearance and SG-Builder.
  • You hit a "where do I add a custom font?" question and want the model laid out.

What NOT to use this for

  • Per-step procedures — open the relevant Guide.
  • Per-page composition — open SG-Builder.
  • Per-release shipped change — open What's New or Changelog.

How this connects to other features

Where to find it

Open SG-Admin for the active site. Appearance is in the sidebar under the design group. Themes, Custom CSS, Custom Fonts, and the Menu builder are reachable as sub-surfaces. Admin access is required to change theme and design-system settings.

Definition

The Appearance pillar in the admin groups the surfaces that configure site-wide visual baseline. Operators use Appearance to set themes, register custom fonts, manage custom code injection, configure menus, and tune the design system. SG-Builder consumes these defaults during per-page composition.

The defining property is site-wide. Changes here propagate to every page on the site (subject to per-page or per-component overrides authored in SG-Builder).

Purpose

The purpose of this page is to define the Appearance pillar as a Reference layer.

Scope

This page covers Appearance at the Reference level.

The page covers:

  • The surfaces inside the Appearance pillar.
  • Per-surface operational role.
  • The boundary against per-page work.
The page does not cover:
  • Per-step procedures — Guides.
  • Per-component composition — SG-Builder Reference.
  • Per-release shipped change — What's New or Changelog.

Surfaces inside Appearance

Themes

Theme registration and switching. Themes define the site-wide visual baseline (colors, typography, layout defaults).

Theme Editor

Per-section configuration of header / footer / mobile menu and other site chrome.

Site Settings (visual)

Per-site visual settings — site identity, social links, default OpenGraph image.

Menu

Menu Builder for site navigation. Single source of truth for the site's nav structure.

Custom Fonts

Custom font registration. Once registered, fonts become available to SG-Builder typography traits.

Custom Codes

Site-wide CSS or HTML injection. Use sparingly — most styling belongs in themes or SG-Builder per-component overrides.

Custom CSS

Site-wide CSS overrides at the design-system level.

Shortcodes Helper

Documentation of available shortcodes for use in content fields.

Site · SG-Admin · Appearance

Configuration surfaces

🎨

Themes

Theme registration + switch

📐

Theme Editor

Header / footer / mobile

⚙

Site Settings

Identity + social

📑

Menu

Navigation builder

🔤

Custom Fonts

Font registration

{ }

Custom Codes

Site-wide injection

.css

Custom CSS

Design-system overrides

🔧

Shortcodes Helper

Available shortcodes

Boundary against SG-Builder

Appearance configures the site-wide baseline. SG-Builder authors per-page or per-component visual layers on top of that baseline. The two surfaces pair:

  • Appearance: site-wide defaults (theme, fonts, menu, design system).
  • SG-Builder: per-page composition + per-block trait overrides on top of those defaults.
Operators who confuse the two end up putting page-level decoration into Custom CSS (where it doesn't belong) or putting site-wide font registration into a per-block trait (which doesn't propagate). The Reference here keeps the boundary clear.

Constraints and boundaries

Appearance is a Reference area for the site-wide visual configuration pillar.

Use this Reference for:

  • Understanding what the Appearance surfaces cover.
  • Confirming the boundary against per-page work.
Do not use this Reference for:
  • Per-step configuration procedures — Guides.
  • Per-page composition — SG-Builder Reference.
  • Per-release shipped change — What's New or Changelog.

Public boundary

This page is intentionally public-safe.

Examples

Example 1 — Operator switches the active theme

Operator opens Themes, picks a different registered theme. The site re-renders with the new theme defaults. Per-page overrides authored in SG-Builder remain in place where they were explicitly set.

Example 2 — Operator registers a custom font

Operator opens Custom Fonts, registers a new font. The font appears in SG-Builder typography traits across every page; operators can apply it per-block.

Example 3 — Operator updates the main navigation

Operator opens Menu, edits the navigation structure. The new menu propagates to every page that uses the navigation block (typically the header).

Documentation guidance

Use this page as the structural definition for the Appearance pillar. Per-step procedures live in Guides.

Reading order

Open this page when scoping site-wide visual changes.

Related reading

Vocabulary cross-reference

  • Site-wide is the scope of Appearance changes — affects every page.
  • Per-page is the scope of SG-Builder authoring — affects one page at a time.
  • Theme is the named site-wide visual baseline.
  • Design system is the cross-cutting set of design tokens (colors, typography, spacing).

Maintenance discipline

When Appearance surfaces change across releases (new surface, new boundary rule), update this Reference and log the change in Changelog.

Related reading

Topic
SG-Admin
Templates
SG-Builder
On this page