Website-Design und Themes
Dieser Bereich lädt automatisch alle Design-Dateien für deine Website. Hier werden das gewählte Theme, benutzerdefinierte Schriftarten, individuelle CSS-Anpassungen und spezielle Design-Varianten geladen. Das System sorgt dafür, dass deine Website immer mit dem aktuellsten Design angezeigt wird.
Voraussetzungen
- Eine Website muss erstellt und konfiguriert sein
- Theme-Einstellungen müssen in der Website-Konfiguration gespeichert sein
- Optional: Benutzerdefinierte Schriftarten und CSS können konfiguriert sein
Aufbau des Design-Systems
Das Design wird in mehreren Schichten geladen:
Bootstrap-Basis-Theme Das Standard-Bootstrap-Theme wird als Grundlage für alle Design-Elemente geladen.
Benutzerdefinierte Schriftarten Falls eine spezielle Schriftart gewählt wurde, wird diese automatisch von Google Fonts oder anderen Quellen geladen.
Website-spezifisches CSS Individuelle Farben, Abstände und Design-Anpassungen werden automatisch generiert und geladen.
Globales CSS Falls du eigenes CSS in den Website-Einstellungen hinterlegt hast, wird dieses zusätzlich geladen.
Theme-Varianten Spezielle Theme-Varianten wie das weboffice-Theme werden bei Bedarf zusätzlich geladen.
Automatisch geladene Design-Dateien
Bootstrap Theme (bootstrap.min.css) Die Basis für responsive Design, Buttons, Formulare und Layout-Elemente.
Schriftart-Stylesheet Wird nur geladen, wenn eine benutzerdefinierte Schriftart gewählt wurde (nicht die Standard-Schriftart).
Theme CSS (theme.css) Enthält alle deine individuellen Farb- und Design-Einstellungen, automatisch aus deiner Konfiguration generiert.
Globales CSS (theme.css) Dein eigenes CSS aus den globalen Website-Einstellungen, falls vorhanden.
weboffice Theme (weboffice.css) Wird zusätzlich geladen, wenn das spezielle weboffice-Theme aktiviert ist.
Schriftarten-Management
Standard-Schriftarten System-Schriftarten werden direkt verwendet, ohne externe Dateien zu laden.
Google Fonts Integration Benutzerdefinierte Schriftarten werden automatisch von Google Fonts geladen.
Performance-Optimierung Schriftarten werden nur geladen, wenn sie tatsächlich verwendet werden.
Fallback-Schriftarten Falls eine Schriftart nicht geladen werden kann, greifen automatisch Fallback-Schriftarten.
Live-CSS-Updates (Entwicklungsmodus)
Im Entwicklungsmodus wird ein spezielles Skript geladen:
Automatische Aktualisierung CSS-Dateien werden alle 2 Sekunden automatisch neu geladen.
Cache-Umgehung Durch Zeitstempel-Parameter wird der Browser-Cache umgangen.
Sofortige Vorschau Änderungen an Design-Einstellungen werden sofort sichtbar, ohne die Seite neu zu laden.
Theme-Varianten
Standard-Theme Verwendet die Bootstrap-Basis mit deinen individuellen Anpassungen.
weboffice-Theme Ein spezielles, optimiertes Theme mit erweiterten Design-Optionen und weboffice-spezifischen Elementen.
Benutzerdefinierte Themes Möglichkeit für vollständig individuelle Theme-Entwicklung.
CSS-Generierung
Automatische Erstellung Dein individuelles CSS wird automatisch aus den Theme-Einstellungen generiert.
Farb-System Primär- und Sekundärfarben werden automatisch in alle Design-Elemente integriert.
Responsive Anpassungen Alle CSS-Regeln sind automatisch responsive und funktionieren auf allen Geräten.
Browser-Kompatibilität Das generierte CSS ist mit allen modernen Browsern kompatibel.
Performance-Optimierung
Minimierte Dateien Alle CSS-Dateien sind minimiert für schnellere Ladezeiten.
Caching Design-Dateien werden im Browser zwischengespeichert.
Bedarfsgerechtes Laden Nur benötigte Design-Komponenten werden geladen.
CDN-Unterstützung External Schriftarten werden über schnelle CDNs geladen.
Tipps und Hinweise
- Schriftart-Performance: Verwende nicht zu viele verschiedene Schriftarten
- CSS-Optimierung: Halte benutzerdefiniertes CSS schlank und effizient
- Browser-Cache: Design-Änderungen können durch Browser-Cache verzögert sichtbar werden
- Mobile Optimierung: Alle Designs sind automatisch mobile-optimiert