Easy Custom Skin Theme - Documentation

📰

🌙

📺

🎨

⚡

⭐ WordPress Theme v1.1.0

Easy Custom Skin Theme

A powerful, feature-rich news and magazine WordPress theme with 45 gem-stone skins, dark mode, TV breaking news, RTL support, PWA, 265+ customizer settings, and 6 header layouts. Designed for the Easy Custom Skin Free plugin.

💎 45 Gem-Stone Skins 🌙 Dark Mode + FOUC Fix 📺 TV Breaking News 📱 PWA Support 🎨 6 Header Layouts 📐 4 Footer Layouts 📝 7 Post Layouts 🔍 Schema + SEO 🌐 Full RTL Support ♿ Accessibility Controls ⚙️ 265+ Settings

📑 Table of Contents

🚀 Getting Started

• System Requirements
• Installation Guide
• Theme Activation
• Quick Setup Workflow

🎨 Layouts & Design

• 6 Header Layouts
• 4 Footer Layouts
• 7 Post/Blog Layouts
• 45 Gem-Stone Skins

📺 News Features

• Breaking News Ticker
• TV Breaking News
• Reading Progress Bar
• Post Views Counter

🌙 Dark Mode & PWA

• Dark Mode Toggle
• FOUC-Free Dark Mode
• PWA Progressive Web App
• Offline Support

🔍 SEO & Performance

• Schema Markup
• Meta Descriptions
• Open Graph Tags
• Performance Options

🛠️ Advanced Features

• Table of Contents
• Accessibility Controls
• Cookie Notice (GDPR)
• Announcement Bar
• Post Reactions

📝 Content & Widgets

• 4 Custom Widgets
• Ad Management
• Social Share Buttons
• Related Posts

🌐 Localization

• Full RTL Support
• Translation Ready
• 265+ Typography Options
• Custom Fonts

System Requirements

Minimum requirements to run the theme

📦

WordPress

5.8+

🐘

PHP

7.4+

🗄️

MySQL

5.6+

💾

Memory

128MB+

🎨

Easy Custom Skin

Recommended

🌐

HTTPS

For PWA

Key Features

Everything you need for a professional news & magazine site

💎

45 Gem-Stone Skins

Beautiful pre-designed color skins named after precious gems: Ruby, Sapphire, Emerald, Amethyst, Diamond, and 40 more. Each with unique color palettes powered by the Easy Custom Skin plugin.

🌙

Dark Mode (FOUC-Free)

Instant dark mode toggle with zero flash of white content. Inline critical CSS ensures dark mode loads before the first paint. Remembers user preference via localStorage.

📺

TV Breaking News

Full-screen TV-style breaking news overlay with 3D animated logo, headline flash effects, scrolling ticker, and featured images. Just like professional news channels.

📱

PWA Support

Progressive Web App with Service Worker, Web App Manifest, offline fallback page, and smart caching strategies. Visitors can install your site as a native app.

🎨

6 Header Layouts

News Style, Centered Logo, Minimal, Dark Theme, Business, and Transparent headers. Each with full customizer color controls and dark mode support.

📝

7 Post Layouts

List Standard, List Compact, List Alternating, Grid, Grid 2-Column, Grid 3-Column, and Grid 4-Column. With AJAX Load More pagination.

🔍

Built-in SEO

Schema markup (Article, Organization, Breadcrumb), Open Graph tags, meta descriptions, and breadcrumb navigation. Compatible with Yoast & Rank Math.

📊

Reading Progress Bar

Configurable progress bar showing how far the reader has scrolled. Choose color, height, position, and visibility settings.

🌐

Full RTL Support

Complete right-to-left stylesheet with mirrored layouts, menus, and typography. Perfect for Arabic, Urdu, Hebrew, and Persian content.

♿

Accessibility Controls

Font size controls (A+ / A-) that actually scale all typography via CSS variables. High contrast mode with true black/white rendering for both light and dark modes.

⚡

Performance Optimized

Lazy loading, disable emojis, disable embeds, minified assets, and smart caching. Keep your site fast for both readers and search engines.

📰

Breaking News Ticker

Scrolling news ticker with customizable label, speed, colors, and position (top or bottom). Auto-fetches latest posts by category. Fixed bottom ticker option.

Installation Guide

Get started in minutes

📦 Method 1: WordPress Admin

1
Go to Appearance → Themes
2
Click Add New → Upload Theme
3
Choose easy-custom-skin-theme.zip file
4
Click Install Now
5
Click Activate

📁 Method 2: FTP Upload

1
Extract easy-custom-skin-theme.zip
2
Connect to server via FTP/SFTP
3
Navigate to /wp-content/themes/
4
Upload easy-custom-skin-theme folder
5
Activate in Appearance → Themes

✅

After Activation: Go to Appearance → Customize → Theme Options to access all 265+ settings. Install the Easy Custom Skin plugin from the WordPress plugin repository for skin management.

Quick Setup Workflow

Get your news site ready in 6 simple steps

📦

1. Install Theme

Upload & activate

🎨

2. Install Plugin

Easy Custom Skin

💎

3. Choose Skin

45 gem skins

📐

4. Set Header

Choose 1 of 6 layouts

📝

5. Create Content

Posts & categories

🚀

6. Go Live!

Launch your site

💎 45 Gem-Stone Skins

Beautiful pre-designed color palettes powered by the Easy Custom Skin plugin

Ruby

Sapphire

Emerald

Amethyst

Diamond

Golden Topaz

Blue Sapphire

Turquoise

Coral

Amber

Pearl

Jade

Citrine

Garnet

Aquamarine

Topaz

Obsidian

Rose Quartz

Peridot

Moonstone

Black Onyx

Chrysoprase

Carnelian

Lapis Lazuli

Malachite

Bloodstone

Tiger's Eye

Kunzite

Hematite

Silver

Bronze

Copper

Iron

Agate

Jasper

Quartz

Opal

Amazonite

Sugilite

Apache Tear

Sardonyx

Moss Agate

Rock Crystal

Tourmaline

White Sapphire

💡

How to Apply Skins: Install the free Easy Custom Skin plugin from the WordPress plugin repository. Go to Appearance → Easy Custom Skin and select any of the 45 gem-stone skins. Colors update site-wide instantly.

Header Layouts

Choose from 6 professional header designs

📰 Layout 1 - News Style

Full-width topbar, logo left, navigation bar with search and dark mode toggle

🎯 Layout 2 - Centered Logo

Logo centered above navigation, clean magazine look with balanced layout

✨ Layout 3 - Minimal

Clean, minimal single-row header with subtle styling and search icon

🌑 Layout 4 - Dark Theme

Dark background header with light text, ideal for news and tech sites

🏢 Layout 5 - Business

Professional look with topbar, CTA button, and corporate navigation

🔲 Layout 6 - Transparent

Transparent overlay header that sits on top of content. Scrolls to solid on sticky

🎛️ Header Features & Options

Sticky Header: Fixed header on scroll with smooth shadow transition
Top Bar: Date display, social icons, custom text, email contact
Dark Mode Toggle: Moon/sun icon in all 6 header layouts
Search: Toggle search form in header area
Logo Options: Custom logo upload with size, margin, and position controls
Navigation: Primary menu with dropdown support and mobile hamburger
Color Controls: Background, text, navigation background via Customizer
Mobile Drawer: Full slide-in mobile menu with smooth animations

💡

How to Change: Go to Appearance → Customize → Theme Options → Header Options and select your preferred layout from the dropdown.

Footer Layouts

4 footer designs to complete your site

Layout 1 - 4 Columns

Classic 4-column widget area with copyright bar

Layout 2 - Large First Column

Featured first column with 2 smaller columns

Layout 3 - Minimal

Simple copyright with inline links

Layout 4 - Newsletter

Newsletter signup area with footer widgets

🦶 Footer Features

Widget Areas: Up to 4 widget columns (Footer 1–4)
Copyright Text: Customizable with dynamic {year} placeholder
Social Icons: Facebook, Twitter/X, LinkedIn, Telegram, Pinterest, WhatsApp
Footer Background: Custom color via Customizer
Back to Top: Smooth scroll button with adjustable visibility
Dark Mode: Automatic dark mode styling with CSS variable overrides

📝 Blog & Post Layouts

7 archive layouts with full customization

📋 List Layouts

List - Standard (thumbnail + content)
List - Compact (smaller thumbnails)
List - Alternating (left/right image)

📐 Grid Layouts

Grid - Default (auto columns)
Grid - 2 Columns
Grid - 3 Columns
Grid - 4 Columns

📄 Single Post Features

Featured image display
Author box with avatar & bio
Related posts section
Post navigation (prev/next)
Social share buttons
Reading time estimate
Post views counter
Post reactions (likes)

📊 Post Meta Options

Show/hide author name
Show/hide post date
Show/hide categories
Show/hide tags with custom label
Excerpt length control
Image aspect ratio control
Read more link toggle

🔄 AJAX Load More

Infinite scroll pagination
Click-to-load button
Loading spinner animation
Smooth fade-in transitions
Configurable posts per load

📑 Table of Contents

Auto-generated from headings
Collapsible toggle
Minimum headings threshold
Custom TOC title
Smooth scroll to anchor

📺 TV Breaking News

Professional news channel-style overlay for your site

📺

Full-Screen Overlay

TV-style breaking news overlay that appears on top of your site with professional broadcast aesthetics and smooth animations.

🎬

3D Animated Logo

Upload a custom 3D logo with rotation, pulse, or bounce animation. Configurable position (left/center/right) and size controls.

⚡

Headline Flash Effects

Breaking news headlines flash with configurable intervals, auto-rotate through latest posts, and feature images with text overlays.

📺 TV Breaking News Settings

Enable/Disable: Master toggle for TV Breaking News overlay
Header Text: Custom "BREAKING NEWS" header text
Number of News: How many posts to rotate through (1-20)
Category Filter: Show news from a specific category only
3D Logo: Upload custom logo with animation style (spin, pulse, bounce)
Logo Position: Left, center, or right placement
Logo Size: Pixel-precise size control
News Interval: Seconds between headline changes
Flash Interval: Headline flash animation timing
Featured Image: Show/hide post thumbnails with position control
Bottom Ticker: Scrolling ticker bar with custom label and speed
Colors: Full control over header, content, ticker background and text colors

💡

Access: Go to Appearance → Customize → Theme Options → TV Breaking News to configure all settings.

🌙 Dark Mode & 📱 PWA

Modern features for the best reader experience

🌙 Dark Mode

Zero-FOUC (no white flash on load)
Toggle button in all 6 header layouts
Remembers user preference (localStorage)
Customizable dark colors in Customizer
CSS variable system for consistent theming
Dark mode for all components (header, footer, cards, widgets)
High contrast mode support in dark mode

🎨 Dark Mode Colors

Dark Background color picker
Dark Surface/Card color picker
Dark Text color picker
Auto-derived surface, border, and deep colors
CSS variables with fallbacks throughout
Customizer changes apply globally

📱 PWA Settings

Enable/disable PWA support
Custom App Name & Short Name
Theme Color (browser toolbar)
Splash Screen Background color
Display Mode (Standalone, Fullscreen, Minimal UI)
Custom Offline Message

⚡ Service Worker

Network First strategy (best for news)
Cache First strategy (faster loads)
Images cached automatically
CSS/JS/Fonts: stale-while-revalidate
Styled offline fallback page
Auto-cleans old caches on update
Skips wp-admin & login pages

💡

PWA Icons: The manifest auto-generates all required icon sizes (72px to 512px) from your WordPress Site Icon (Appearance → Customize → Site Identity). Set a Site Icon before enabling PWA.

🔍 SEO & Schema

Built-in search engine optimization

📝 Meta & Open Graph

•
Homepage Meta Description: Custom description field
•
Posts/Pages: Auto-generated from excerpt
•
Open Graph: Title, description, image for social sharing
•
Twitter Cards: Large image summary format

📊 Schema Markup

•
Organization: Name, URL, logo structured data
•
Article Types: NewsArticle, Article, or BlogPosting
•
Breadcrumb: Navigation path schema
•
Configurable: Each schema type toggleable individually

✅

Plugin Compatible: If Yoast SEO or Rank Math is active, the theme's SEO features can be disabled to prevent duplicate meta tags. Use theme SEO for lightweight sites, or your preferred SEO plugin for advanced needs.

⚙️ 265+ Customizer Settings

All settings in Appearance → Customize → Theme Options

🔤

Typography

50+ font size controls, 2 font families, line heights

🎨

Colors

Primary, secondary, accent, dark mode colors

📐

Layout

Site width, content width, sidebar, columns

📰

Blog

Post layout, excerpt, meta, related posts

📢

Header, in-article, shortcode ad spots

🌐

Social

6 social links + share button config

Custom Widgets

4 purpose-built widgets for news & magazine sites

📦 Widget Areas

Sidebar: Main blog/post sidebar (left or right via Customizer)
Footer 1–4: Four footer widget columns
Header Ad: Advertisement banner widget area in header

🛠️ Additional Features

Everything else that makes this theme complete

📢 Breaking News Ticker

Scrolling horizontal ticker
Position: Top or Bottom (fixed)
Custom label text & colors
Configurable speed & separator
Category filter support
Bottom ticker body padding

🍪 Cookie Notice (GDPR)

Customizable message text
Accept button text & style
Privacy policy URL link
Dismissible by visitor
Cookie stores consent

📢 Announcement Bar

Site-wide announcement text
Optional link URL
Custom background color
Dismissible toggle
Show on homepage only option

👍 Post Reactions

Like/reaction button on posts
Customizable reaction icon
Show/hide like count
AJAX powered (no page reload)

🔄 Page Preloader

4 animation styles (Spinner, Dots, Pulse, Bars)
Custom background color
Smooth fade-out transition

📊 Reading Progress Bar

Shows scroll progress on posts
Custom color picker
Adjustable height (px)
Position control

🔗 Social Share

Facebook, Twitter/X, LinkedIn
Pinterest, WhatsApp, Telegram
Copy link button
Email share option
Position: above or below content

♿ Accessibility

Font size controls (A+ / A-)
High contrast toggle
Works in both light & dark mode
Scales all typography via CSS variables
ARIA labels & keyboard navigation

📢 Ad Management

Header ad widget area
In-article ad placement
Insert after paragraph # control
Before/after content ad spots
Shortcode ad spots

Colors & Typography

Full control over your site's visual identity

🎨 Default Color Palette

Primary#e74c3c

Secondary#1a1a2e

Accent#2980b9

Dark Card#16213e

Dark Surface#1f2937

Dark Text#e5e5e5

🔤 Typography Options

Body Font Family: System Default, Roboto, Open Sans, Lato, Poppins, Montserrat, Nunito, Source Sans Pro, Merriweather, Playfair Display, Cairo, Tajawal, Almarai, Noto Naskh Arabic, Amiri, Noto Nastaliq Urdu, Barlow, Mukta, and more
Heading Font Family: Same options as body font
50+ Font Size Controls: H1–H6, base, post title (archive & single), excerpt, meta, widget title, widget content, menu, sub-menu, button, form inputs, blockquote, breadcrumb, pagination, comments, footer text, tags, category badge, topbar, newsletter title, reading time, author name, author bio, and more
Line Heights: Body, headings, excerpt, post content, widget content, post title
Heading Font Weight: Normal, Medium, Semi-bold, Bold

Menu Locations

4 registered menu areas

📍 Available Menus

1
Primary Menu: Main site navigation in header
2
Top Bar Menu: Utility links in the top bar area
3
Footer Menu: Navigation links in footer area
4
Mobile Menu: Dedicated menu for mobile slide-in drawer

📱 Mobile Menu Features

•
Slide-in Drawer: Full-height panel from left/right
•
Hamburger Toggle: Animated hamburger icon in header
•
Sub-menu Accordion: Tap to expand child menus
•
Dark Mode Toggle: Included in mobile drawer
•
Overlay: Background overlay when drawer is open

Troubleshooting Guide

Common issues and solutions

❌ Theme not installing

Upload fails or times out

Solution: Increase PHP upload_max_filesize to 64M. The theme zip is large due to 45 skin images. Use FTP method instead.

❌ Dark mode flashes white

Brief white flash before dark mode loads

Solution: This was fixed in v1.1.0. Ensure you're on the latest version. The inline CSS in header.php prevents FOUC.

⚠️ Dark mode toggle not showing

Button missing on frontend

Solution: Go to Customize → Theme Options → Dark Mode and ensure "Enable Dark Mode Toggle" is checked. Fixed in v1.1.0 for all 6 header layouts.

⚠️ Font size A+/A- not working

Buttons click but text doesn't change

Solution: Update to v1.1.0. Previous versions set body { font-size } which was overridden by CSS variables. Now it overrides all CSS font variables directly.

ℹ️ PWA not showing install prompt

No "Add to Home Screen" appears

Solution: PWA requires HTTPS. Set a Site Icon in Customize → Site Identity. Check browser DevTools → Application → Manifest for errors.

ℹ️ RTL layout looks wrong

Some elements not mirrored

Solution: Enable RTL Mode in Customize → Theme Options → RTL Settings. Ensure WordPress language is set to an RTL language in Settings → General.

⚠️ Bottom ticker overlaps content

Fixed ticker covers page bottom

Solution: Update to v1.1.0. The theme now auto-adds padding-bottom: 50px to body and repositions the Back to Top button when bottom ticker is active.

ℹ️ Customizer dark colors don't apply

Changing dark mode colors has no effect

Solution: Update to v1.1.0. Previous versions had hardcoded dark colors. Now all dark mode CSS uses var(--ecst-dark-*) variables tied to Customizer settings.

Frequently Asked Questions

Common questions answered

Q: Do I need the Easy Custom Skin plugin?

The theme works perfectly without it. The plugin adds the 45 gem-stone skin selector for one-click color scheme changes. Without it, you can still customize all colors manually via the Customizer.

Q: Does the theme support WooCommerce?

The theme is designed primarily for news and magazine sites. While it may work with WooCommerce for basic shop pages, it's not optimized for e-commerce. Use it for blogs, news portals, magazines, and content-heavy sites.

Q: How do I enable dark mode?

Go to Appearance → Customize → Theme Options → Dark Mode. Enable "Dark Mode Toggle" — the moon/sun button will appear in your header across all 6 layouts. You can also set the default color mode.

Q: How does PWA work?

Enable PWA in Customize → Theme Options → PWA. Set your App Name and Site Icon. The theme generates a Web App Manifest and Service Worker dynamically — no extra files needed. Visitors on mobile will see the "Add to Home Screen" prompt.

Q: Is the theme translation ready?

Yes, fully translation-ready with a .pot file included. Compatible with WPML, Polylang, and Loco Translate. Full RTL support with a dedicated rtl.css stylesheet. Includes Arabic/Urdu font options.

Q: How do I set up TV Breaking News?

Go to Customize → Theme Options → TV Breaking News. Enable it, upload your 3D logo, configure the animation style, select a news category, and adjust the timing intervals. The overlay appears full-screen with auto-rotating headlines.

Q: Can I use a different header for mobile?

All 6 header layouts include responsive mobile versions with a hamburger menu and slide-in drawer. You can assign a separate Mobile Menu in Appearance → Menus for mobile-specific navigation.

Q: How many customizer settings are there?

Over 265 settings across 35 sections: Typography (50+), Colors, Layout, Blog, Header, Footer, Dark Mode, Breaking News, TV Breaking News, Schema, SEO, Social, Ads, Accessibility, PWA, and more.

Q: Does the theme work with page builders?

The theme is built with clean WordPress standards and works with Elementor, Beaver Builder, and the WordPress block editor (Gutenberg). The full-width page template removes sidebars for builder pages.

Q: Are updates free?

Yes, all future theme updates are free. You'll receive new features, bug fixes, and WordPress compatibility updates.

Changelog

Version history

v1.1.0 — Dark Mode & PWA Update

🌙 Fixed dark mode FOUC (flash of unstyled content) — zero white flash on page load
🌙 Dark mode toggle now appears in all 6 header layouts (was only in 3 & 6)
🌙 Fixed default mismatch for dark mode enable setting (Customizer vs frontend)
🌙 Replaced 51 hardcoded dark mode colors with CSS variables for Customizer control
🌙 Added auto-derived dark surface, border, and deep colors from card color
🌙 Fixed Header 4 (Dark) and Header 6 (Transparent) visibility in dark mode
📺 Added Breaking News Ticker position control (top or bottom)
📺 Fixed bottom ticker body padding and Back to Top button repositioning
📱 Added PWA support (Web App Manifest, Service Worker, offline page)
📱 Network First & Cache First caching strategies for PWA
♿ Fixed font size controls (A+/A-) to actually scale all CSS variable typography
♿ Replaced weak contrast filter with true high contrast mode (light & dark)
📄 Fixed single post padding in dark mode with full-width featured image
🔍 Audited all 37 get_theme_mod() default values against Customizer defaults

v1.0.0 — Initial Release

🎉 45 Gem-Stone Skins via Easy Custom Skin plugin
🎨 6 Header Layouts (News, Centered, Minimal, Dark, Business, Transparent)
📐 4 Footer Layouts (4-Column, Large First, Minimal, Newsletter)
📝 7 Post Layouts (3 List + 4 Grid variations)
🌙 Dark Mode with toggle and color customization
📺 TV Breaking News with 3D animated logo
📰 Breaking News Ticker with scrolling headlines
🔍 Built-in SEO: Schema, Open Graph, Meta Descriptions
📊 Reading Progress Bar, Post Views Counter, Reading Time
📑 Auto-generated Table of Contents
🔄 AJAX Load More pagination
♿ Accessibility controls (font size, high contrast)
🌐 Full RTL support with dedicated rtl.css
🍪 Cookie Notice (GDPR compliance)
📢 Announcement Bar
👍 Post Reactions (likes)
🔄 4 Preloader styles
📱 Responsive design with mobile slide-in menu
📢 Ad management (header, in-article, shortcode spots)
🔗 Social share buttons (8 platforms)
📦 4 Custom Widgets (Recent, Popular, Social, Author)
⚡ Performance options (lazy load, disable emojis/embeds)
🖨️ Print stylesheet included
⚙️ 265+ Customizer settings across 35 sections

Need Help?

Get support or learn more about the Easy Custom Skin ecosystem

📧 Contact Support 💎 Get Easy Custom Skin Plugin