Theming Guide

SiteX CMS uses a clean, template-based theming system. Customize the look and feel of your site by modifying templates and CSS. 

Theme Structure

themes/
└── default/
    ├── assets/
    │   ├── css/
    │   │   └── style.css
    │   ├── js/
    │   │   └── app.js
    │   └── img/
    ├── layouts/
    │   ├── header.php
    │   └── footer.php
    ├── pages/
    │   ├── home.php
    │   ├── article.php
    │   ├── blog.php
    │   ├── blog-post.php
    │   ├── category.php
    │   ├── top.php
    │   ├── author.php
    │   └── page.php
    └── theme.json

theme.json

Each theme has a manifest file:

{
    "name": "Default Theme",
    "version": "1.0.0",
    "author": "SiteX",
    "description": "The default SiteX CMS theme",
    "supports": ["dark-mode", "featured-images", "custom-colors"]
}

Template Variables

Templates receive data from controllers via PHP variables. Common variables available in all templates:

• $siteName - Site name from settings
• $siteUrl - Full site URL
• $pageTitle - Current page title
• $currentPath - Current URL path

Customizing CSS

The easiest way to customize your site's appearance:

1. Copy the default theme to a new folder (e.g., themes/mytheme/)
2. Update theme.json with your theme name
3. Modify the CSS variables in :root to change colors, fonts, and spacing
4. Set your theme in Settings → Appearance

CSS Variables

Key CSS variables you can customize:

:root {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-bg: #ffffff;
    --color-text: #1e293b;
    --color-text-muted: #64748b;
    --font-heading: 'Inter', sans-serif;
    --font-body: system-ui, sans-serif;
    --radius: 12px;
    --max-width: 1200px;
}

Dark Mode

SiteX supports dark mode via the [data-theme="dark"] CSS selector. Define dark mode overrides for your custom theme by setting variables under this selector.