Design

Everything about how the site looks is under Pages & Design. Design changes never alter your content: switching themes or restyling keeps every page, address, and image.

Most design changes are drafts first: you see them in a preview, and visitors see nothing until you Apply them. Each design change is kept in a history you can restore from.

Themes

A theme is the overall look of the site. Two come with sc-cms:

Starter: clean, fast, and accessible, with light and dark modes.
Studio: editorial, with a centered masthead, serif type, and listings shown as a grid of cards.
Studio Center: the studiocenter.com look (see below).

Browse the site with it lets you look around your own site in another theme (only you see it). Review and switch shows a report before switching:

Safe, Looks different, or Needs attention;
what changes, and which pages use blocks the new theme doesn’t style.

After switching, Switch back undoes it in one click. Your style and template customizations belong to the theme you made them in, and come back when you switch back.

Adding a new theme is a developer task, because themes are built into the site. See Updates and releases.

Studio Center theme

Studio Center reproduces the studiocenter.com look from the old Concrete site: black pages, a charcoal header with the Studio Center logo, condensed all-caps headings, big grey page titles, and outlined call-to-action buttons. It has no dark mode; the site is dark already. Its fonts (Bebas Neue and Montserrat) are included with the theme, so nothing loads from font services.

Logo: the site title shows the Studio Center logo. The site name is still what screen readers announce.
Buttons: Outline gives the bordered boxes used across the old site; Filled gives a solid blue button.
Home page: the home page doesn’t show its title, so you can start it with a full-width Section as a hero.
Sidebars: to recreate the old left or right sidebar pages, use a Columns block (“Narrow + wide” or “Wide + narrow”) and give it the CSS class sc-sidebar (Developer mode).
Landing pages without header and footer: put the page in a Section with the CSS class sc-blank.
Boxes: give any block the class sc-box for a thin outlined box. Image blocks also take image-circle and image-right-tilt.
Footer: links to Facebook, Instagram, LinkedIn, YouTube, phone numbers, and email addresses in the social row show as icons. Add award badges as Image or Gallery blocks in Pages & Design → Templates → Footer.
Search: the magnifier in the header opens /search, so keep the Search extension active.

Accordions, audio playlists, galleries, popups, feature rows, and content lists all take on the Studio Center look: condensed all-caps titles, thin white rules, outlined boxes, and blue links. Playlists show each track in its own box, like the old “Top five voices” lists. Testimonials (content lists with the Quotes layout) appear as dark panels with a blue edge. Sidebar lists (page navigation, categories, monthly archive) look like the old blog’s “Archives” sidebar.

Styles

Styles controls colors, fonts, and spacing for the current theme. Changes save as a draft and show in the preview on the right. Apply changes publishes them; Discard throws them away.

Style presets: Minimal, Editorial, Friendly, Corporate, or Bold as a starting point. Reset to the theme’s styles goes back to the original.
Colors: background, panels, text, borders, and the accent color for links and buttons. Tick Dark mode for visitors who prefer it to add a dark color set; visitors whose device is in dark mode get it automatically. A contrast check warns if any text would be hard to read.
Typography: body and heading fonts, text size, heading sizes, line spacing, and heading weight.
Spacing and shape: overall spacing, corner rounding, button shape, reading width, and the width of wide sections.
Custom CSS (Developers): extra styles added after the theme’s.

Pages & Design → Navigation edits the Main menu and the Footer menu. Each menu is built one of two ways:

Follow the site tree, like Concrete’s Auto-Nav. The menu is your top-level published pages in their site tree order, with each page’s subpages as a dropdown (or top-level pages only). Pages hidden from menus are left out. To change the menu, reorder pages in the site tree. Untick Include the home page to leave it out.
Custom: you choose what’s in it. Add pages (browse or search the site tree), automatic subpages of a page (they stay up to date as pages are added), or custom links (/path, https://…, mailto:, tel:). Drag items to reorder them, or onto another item to put them in its dropdown. Menus have two levels. Click a label (or press F2) to rename it. Keyboard: Alt+↑/↓ to move, Alt+→/← in and out of a dropdown, Shift+F10 for an item’s actions.

Switching from Follow the site tree to Custom starts from what the menu shows now, so you can adjust it. Click Save menu to keep your changes. Menu links point at pages, not addresses, so they keep working when a page moves. Links to pages that aren’t published yet stay hidden until they are.

Templates

Templates arrange everything around your content: the header, the footer, and the layout of pages, posts, custom content types, listings (the blog, categories, and tags), and the Page not found page. They’re built from blocks in the same editor as pages, with extra blocks such as Site title, Menu, Featured image, List of items, Language switcher, Page navigation (subpages, pages beside this one, the whole section, top-level pages, or a breadcrumb trail), Categories (with post counts), and Archive by month. These last three also work on ordinary pages. Each month in Archive by month links to its own page, such as /blog/2024/05.

Each template must keep what it needs: the Page template must show the page’s content, and Listings must show the list. Use Save draft, Preview whole site, then Apply. Use the theme’s version removes your changes to that template.

Patterns

Patterns lists the reusable block groups your team saved from the editor (see Patterns), marked Synced or Copy on insert. Open one to rename it or edit its blocks. Saving a synced pattern updates every page that uses it.

Theme updates

When a release updates the active theme, a card shows how the theme’s changes fit with yours: Take the update, Merge, keeping mine where we differ, Use the theme’s version where we differ, or Keep mine as it is. The result is a draft you can preview before applying.