876Social — Theme Customization & Architecture Guide About Theme SCDev Social – 876Social
💎 Master Technical & Customization Guide

Under the Hood of SCDev Customization

SCDev Single Theme provides a full visual operating system directly inside WordPress. From per-page design overrides and rich media mega menus to physics-driven sidebars and decoupled 10-zone color systems, explore every option and what it does.

Up to 90%
Media Auto-Optimization
10
Decoupled Text Areas
Per-Page
Metabox Overrides
Mega
Media Menu System

Engine Philosophy: Pure CSS Variables, Zero Builder Bloat

Why this theme outperforms heavy visual page builders

Lightning Fast & Fully Dynamic

Zero Bloat Architecture

Unlike heavy visual builders that inject megabytes of JavaScript and nested divs, SCDev Single Theme handles all styling through unified CSS root variables (--scdev-*) updated via native WordPress Customizer controls and Core Meta APIs.

💡 How to Access the Control Centers

Global Customizer Controls: Appearance → Customize → Theme Single Settings.
Per-Page Overrides: Edit any Page/Post → Scroll to Content Container Settings.
Mega Menu Editor: Appearance → Menus → Expand menu items to attach videos, images, and descriptions.
Media Auto-Optimizer: Media → Auto-Optimizer for automated compression and WebP conversion.

🚀

Media Auto-Optimization: Shrink Sizes Down to Nothing

Automated on-upload image compression, WebP generation, video transcoding, and bulk media reduction

High-Velocity Media Compression & Bandwidth Saver

Performance Engine

High-resolution images and videos usually slow websites to a crawl. The built-in SCDev Auto-Optimizer intercepts every upload and automatically compresses images, generates next-generation WebP variants, downsamples heavy audio/video clips, and delivers ultra-lightweight assets with up to 70%–90% size reduction and zero visible loss in quality!

⚡ Optimization Performance Benchmark
85% SAVED
JPEG / PNG Photos
5.2 MB raw upload → 480 KB next-gen WebP
75% SAVED
MP4 / WebM Video Clips
45 MB feed video → 11 MB fast-stream MP4
AUTOMATIC
On-Upload Processing
Zero manual effort — compresses instantly on drag & drop
SAFEGUARD
Original Backup & Rollback
Preserves lossless backups so you can restore originals anytime
Feature How It Works Benefit
Automated WebP Conversion Converts all uploaded PNG and JPG media into lightweight WebP format and serves them via responsive <picture> tags. Instant mobile page loads and 100/100 Google PageSpeed scores.
Video & Audio Compression Optimizes embedded video clips (MP4/WebM) and audio voice notes uploaded to feeds, stories, or mega menu items. Smooth instant video playback with zero buffering on mobile data.
Bulk Media Library Optimizer Scan and optimize your entire existing WordPress media library in a single background batch run. Shrink gigabytes of old server storage into hundreds of megabytes.
Zero-Loss Visual Quality Uses advanced perceptual loss algorithms to strip hidden metadata and re-encode color palettes without blurring details. Razor-sharp retina graphics at a fraction of the file weight.
🎨

Dual Day / Night Color Scheme (10 Decoupled Zones)

Complete separation between titles, body reading text, card excerpts, and meta info

10 Non-Colliding Typography Categories

Panel: Color Scheme

Every text category has its own dedicated Light and Dark mode color swatch, preventing collisions between card blurbs, body text, and headlines.

🎯 The 10 Decoupled Text Areas
01
Site Title & Brand
Header logo & brand text
02
Nav Menu & Links
Header nav, drawer links, mobile bar
03
H1 — Page & Hero Titles
Banners, top-level hero headlines
04
H2 — Post & Card Titles
Feed card headlines, single post titles
05
H3 — Section Headings
In-article subheadings, creator names
06
H4 — Widget & Sidebar Titles
Sidebar widget headers, stat numbers
07
P — Body Text & Paragraphs
Long-form article copy, full descriptions
08
H5 — Card Excerpts & Captions
Feed preview snippets, blurbs, captions
09
H6 — Meta & Timestamps
"2h ago", @usernames, view counters
10
Buttons & Actions
Normal/hover colors, radius, borders
✍️

Typography, Font Family & Boldness Scales

17 curated Google Font families and precision font size/weight controls

Font Selection & Sizing Matrix

Panel: Typography

Choose from 17 curated Google Font families (Inter, Roboto, Poppins, Georgia, Garamond, Playfair Display, Montserrat, etc.). Set pixel-perfect font sizes (10px–64px) and 7 boldness levels (300 Light to 900 Black).

📏

3-Tier Line-Height Spacing & Vertical Rhythm

Dedicated vertical spacing sliders across body paragraphs, article headings, and card excerpts

Precision Line-Height Sliders

Panel: Typography
Control Name Setting Key Range Default Target Text Area
Body Text Line Height ss_p_line_height 1.0 to 2.6 1.6 Reading paragraphs, full descriptions, list copy
Headings Line Height ss_heading_line_height 0.9 to 2.2 1.2 H1 hero titles, H2 card headlines, H3 subheadings, H4 widget headers
Card Excerpt Line Height ss_h5_line_height 1.0 to 2.4 1.4 Card preview snippets, feed blurbs, image captions
📄

Per-Page & Per-Post Customization Engine (Metaboxes)

Override any global Customizer setting on individual pages and posts with zero coding

Content Container Settings Metabox

Edit Page / Post Screen

Every WordPress page and post contains the built-in Content Container Settings metabox. Check "Use custom container settings for this page or post" to override global styling:

Override Category Field Names Capabilities
Sliding Sidebars Control _scdev_page_container_sidebars_mode Inherit Global (Uses Customizer setting)
Turn Off Sidebars (Hidden): Complete full-width distraction-free view
Turn On Both Sidebars
Show Left Sidebar Only / Show Right Sidebar Only
Feed vs. Widgets Override _scdev_page_container_left/right_widgets_only Turn off the default social stream and display custom WordPress widgets only on the left or right sidebar.
Page Frame Dimensions _scdev_page_container_width, height Custom width and height percentage overrides per page (20% to 100%).
4-Way Margin Offsets _scdev_page_container_margin_top, bottom, left, right Custom top, bottom, left, and right pixel margins overriding auto-centering.
Custom Canvas Background _scdev_page_container_bg_type Set a custom Solid Color, Directional Gradient, or full Image Wallpaper for that specific page only.
📰

Posts & Category Archive Customizer

Archive banners, card images, meta toggles, and individual post display options

Archive & Post Feed Controls

Panel: Posts & Archives

Fine-tune the appearance of category archive feeds, featured image crop heights, and individual post reading views.

Option Label Setting Key Description
Archive Banner Gradient ss_cat_banner_gradient_start, end, angle, height Custom 2-color gradient header banner with adjustable height (120px–420px) for archive pages.
Card Image Height ss_cat_card_img_height Set post card featured image crop height (120px to 520px).
Archive Read More Toggle ss_archive_show_read_more Show or hide the "Read More" button on archive cards for cleaner minimal grids.
Archive Card Stats ss_archive_card_stats Toggle live view counters, reaction totals, and comment counts on feed cards.
Archive Meta Toggles ss_archive_meta_author, time, category Granular switches for Author Name, Elapsed Time, and Category pills on cards.
Single Post Featured Image Height ss_post_featured_img_height Adjust single article hero banner height (100px to 600px).
Single Post Meta Toggles ss_post_meta_show_author, time, category, reactions, share, views Independent checkboxes for each individual meta item above articles.
📦

Content Container Box Model

Width, height, 4-way margin offsets, padding, opacity blending, and drop shadows

Global Frame & Geometry

Panel: Content Container

Control the global reading frame's dimensions, margins, paddings, glassmorphism transparency, and drop shadows:

Option Label Setting Key Range / Format Description
Container Width & Height ss_con_width, ss_con_max_h 20% to 100% viewport Width and height percentage ceilings of the central card.
Custom Margins (T/B/L/R) ss_con_margin_top, bottom, left, right 0px to 500px Independent 4-way margin offsets overriding auto-centering.
Padding (V/H) ss_con_pad_v, ss_con_pad_h 0px to 36px Vertical and horizontal inner card padding.
Background & Transparency ss_con_bg, ss_con_opacity Hex Color + 0.0 to 1.0 Solid tone or frosted glass translucency.
Border Radius & Color ss_con_radius, ss_con_border, ss_con_border_color 0–80px radius, 0–10px border Corner rounding and perimeter border lines.
Drop Shadow Presets ss_con_shadow, ss_con_shadow_color None, Small, Medium, Large, X-Large Elevation shadow strength and tint color.
Entrance Animation ss_con_anim Fade, Fade-Up, Fade-Down, Zoom, Slide, Flip Visual entrance motion on page load.
🖼️

Body Background & Canvas Engine

Solid color fills, multi-stop directional gradients, and wallpaper images

Three Atmospheric Canvas Modes

Panel: Body Background
Mode Settings Description
1. Solid Color ss_body_bg_color Clean, minimal single-tone color background.
2. Directional Gradient ss_body_bg_gradient_start, end, angle Two-color blended sweep with custom 0°–360° rotation angle.
3. Background Image ss_body_bg_image, bg_size, bg_pos High-resolution image wallpaper with Cover/Contain and Top/Center/Bottom anchoring.

Animated Border Decoration Suite

Continuous rotating gradients, neon glows, and synchronized toggle handles

Dynamic 3-Color Glows & Continuous Rotations

Panel: Sliding Sidebars → Border Decoration

Choose from 4 animated decoration styles with customizable colors and border widths. The theme automatically wraps the decoration around the protruding perimeter of the drawer toggle handles.

Gradient Flow (90° Loop)
Rainbow Flow (45° Loop)
Neon Glow (Pulsing Glow)
Pulse Glow (Rhythmic Breath)
🔘

Button & Interactive Actions Styler

Global styling for primary buttons, form submit triggers, and hover micro-animations

Universal Button Styles

Panel: Color Scheme → Button Settings
Option Label Setting Key Range / Format
Button Background Color & Hover scdev_btn_bg, scdev_btn_bg_hover Hex Color Pickers
Button Text Color & Hover Text scdev_btn_color, scdev_btn_color_hover Hex Color Pickers
Button Background Opacity scdev_btn_opacity 0% to 100% (Alpha blending)
Button Border Width & Color scdev_btn_border_width, scdev_btn_border_color 0px to 10px + Hex Color Picker
Button Corner Radius scdev_btn_radius 0px to 40px (Sharp to Full Pill)
❤️

Engagement Bar, Support Center & Bottom Alert Rail

Social interactions, floating engagement modules, and bottom notification systems

Floating Social & Notification Modules

Includes: single-engagement.php, bottom-alert-rail.php
Module Customizer Section Features & Capabilities
Single Post Engagement Bar scdev_engagement_section Floating/embedded engagement bar with reaction counters, comment triggers, social sharing buttons, and creator follow controls.
Bottom Alert Rail scdev_page_footer_alerts_section Fixed bottom notification bar for system announcements, cookies, or special offers with dismiss memory.
Support Center Shortcode scdev_support_center_section Embeddable support desk shortcode with quick contact triggers and FAQ modules.
🚀

Theme Presets & Safeguard Reset Engine

Instant aesthetic transformation and fail-safe restore utilities

1-Click Design Personalities

Panel: Theme Presets & Reset
Preset / Tool Description
Dark Neon Vibrant high-contrast dark aesthetic with glowing borders and futuristic typography.
Clean Minimal Monochrome, crisp, distraction-free aesthetic with subtle drop shadows.
Editorial Serif High-end magazine aesthetic with Garamond/Merriweather serif typography and warm backgrounds.
Modern SaaS Clean Inter typography with indigo accents and glassmorphism cards.
Factory Reset One-click restoration of all Customizer settings back to clean baseline defaults.

SCDev Single Theme Master Customization Guide • © 2026 876Social.

Share Post

Link Copied to Clipboard!