Search by

diversworld / contao-diversworld-theme-bundle

diversworld

Diversworld theme for Contao CMS

Package info

github.com/diversworld/contao-diversworld-theme-bundle

Issues

Language:SCSS

Type:contao-bundle

pkg:composer/diversworld/contao-diversworld-theme-bundle

Security

Advisories: 0

Aikido package health analysis

Transparency log

Statistics

Installs: 18

Dependents: 0

Suggesters: 0

Stars: 1

1.1.5 2026-09-18 16:26 UTC

Requires

Requires (Dev)

None

Suggests

None

Provides

None

Conflicts

None

Replaces

None

GPL-3.0-or-later 9796b88457c7f9a90ae3f26054ac999a19c7dcf9

themebundlecontaodiveclub

Published on Packagist.org on 2026-09-18 16:27 UTC

This package is auto-updated.

Last update: 2026-09-18 16:27:20 UTC

README

License Contao PHP

Ein modernes, Contao-konformes Theme-Bundle mit responsivem Design, Theme Helper Integration und vollständiger Barrierefreiheit (WCAG 2.1 AA).

Features

  • ✅ Responsive Header mit Logo und Multi-Level-Navigation
  • ✅ SASS-basierte Stylesheets mit automatischer Optimierung
  • ✅ Contao 5.7+ & 6.0+ Support vollständig getestet
  • ✅ Accessibility (a11y) WCAG 2.1 AA Best-Practices
  • ✅ Theme Helper Integration für Tag-basierte Inhaltsverwaltung
  • ✅ Performance-optimiert mit statischen CSS-Flags
  • ✅ Modern PHP Stack PSR-4, Strict Types, Symfony 7.x

Installation

1. Via Composer

composer require diversworld/contao-diversworld-theme-bundle

2. Dependencies installieren

npm install
npm run build

3. Contao aktualisieren

php bin/console cache:clear

4. Beispielseite optional installieren

Die Migration Install optional Diversworld Theme example site wird im Contao-Installtool als ausstehende Migration angeboten. Wenn sie ausgewählt und ausgeführt wird, installiert sie eine vollständige Diversworld-Beispielseite mit Seitenbaum, Layouts, Artikeln, Inhaltselementen, Frontend-Modulen sowie Beispielinhalten für News, Termine, FAQ, Newsletter und Formulare.

php bin/console contao:migrate --with-deletes

Die Migration wird nur angeboten, wenn die benötigten Contao-Tabellen leer sind. Auf einer bereits verwendeten Installation wird sie nicht ausgeführt und verändert keine vorhandenen Seiten, Artikel oder Inhalte. Im CLI wird sie zusammen mit den übrigen ausstehenden Migrationen ausgeführt; im Contao-Installtool kann der Nutzer sie abwählen.

5. Theme im Backend auswählen

Im Contao Backend unter Design → Layouts das Theme "Diversworld" auswählen und den Layout-Typ konfigurieren.

Entwicklung

CSS im Watch-Modus kompilieren

npm run dev

Dies startet SASS im Watch-Modus und kompiliert SCSS-Änderungen automatisch zu public/css/diversworld.css.

Nur einmalig build

npm run build

Erstellt die komprimierten CSS-Dateien für Production.

Projektstruktur

contao-diversworld-theme-bundle/
├── src/
│   ├── ContaoDiversworldThemeBundle.php      # Bundle-Klasse
│   ├── ContaoManager/
│   │   └── Plugin.php                        # Contao Manager Integration
│   └── EventListener/
│       └── LayoutEventListener.php           # CSS-Loading via Event
├── config/
│   └── services.yaml                         # Dependency Injection
├── contao/
│   ├── config/
│   │   └── config.php                        # Theme-Tags & Globale Config
│   └── templates/
│       ├── page/layout/
│       │   └── diversworld.html.twig         # Master Layout
│       ├── mod_navigation_diversworld.html.twig   # Navigation Wrapper
│       └── nav_diversworld.html.twig         # Rekursive Navlisten
├── assets/
│   ├── scss/                                 # SASS Source Files
│   ├── js/                                   # JavaScript (optional)
│   └── css/                                  # Kompilierte CSS (nicht committen)
└── public/
    └── css/
        └── diversworld.css                   # Veröffentlichte CSS

Konfiguration

CSS Loading

Das Bundle lädt CSS automatisch via LayoutEventListener:

// In src/EventListener/LayoutEventListener.php
$GLOBALS['TL_CSS'][] = 'bundles/contaodiversworldtheme/css/diversworld.css|static';

Das |static Flag optimiert Browser-Caching.

Layout-Struktur

Das Master-Layout (contao/templates/page/layout/diversworld.html.twig) definiert folgende Slots:

Slot Zweck Optionen
header Logo + Navigation Responsive Flex-Layout
hero Hero-Sektion Full-Width Container
left Linke Sidebar Optional
main Hauptinhaltsbereich Responsive Grid
right Rechte Sidebar Optional
footer Footer-Bereich Multi-Column Layout

Navigation

Das Bundle enthält spezialisierte Navigation-Templates:

  • mod_navigation_diversworld.html.twig: Frontend-Modul-Wrapper mit Barrierefreiheit
  • nav_diversworld.html.twig: Rekursive Navigation-Liste mit Multi-Level-Support

Beide Templates nutzen Contao's Standard-Datenvertrag:

  • items|raw für vorgenerierte HTML-Navigation
  • level_1, level_2, level_3 CSS-Klassen
  • active, trail, submenu State-Klassen

CSS Classes

Navigation

<!-- Level 1 Navigation -->
<ul class="level_1">
  <li class="active">
    <strong>Aktive Seite</strong>
    <!-- Level 2 Submenu -->
    <ul class="level_2">
      <li class="trail"><a href="#">Aktueller Pfad</a></li>
    </ul>
  </li>
</ul>

Verfügbare Klassen:

  • .level_1, .level_2, .level_3 - Navigations-Ebene
  • .active - Aktuelle Seite
  • .trail - Pfad zur aktuellen Seite
  • .submenu - Hat Untermenü

Barrierefreiheit (Accessibility)

Das Bundle implementiert WCAG 2.1 AA Standards:

  • ✅ Skip-Links: <a href="#main" class="invisible">Navigation überspringen</a>
  • ✅ ARIA-Labels: aria-label, aria-current="page", aria-haspopup
  • ✅ Semantic HTML: <nav>, <main>, <footer>, <aside>, <header>
  • ✅ Kontrastverhalten: Optimierte Farben (s. SCSS)
  • ✅ Fokus-Management: Sichtbare Focus-States

Anforderungen

  • PHP: ≥ 8.2
  • Contao: ≥ 5.7 oder ≥ 6.0
  • Node.js (für SASS-Builds): ≥ 18.x

Optional

  • Keine zusätzlichen Theme- oder Component-Bundles erforderlich

Kompatibilität

Version Contao 5.7 Contao 6.0+ Status
1.0.0 ✅ ✅ Stabil

Alle APIs sind Forward-Compatible. Das Bundle wurde gegen beide Versionen getestet.

Lizenz

Dieses Bundle unterliegt der LGPL-3.0-or-later Lizenz.

This program is free software: you can redistribute it and/or modify it under the
terms of the GNU Lesser General Public License as published by the Free Software
Foundation, either version 3 of the License, or (at your option) any later version.

Siehe LICENSE für vollständigen Text.

Support & Entwicklung

Probleme oder Feature-Requests:

# Repository auschecken
git clone https://github.com/diversworld/contao-diversworld-theme-bundle.git

# Entwicklung starten
npm install
npm run dev  # SASS Watch-Modus

Credits

Entwickelt für Diversworld als moderne Theme-Lösung für Contao CMS.

Dokumentation zuletzt aktualisiert: 2026-08-31
Bundle-Version: 1.0.0
Autor: Diversworld