Inhaltsverzeichnis

  1. Einführung

  2. Was sind Dolibarr-Themen?

  3. Warum das Design ändern?

  4. In Dolibarr verfügbare Standardthemen

  5. Aktivieren eines Designs über die Benutzeroberfläche

  6. Festlegen eines Standarddesigns für alle Benutzer

  7. Anpassen der Designeinstellungen

  8. Erstellen Sie Ihr eigenes Design

  9. Vorhandene Designs sicher ändern

  10. Verzeichnisstruktur eines Dolibarr-Themas

  11. CSS und LESS in Dolibarr-Themes

  12. Hinzufügen von benutzerdefinierten Logos und Branding

  13. Themenkompatibilität mit Dolibarr-Versionen

  14. Überlegungen zum Responsive Design

  15. Verwenden von von der Community bereitgestellten Designs

  16. Fehlerbehebung bei Designproblemen

  17. Best Practices für die Themengestaltung

  18. Multicompany-Theme-Konfiguration

  19. Überlegungen zu Sicherheit und Leistung

  20. Fazit

1. Einleitung

Die Benutzeroberfläche (UI) von Dolibarr spielt eine Schlüsselrolle für Benutzerfreundlichkeit, Effizienz und Branding. Dolibarr unterstützt mehrere Themes, und Administratoren und Entwickler können visuelle Stile ändern, anpassen oder völlig neue erstellen. Diese Anleitung führt Sie durch den gesamten Prozess der Änderung und Verwaltung von Themes in Dolibarr.

2. Was sind Dolibarr-Themen?

Themes in Dolibarr sind Sammlungen von Stylesheets (CSS/LESS) und Bildern, die das Erscheinungsbild der Anwendung definieren. Ein Theme steuert:

  • Farben und Schriftarten

  • Menüaufbau

  • Schaltflächenstile

  • Hintergründe und Symbolsätze

Jedes Thema befindet sich in der /htdocs/theme/ Verzeichnis und kann auf Benutzer- oder Systemebene ausgewählt werden.

3. Warum das Design ändern?

Gründe sind:

  • Visuelle Anpassung zur Berücksichtigung des Firmenbrandings

  • Verbesserung der Zugänglichkeit für bestimmte Benutzer

  • Verbesserung der Benutzerfreundlichkeit auf verschiedenen Bildschirmgrößen

  • Abstimmung der Dolibarr-Benutzeroberfläche mit anderen Geschäftstools

Eine bessere Benutzeroberfläche kann die Effizienz und Zufriedenheit der Mitarbeiter steigern.

4. In Dolibarr verfügbare Standardthemen

Zu den gängigen integrierten Designs gehören:

  • Oblyon (modern und reaktionsschnell)

  • Eldy (klassisch und weithin unterstützt)

  • MD (Vom Materialdesign inspiriert)

Jedes Design wird gepflegt, um mit den Kernaktualisierungen von Dolibarr übereinzustimmen.

5. Aktivieren eines Designs über die Benutzeroberfläche

So ändern Sie das Design für einen Benutzer:

  1. Melden Sie sich als Benutzer an

  2. Gehe zu Menü oben rechts > Persönliche Einstellungen

  3. Der Anzeige-Eigenschaften, wählen Sie das gewünschte Thema

  4. Änderungen speichern und Seite aktualisieren

Diese Änderung betrifft nur den aktuellen Benutzer.

6. Festlegen eines Standarddesigns für alle Benutzer

So wenden Sie ein Design systemweit an:

  1. Als Administrator anmelden

  2. Gehe zu Setup > Anzeige

  3. Wählen Sie das Standarddesign unter Schnittstellenoptionen

  4. Deaktivieren Sie optional die Themenauswahl, um Konsistenz zu erzwingen

Nützlich für das Branding oder die Standardisierung des Erscheinungsbilds in Teams.

7. Anpassen der Designeinstellungen

Einige Themen wie Oblyon bieten konfigurierbare Elemente:

  • Seitenleiste einklappen

  • Symbolsatzauswahl

  • Schriftgröße und Abstand

Diese können in den Benutzereinstellungen oder, falls unterstützt, über das Admin-Panel angepasst werden.

8. Erstellen Sie Ihr eigenes Design

Schritte:

  1. Kopieren Sie einen vorhandenen Themenordner aus /htdocs/theme/

  2. Benennen Sie es um (z. B. mytheme)

  3. Aktualisierung main.style.css.php und Bildreferenzen

  4. Legen Sie den Themennamen in theme.inc.php

Sobald Ihr Design vorhanden ist, wird es in der Dropdown-Liste zur Auswahl angezeigt.

9. Vorhandene Designs sicher ändern

So vermeiden Sie Probleme:

  • Bearbeiten Sie niemals die Kerndesigndateien direkt

  • Stattdessen kopieren und in einem benutzerdefinierten Design überschreiben

  • Verwenden Sie Browser-Entwicklungstools, um Klassen und Selektoren zu identifizieren

Beschränken Sie Ihre Änderungen auf ein Minimum, um zukünftige Upgrades zu vereinfachen.

10. Verzeichnisstruktur eines Dolibarr-Themas

Typischer Inhalt eines Themenordners:

  • theme.inc.php: Metadaten

  • main.style.css.php: Haupt-CSS-Logik

  • img/: Ordner für Logos, Icons

  • style.css: Fallback- oder erweiterte Stile

Einige Designs verwenden LESS für eine einfachere Stilverwaltung.

11. CSS und LESS in Dolibarr-Themes

Dolibarr unterstützt die dynamische CSS-Generierung:

  • main.style.css.php erstellt Stile mithilfe von PHP-Variablen

  • LESS-Dateien können kompiliert werden, wenn Ihr Design dies unterstützt

Fortgeschrittene Benutzer können Variablen verwenden, um Farbschemata, Schriftgrößen usw. zu steuern.

12. Hinzufügen von benutzerdefinierten Logos und Branding

So ändern Sie Logos:

  1. Gehe zu Setup > Firma/Organisation

  2. Laden Sie eine neue Logodatei hoch

  3. Das Logo wird in Kopfzeilen und PDF-Dokumenten angezeigt

Für themenspezifische Logos platzieren Sie diese im Theme img/ Verzeichnis und referenzieren Sie sie in CSS.

13. Themenkompatibilität mit Dolibarr-Versionen

Beim Upgrade von Dolibarr:

  • Testen Sie benutzerdefinierte Designs immer zuerst auf der Bühne

  • Suchen Sie nach veralteten Stilen oder neuen HTML-Strukturen

  • Überprüfen Sie die Versionshinweise auf Änderungen an der Benutzeroberfläche

Inkompatible Designs können Anzeigeprobleme oder fehlerhafte Layouts verursachen.

14. Überlegungen zum Responsive Design

Moderne Themen wie Oblyon sind mobilfreundlich:

  • Testen Sie auf verschiedenen Bildschirmgrößen

  • Verwenden Sie flexible Breiten und Medienabfragen

  • Vermeiden Sie feste Pixellayouts für Navigationsleisten

Stellen Sie sicher, dass wichtige UI-Elemente auf Tablets und Smartphones klar angezeigt werden.

15. Verwenden von von der Community bereitgestellten Designs

Themen finden Sie unter:

Vor der Verwendung eines Community-Designs:

  • Überprüfen Sie die Kompatibilität mit Ihrer Version

  • Suchen Sie nach unnötigen oder unsicheren Skripten

  • Suchen Sie nach Dokumentation und Supportoptionen

16. Fehlerbehebung bei Designproblemen

Symptome:

  • Leere Seiten oder fehlerhafte Layouts

  • Fehlende Symbole oder CSS wird nicht geladen

Solutions:

  • Löschen Sie den Browser-Cache

  • Aktivieren Sie den Entwicklermodus in Dolibarr

  • Überprüfen Sie die Browserkonsole auf Fehler

  • Vergleichen Sie die Dateiberechtigungen auf dem Server

17. Best Practices für die Themengestaltung

  • Arbeiten Sie immer in einer Kopie eines vorhandenen Designs

  • Verwenden Sie die Versionskontrolle (z. B. Git), um Änderungen zu verwalten

  • Dokumentieren Sie Ihre Außerkraftsetzungen für zukünftige Updates

  • Gründliche Tests in allen gängigen Browsern

Achten Sie auf ein klares, lesbares und mit dem Unternehmensbranding übereinstimmendes Design.

18. Multicompany-Theme-Konfiguration

Bei Verwendung des Multicompany-Moduls:

  • Jeder Entität kann ein eigenes Thema zugewiesen werden

  • Nützlich für Franchise-Modelle oder Tochtergesellschaften

Konfigurieren Sie dies unter Setup > Mehrere Unternehmen (wenn das Modul aktiviert ist).

19. Sicherheits- und Leistungsaspekte

  • Minimieren Sie die Verwendung großer Hintergrundbilder oder schwerer Schriftarten

  • Komprimieren Sie CSS-Dateien, wenn möglich

  • Vermeiden Sie Inline-Skripte, die XSS-Risiken bergen könnten

  • Wenden Sie nur die erforderlichen Designfunktionen an, um eine Überladung zu vermeiden

20. Fazit

Durch Ändern des Dolibarr-Designs können Sie die ERP-Oberfläche aus ästhetischen, markenbezogenen oder funktionalen Gründen personalisieren. Egal, ob Sie ein integriertes Design verwenden, ein vorhandenes anpassen oder ein neues Design von Grund auf neu entwickeln – das Verständnis der Funktionsweise von Designs gewährleistet eine reibungslose Bereitstellung und Benutzerzufriedenheit.