Theme customization in SGEN

How to adjust your site's visual design using the Theme Editor and Custom CSS

You do not need to switch themes to change how your site looks. The Theme Editor gives you direct control over typography, color palette, spacing, and button styles — the foundational layer of your site's visual design. For anything the Theme Editor does not expose, Custom CSS covers the gap.

This guide covers both tools, in the right order: start with the Theme Editor for any global design adjustment, and use Custom CSS for targeted overrides that fall outside what the Theme Editor controls. The two tools are designed to work together. Using them in the right sequence gives you predictable, maintainable styles without modifying theme files or creating specificity conflicts you cannot trace.

The SGEN team's own marketing site is the example throughout this guide. It runs on a standard SGEN theme — clean, fast, no visual debt. The design language is a brand-primary color, neutral backgrounds, serif headings, and rounded buttons. None of those choices required a theme change or a developer. They came from the Theme Editor and a small block of Custom CSS.

By the end of this guide, you will know how to change your site's fonts, colors, spacing, and button defaults in the Theme Editor, and how to write a targeted Custom CSS override for styles the Theme Editor does not expose.

What is this for?

This guide is for site owners and marketing teams who want to align their SGEN site's visual design with their brand guidelines — without touching theme code, without installing a plugin, and without switching themes.

It is also useful as a reference if you have already made changes in the Theme Editor but find that some elements are not changing as expected. That is usually a specificity issue — this guide covers how to diagnose and fix it.

You will use the Theme Editor under Appearance in the dashboard, and the Custom CSS editor under Custom CSS in the dashboard. No code editor or external tooling is required for the Theme Editor steps. Custom CSS requires writing standard CSS.

Good use cases

Theme customization via the Theme Editor and Custom CSS covers these situations.

• Matching the site palette to a brand color guide.

Your brand primary color and secondary are set in the Theme Editor's color palette controls. Every element that inherits from the primary color — buttons, links, headings — updates together.

• Changing the site's heading font.

The default theme ships with a sans-serif heading font. Your brand may use a serif for headings — for example, Playfair Display from Google Fonts. Setting this in the Theme Editor's typography controls updates every heading on every page without touching individual pages or sections.

• Adjusting global button shape.

Your brand guidelines may call for a 4px border radius on buttons. The Theme Editor exposes a button border-radius control. One change, applied once, carrying to every button across the site.

• Setting consistent base font sizes.

If the body font is rendering too small on mobile or too large on desktop, the Theme Editor's base font-size controls let you set the correct values without writing breakpoint-specific CSS manually.

• Scoping a style override to one page.

After setting the global styles in the Theme Editor, a seasonal campaign landing page may need a different hero background color. This is a Custom CSS job — one scoped rule, one page, no effect on other pages.

• Adjusting an element the Theme Editor does not expose.

The Theme Editor does not have a control for blockquote border color or table header background. These are Custom CSS overrides — targeted, small, easy to manage.

• Previewing a design change before applying it site-wide.

The Theme Editor includes a preview mode that shows your changes on the live theme before saving. Use it for any significant change to confirm the result before committing.

What NOT to use this for

• Do not switch themes to adjust styles.

Switching themes replaces the entire visual foundation of your site — all SG-Builder sections, all Theme Editor settings, all Custom CSS — with the new theme's defaults. If you are happy with your site's layout and want to adjust colors or fonts, use the Theme Editor. Switching themes is for when you want a fundamentally different visual structure.

• Do not edit theme files directly.

Theme files for SGEN themes are managed by SGEN and are updated as part of platform maintenance. Direct edits to theme files are overwritten when themes are updated. Use the Theme Editor and Custom CSS for all style customizations. This is the path that survives theme updates.

• Do not use Custom CSS for changes the Theme Editor covers.

The Theme Editor manages global typography and palette with the correct specificity. Adding a Custom CSS override on top of a Theme Editor control creates a specificity conflict that makes future maintenance harder. Use the Theme Editor first. Use Custom CSS for what remains.

• Do not use body.page-<slug> for page-specific CSS.

The slug-based class is removed from the body when a page is set as the site's homepage. Always use body.page_id-N for page-specific Custom CSS scoping. The ID is permanent and does not change with the homepage setting.

• Do not use the Theme Editor to make changes without previewing first.

The Theme Editor's save applies changes globally and immediately. The preview mode exists to show you the result before it goes live. Use it for any typographic or color change before clicking Save.

How this connects to other features

• Custom CSS — The Theme Editor is the first layer.

Custom CSS overrides sit on top. For anything the Theme Editor does not expose, write a targeted Custom CSS rule. See Custom CSS basics.

• SG-Builder — Section styles in SG-Builder inherit from the Theme Editor globals.

If sections look off after changing the Theme Editor palette, check whether any sections have explicit color overrides set in their configuration panels — explicit section settings take precedence over the theme globals.

• Appearance (general) — The Appearance area includes the Theme Editor,

Menu Builder, and Widgets alongside other design settings. The Theme Editor is one section within Appearance.

• Custom Codes — Custom Codes is for scripts and HTML, not for CSS.

Do not add CSS to the Custom Codes surface — it belongs in Custom CSS. See Custom CSS vs Custom Codes vs SG-Builder Additional CSS.

• Landing pages and SG-Builder — The global styles you set in the Theme Editor

apply to every page, including pages built in SG-Builder. When you build a landing page in SG-Builder, the sections inherit your theme's typography and color globals. Set the globals first, then build.

Before you start

Before making changes in the Theme Editor, have these things ready.

Have your brand color values ready. If your brand has a defined color palette — primary, secondary, accent — have the hex codes ready before you open the Theme Editor. SGEN's color pickers accept hex values directly.

Know which fonts you are using. If your brand uses Google Fonts, have the font name ready. SGEN's Theme Editor supports Google Fonts selection. If you are using a self-hosted font or a variable font, Custom CSS is the path for that. The Theme Editor Google Fonts selector covers most commercial font choices.

Note your current settings before changing them. The Theme Editor does not have an undo or rollback. Before making a significant change — like adjusting the heading font or the primary color — note the current value so you can restore it if the change does not look right.

Plan the scope of changes. Decide which elements you want to change and at what scope (global vs. one page). Global changes go in the Theme Editor. Page-specific changes go in Custom CSS. Knowing this upfront prevents you from writing a Custom CSS override for something the Theme Editor handles more cleanly.

Where to go

Go to Appearance in the left sidebar of your SGEN dashboard. Click Theme Editor. The Theme Editor opens with sections for typography, colors, buttons, spacing, and other global controls.

Steps — Customize your theme using the Theme Editor and Custom CSS

These steps cover setting global typography and color in the Theme Editor, then writing a targeted Custom CSS override for a style the Theme Editor does not expose.

1. Open the Theme Editor and preview your current settings

Go to Appearance then Theme Editor. The editor opens with your current active settings.

Before making any changes, use the Preview mode to see your site with the current settings. The preview shows you the live site rendered with the theme's current styles. Use this as your baseline — you want to compare the "before" to the "after" for any change.

Familiarize yourself with the sections available in the Theme Editor: typography, colors, buttons, spacing. Each section expands to show the controls it contains. Open each one before making changes to understand the full scope of what is configurable.

2. Set the color palette

In the Theme Editor, open the Colors section. Set the primary, secondary, and accent colors to your brand values.

For each color field:

• Click the color swatch or the color picker icon.
• Enter the hex code directly (e.g., #5C3A1E) or use the color picker to select visually.
• After setting all colors, click Preview to see how the palette applies across the site

before saving.

SGEN uses the primary color for: main CTA buttons, active navigation states, and link colors. The secondary color is typically used for backgrounds and secondary UI elements. The accent is for highlights, badges, and secondary buttons.

Adjust each value and preview before saving. Color changes are global and immediate — the preview is worth using.

3. Adjust button styles

In the Theme Editor, open the Buttons section. Set the primary button border radius, padding, font weight, and text transform.

Example button settings that match common brand guidelines:

• Border radius: 4px (slightly rounded — not pill-shaped, not square)
• Padding: 12px top/bottom, 24px left/right
• Font weight: 600
• Text transform: none (no uppercase)
• Background color: inherits from primary color

After setting button styles, use the preview to confirm they look correct on a page that has a CTA button visible.

4. Set spacing and container width

In the Theme Editor, open the Spacing section. This controls:

• Container max-width — the maximum width of the content container on wide screens.

A common setting is 1200px. Content does not stretch beyond this on wide monitors.

• Section padding — the default top and bottom padding on page sections.

This is the baseline — SG-Builder sections can override per section.

• Column gap — the default gap between columns in multi-column layouts.

Adjust these to match your layout needs. Preview after each change.

5. Save Theme Editor settings and verify

After setting typography, colors, buttons, and spacing, click Save in the Theme Editor. The changes apply globally and immediately.

Open the live site in a private browser window. Navigate to your homepage and check:

• Headings render in the correct font you set.
• Body text renders in the correct font at the base size you set.
• Buttons show the correct background color (primary) with the border radius you set.
• Links show the correct color.
• Section spacing looks consistent and not cramped or excessive.

If anything looks wrong, go back to the Theme Editor and adjust. The preview mode in the Theme Editor shows you the result before saving — use it proactively on any subsequent change.

6. Write Custom CSS for styles the Theme Editor does not expose

After the Theme Editor settings are saved, identify any remaining style gaps. Common gaps in SGEN themes that Custom CSS covers:

• Blockquote left border color and font style
• Table header background color
• Form input focus ring color
• Specific heading letter-spacing
• Page-specific overrides for one section on one page

Go to Custom CSS in the left sidebar. Write a targeted rule for each remaining gap. Use comments to document what each rule is for.

Two typical overrides after the Theme Editor is set:

/* Blockquote — brand-aligned left border and italic styling */blockquote {border-left: 3px solid #5C3A1E;font-style: italic;color: #5C3A1E;padding-left: 1.25rem;}/* Seasonal campaign page (page_id-42) — hero section background override */body.page_id-42.hero-section {background-color: #2C1A0E;}

See Custom CSS basics for the full process: how to identify the selector, write the rule, verify specificity, and confirm the result.

What success looks like

When theme customization is complete and working correctly, these things are true.

• The site's heading font matches your brand typography on every page.
• The primary, secondary, and accent colors are correct across all pages.
• Buttons show the correct shape, color, and hover state on every page.
• Section spacing is consistent and appropriate for the content density.
• Any Custom CSS overrides are applying to the correct elements without affecting other pages.
• The live site (viewed in a private browser window) matches the Theme Editor preview.

What to do if it does not work

• The heading font is not changing after saving the Theme Editor typography settings.

Open the live site in a private browser window and hard-refresh (Shift + reload). If the font is still the old one, open the browser inspector on a heading element and check which font-family rule is applying. If a Custom CSS rule is overriding the theme font, remove or update that Custom CSS rule to match the new font.

• The primary color is not applying to buttons.

Open the browser inspector on a button. Check whether the button's background-color is set by a Custom CSS rule or an inline style that is overriding the theme's color variable. If a previous Custom CSS override is taking precedence, update it to use the new color or remove it and let the theme control the button color.

• Custom CSS overrides are applying to the wrong pages.

Confirm you are using body.page_id-N for page-specific scoping. Without the page ID prefix, a rule applies globally. Verify the page ID in the dashboard URL when editing the page.

• The site looks different in the browser than in the Theme Editor preview.

The Theme Editor preview is an approximation. Custom CSS rules and third-party scripts that run on the live site do not always render in the editor preview. The private browser window is the authoritative view. Use it as the final check.

• After a theme update, some styles reverted to defaults.

SGEN theme updates can reset Theme Editor settings on affected controls. After any theme update, open the Theme Editor and verify your typography, color, and button settings. Re-apply any that were reset. Custom CSS is not affected by theme updates — only Theme Editor settings can be reset.

• Spacing changes in the Theme Editor are not appearing on SG-Builder pages.

SG-Builder sections have explicit padding settings configured in their own panels. Explicit section padding overrides the Theme Editor's default section padding. If spacing looks wrong on a SG-Builder page, check the section padding in the SG-Builder panel for each affected section.

Tips for clean theme customization

• Theme Editor first, Custom CSS second.

Use the Theme Editor for every control it exposes. Use Custom CSS for everything else. This sequence minimizes specificity conflicts and makes future maintenance predictable.

• Preview before every save.

The Theme Editor preview is there for a reason. Color changes that look correct as hex values can look unexpected on actual UI components. Preview before you commit.

• Document your Custom CSS.

Write a comment above every Custom CSS rule explaining what it does and when it was added. Custom CSS accumulates. Comments are what make it possible to safely clean it up later.

• Keep a note of your current settings before changing them.

The Theme Editor does not have undo. Before changing a heading font or a primary color, note the current value. If the change looks wrong, you can restore it immediately.

• Verify in a private browser window after every change.

The admin dashboard and the theme editor preview do not always show exactly what visitors see. A private browser window removes the admin session from the equation. It is the most reliable check.