SCPress Customizer: Full Control Over Every Pixel

Most website builders give you a color picker and call it "customization." SCPress is different. It hands you the entire engine room — layout architecture, typography systems, region-level styling, floating panels, splash screens, animation orchestration — and lets you dial every knob with live, real-time preview. Here's a deep-dive into what makes the SCPress Visual Customizer genuinely unlike anything else.

🏗️ Layout Architecture That Thinks in Dimensions

Forget fixed-width templates. SCPress models your site as a 5-dimensional CSS grid shell: Top · Left · Content · Right · Bottom. Each dimension is independently controllable — in pixels or percentage of viewport — from the Customizer's Layout panel.

100% Pure Fluid — zero insets, edge-to-edge content, no wasted whitespace
Left Sidebar + Top Bar — classic dashboard or documentation layout
Right Sidebar + Top Bar — editorial or blog-style
Both Sidebars — full five-way shell for power-user portals
App Shell Mode — header, footer, and sidebars stay fixed; only the content area scrolls internally, like a native app
Custom Preset — drag sliders to any combination and save your own

Switch presets and the grid reflows with a smooth cubic-bezier transition. No page reload. No flash.

🪄 Floating Panels — Layout Without Limits

Every major region can be detached from the grid and set to float. Float the left sidebar, the right sidebar, the top header, or even the content panel. Floating regions hover over the page independently, complete with draggable handles and minimize controls.

The floating animation engine ships with four styles:

Genie — a cinematic spring-physics expand/collapse
Glide — a buttery horizontal or vertical slide
Fade — clean, no-distraction opacity transition
None — instant, for the performance purists

Animation speed is fully adjustable, and there's a built-in Respect Reduced Motion accessibility toggle — SCPress respects your users' system preferences.

🎨 Dual-Theme Color System

SCPress ships with a complete light and dark color palette — not just a background toggle, but a full set of independently tunable tokens for both modes:

Primary & Accent brand colors (per mode)
Button backgrounds and text (primary + secondary, per mode)
Navigation: background, text, hover state, active state (per mode)
Badge colors, body background, card backgrounds + hover states
Slot/sidebar backgrounds, main text, muted text, dim text, borders, scrollbar thumb

That's over 30 individually tunable color tokens across two modes — all editable from a single color panel with instant live preview. Pick any HEX color, or let the palette from your active theme seed intelligent defaults.

✍️ Typography Engine

SCPress gives you granular control over your entire type system from a single panel:

Body font & Heading font — independently set (defaults: Inter + Plus Jakarta Sans)
Base font size and individual sizes for H1 through H6
Separate font settings for links, excerpts, descriptions, labels, navigation items, buttons, and badges
Font weight control for headings, labels, nav, buttons, and badges
Heading letter-spacing — currently −0.03em for a premium editorial feel
Heading & subheading entrance animations — choose none, fade-in, slide-up, or custom
Heading shadow — none, subtle, or neon glow

🪟 Region Styles — Per-Zone Visual Design

Each of the five layout regions — Header, Top Bar, Middle Bar, Bottom Bar, Left Sidebar, Right Sidebar, Content — has its own region style panel with:

Background mode: solid color, linear gradient (custom start + end colors), or image URL
Transparency (0–100%) for glassmorphism effects
Border width + color
Drop shadow preset (none, subtle, modern, deep, glow)
Entrance animation per region
Offset (for fine-tuned position nudging)

Want a frosted-glass left sidebar with a gradient header and a dark content canvas? Configure each zone independently. The design system was built for this.

🔲 Cards, Shadows & Radii

Global shape and depth tokens ensure visual consistency across the entire UI:

Card shadow preset: Flat · Subtle · Modern · Deep · Glow — one click, site-wide
Glow intensity — dial the glow from 0–100% for cards in glow mode
Card border radius — from razor-sharp (0px) to generous rounded (16px default)
Button border radius — default 9999px (pill), fully adjustable
Glass blur — backdrop blur in px for glassmorphism surfaces

📐 Middle Bar — Customizable Utility Strip

Between the header and content, SCPress optionally renders a fully configurable Middle Bar. Toggle it on, set its height and width, control which pages it appears on, and choose from its built-in widgets:

Search — inline site search with custom placeholder text
Language switcher — define locale links in a simple key|url format
Categories — auto-populated category list with configurable limit
Social links — Facebook, Instagram, X, YouTube, LinkedIn, GitHub
Shortcode — embed any SCPress shortcode
Raw HTML — drop in anything

Drag-and-drop widget order reordering is built in. Enable the Middle Bar only on specific pages or exclude it from others.

🎬 Splash Screen

First impressions are everything. SCPress includes a built-in Splash Screen that fires before the main site loads. Configure it directly in the Customizer:

Toggle on/off globally
Behavior: auto-dismiss after a set duration, or wait for user to click
Duration — 1 to 60 seconds
Custom Enter button text

Perfect for brand reveals, age-gate prompts, announcements, or pure visual impact on landing pages.

📏 Sidebar Behavior Controls

Sidebars in SCPress are first-class citizens with their own set of behavioral options:

Sticky sidebar — stays in view while content scrolls
Sidebar height cap — set a max height in px so it doesn't overtake the screen
Start expanded / collapsed — independently per sidebar
Slide direction: side (push in from edge) or over (overlay)
Border width — sidebar edge border in px
Border radius — rounded sidebar corners
Toggle button: position, size, label text, custom icon/image, foreground and background color

🖥️ Per-Page Template Overrides

Site-wide Customizer settings are just the default. Every individual page can override the layout with a dedicated template:

page-fluid — force this page to be 100% fluid regardless of global setting
page-left-sidebar — always show left sidebar on this page
page-right-sidebar — always show right sidebar on this page
page-both-sidebars — always show both sidebars on this page
page-5way-shell — enforce the five-way grid on this specific page

Per-page overrides win over global settings. Global settings propagate to all other pages automatically. No hacks required.

⚙️ Custom CSS — The Nuclear Option

When you've exhausted every visual control in the Customizer UI, you still have the raw power: a Custom CSS field that injects your styles site-wide, after all theme CSS. Zero-latency, no plugins, just your code.

The Bigger Picture

The SCPress Visual Customizer isn't a panel bolted onto a theme. It's the foundation the entire rendering system is built on. Layout, color, typography, regions, animations, behavior, per-page overrides — they're all first-class, live-editable primitives. Combined with the 60+ plugin ecosystem (games, commerce, forums, canvas drawing, social features, and more), SCPress gives you the customization depth of a full platform with the speed of a purpose-built tool.

That's not customization. That's control.