Benutzerdefinierte Designs

SLAED CMS verwendet ein flexibles Vorlagensystem, das es Ihnen ermöglicht, das Aussehen Ihrer Website vollständig zu ändern, ohne den Kernsystemcode zu modifizieren. Dieser Leitfaden behandelt die Erstellung benutzerdefinierter Designs für Ihre SLAED CMS-Installation.

Inhaltsverzeichnis

Designstruktur

Jedes Design befindet sich in einem separaten Ordner im Verzeichnis templates/:

templates/
├── default/                 # Standarddesign
│   ├── index.html           # Hauptseitenvorlage
│   ├── basic.html           # Grundvorlage für Inhalte
│   ├── title.html           # Titelvorlage
│   ├── pagenum.html         # Paginierungsvorlage
│   ├── block-*.html         # Blockvorlagen
│   ├── *.html               # Spezialisierte Vorlagen
│   ├── theme.css            # Design-CSS
│   ├── system.css           # Systemstile
│   ├── blocks.css           # Blockstile
│   └── images/              # Design-Bilder
└── custom_theme/            # Benutzerdefiniertes Design
    ├── index.html
    └── ...                  # Andere Design-Dateien

Hauptvorlagen

Die Hauptvorlage definiert die Gesamtseitenstruktur:

<!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>

Vorlagenplatzhalter

  • {%lang%} - Seitensprache (ru, en, de, etc.)
  • {%title%} - Seitentitel
  • {%sitename%} - Seitenname
  • {%slogan%} - Seiten-Slogan
  • {%content%} - Hauptseiteninhalt
  • {%blocks%} - Seitenblöcke
  • {%theme%} - Aktueller Designname

Blocksystem

Blocktypen:

  • l - Linke Spalte
  • r - Rechte Spalte
  • c - Zentraler Bereich
  • d - Unten auf der Seite
  • s - Schwebende Blöcke
  • o - Schwebende Blöcke (Alternative)

Blockvorlagen

Für jeden Block sucht das System nach einer spezifischen Vorlage mit folgender Priorität:

  1. block-{block_id}.html - Individuelle Blockvorlage
  2. block-{module}.html - Modulspezifische Vorlage
  3. block-{position}.html - Positionsspezifische Vorlage (links, rechts, mitte, unten)
  4. block-all.html - Allgemeine Vorlage für alle Blöcke

Beispiel-Blockvorlage:

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

Vorlagen-API

Wichtige Vorlagenfunktionen:

// Grundvorlagenfunktion
function setTemplateBasic($tpl, $values = '') {
    global $theme, $conf;
    // Implementierung
}

// Blockvorlagenfunktion
function setTemplateBlock($tpl, $values = '') {
    // Implementierung
}

// Warnvorlagenfunktion
function setTemplateWarning($tpl, $settings) {
    // Implementierung
}

Erstellen benutzerdefinierter Designs

So erstellen Sie ein benutzerdefiniertes Design:

  1. Erstellen Sie einen neuen Ordner in templates/ mit Ihrem Designnamen
  2. Erstellen Sie die Hauptvorlagendateien
  3. Fügen Sie CSS-Stile hinzu
  4. Passen Sie die HTML-Struktur an

Struktur vorbereiten

mkdir templates/mein_design

Wesentliche Design-Dateien

Minimaler Satz von Dateien für ein neues Design:

  • index.html - Hauptvorlage
  • basic.html - Grundvorlage für Inhalte
  • block-all.html - Standard-Blockvorlage
  • theme.css - Design-Stile

Anpassen eines bestehenden Designs

So erstellen Sie ein Design basierend auf einem bestehenden:

cp -r templates/default templates/mein_design

CSS-Optimierung

SLAED CMS unterstützt CSS-Optimierung:

  • CSS-Komprimierung
  • Dateizusammenführung
  • Minimierung
  • Browser-Caching

Systemstile

SLAED CMS stellt Basis-CSS-Klassen für schnelles Styling bereit:

  • .sl_block - Basis-Blockklasse
  • .sl_content - Inhaltsbereich
  • .sl_form - Formulare
  • .sl_button - Schaltflächen
  • .sl_table - Tabellen

Benutzerdefinierte Stile

So fügen Sie benutzerdefinierte Stile hinzu:

  1. Erstellen Sie theme.css in Ihrem Design-Ordner
  2. Fügen Sie es in index.html ein:
<link rel="stylesheet" href="templates/{%theme%}/theme.css">

Erweiterte Funktionen

Bedingte Vorlagen

Vorlagen können bedingte Konstrukte enthalten:

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

Schleifen in Vorlagen

Zum Anzeigen von Elementlisten:

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

Responsives Design

Für die Erstellung responsiver Designs verwenden Sie:

/* Mobile Geräte */
@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;
    }
}

Vorlagenbeispiele

News-Vorlage

Datei: 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>

Formularvorlage

Datei: 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>
Zurück Weiter

Weiterlesen

Leistung Sicherheit Admin-Leitfaden