Custom Themes

SLAED CMS uses a flexible template system that allows you to completely change the look of your site without modifying the core system code. This guide covers creating custom themes for your SLAED CMS installation.

Table of Contents

Theme Structure

Each theme is located in a separate folder in the templates/ directory:

templates/
├── default/                 # Default theme
│   ├── index.html           # Main page template
│   ├── basic.html           # Basic content template
│   ├── title.html           # Title template
│   ├── pagenum.html         # Pagination template
│   ├── block-*.html         # Block templates
│   ├── *.html               # Specialized templates
│   ├── theme.css            # Theme CSS
│   ├── system.css           # System styles
│   ├── blocks.css           # Block styles
│   └── images/              # Theme images
└── custom_theme/            # Custom theme
    ├── index.html
    └── ...                  # Other theme files

Main Templates

The main template defines the overall page structure:

<!DOCTYPE html>
<html lang="{%lang%}">
<head>
    <meta charset="UTF-8">
    <title>{%title%}</title>
    <link rel="stylesheet" href="templates/{%theme%}/theme.css">
</head>
<body>
    <header>
        <h1>{%sitename%}</h1>
        <p>{%slogan%}</p>
    </header>
    
    <nav>
        <!-- Navigation -->
    </nav>
    
    <main>
        {%content%}
    </main>
    
    <aside>
        {%blocks%}
    </aside>
    
    <footer>
        <p>&copy; 2026 {%sitename%}</p>
    </footer>
</body>
</html>

Template Placeholders

  • {%lang%} - Site language (ru, en, de, etc.)
  • {%title%} - Page title
  • {%sitename%} - Site name
  • {%slogan%} - Site slogan
  • {%content%} - Main page content
  • {%blocks%} - Site blocks
  • {%theme%} - Current theme name

Block System

Block types:

  • l - Left column
  • r - Right column
  • c - Center area
  • d - Bottom of page
  • s - Floating blocks
  • o - Floating blocks (alternative)

Block Templates

For each block, the system looks for a specific template with the following priority:

  1. block-{block_id}.html - Individual block template
  2. block-{module}.html - Module-specific template
  3. block-{position}.html - Position-specific template (left, right, center, down)
  4. block-all.html - General template for all blocks

Example block template:

<div class="block block-{%position%}">
    <h3>{%title%}</h3>
    <div class="block-content">
        {%content%}
    </div>
</div>

Template API

Key template functions:

// Basic template function
function setTemplateBasic($tpl, $values = '') {
    global $theme, $conf;
    // Implementation
}

// Block template function
function setTemplateBlock($tpl, $values = '') {
    // Implementation
}

// Warning template function
function setTemplateWarning($tpl, $settings) {
    // Implementation
}

Creating Custom Themes

To create a custom theme:

  1. Create a new folder in templates/ with your theme name
  2. Create the main template files
  3. Add CSS styles
  4. Customize HTML structure

Preparing Structure

mkdir templates/my_theme

Essential Theme Files

Minimum set of files for a new theme:

  • index.html - Main template
  • basic.html - Basic content template
  • block-all.html - Default block template
  • theme.css - Theme styles

Adapting Existing Theme

To create a theme based on an existing one:

cp -r templates/default templates/my_theme

CSS Optimization

SLAED CMS supports CSS optimization:

  • CSS compression
  • File merging
  • Minification
  • Browser caching

System Styles

SLAED CMS provides base CSS classes for quick styling:

  • .sl_block - Base block class
  • .sl_content - Content area
  • .sl_form - Forms
  • .sl_button - Buttons
  • .sl_table - Tables

Custom Styles

To add custom styles:

  1. Create theme.css in your theme folder
  2. Include it in index.html:
<link rel="stylesheet" href="templates/{%theme%}/theme.css">

Advanced Features

Conditional Templates

Templates can contain conditional constructs:

<!-- IF {%user_logged%} -->
<div class="user-panel">
    Welcome, {%username%}!
</div>
<!-- ELSE -->
<div class="login-form">
    <a href="/login">Login</a>
</div>
<!-- ENDIF -->

Loops in Templates

For displaying lists of elements:

<!-- BEGIN item -->
<div class="item">
    <h4>{%item.title%}</h4>
    <p>{%item.description%}</p>
</div>
<!-- END item -->

Responsive Design

For creating responsive themes, use:

/* Mobile devices */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 10px;
    }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        width: 90%;
    }
}

/* Desktops */
@media (min-width: 1025px) {
    .container {
        width: 80%;
        max-width: 1200px;
    }
}

Template Examples

News Template

File: news-view.html

<article class="news-item">
    <header>
        <h1>{%title%}</h1>
        <div class="meta">
            <span class="date">{%date%}</span>
            <span class="author">{%author%}</span>
        </div>
    </header>
    <div class="content">
        {%content%}
    </div>
    <footer>
        <div class="tags">{%tags%}</div>
        <div class="rating">{%rating%}</div>
    </footer>
</article>

Form Template

File: form-basic.html

<form method="post" action="{%action%}" class="sl_form">
    <div class="form-group">
        <label for="title">{%title_label%}</label>
        <input type="text" id="title" name="title" value="{%title_value%}" required>
    </div>
    <div class="form-group">
        <label for="content">{%content_label%}</label>
        <textarea id="content" name="content" required>{%content_value%}</textarea>
    </div>
    <div class="form-actions">
        <button type="submit" class="sl_button">{%submit_text%}</button>
        <a href="{%cancel_url%}" class="sl_button secondary">{%cancel_text%}</a>
    </div>
</form>
Previous Next

Read Next

Performance Security Admin Guide