Inhaltsverzeichnis

  1. Einführung

  2. Was ist das Oblyon-Thema?

  3. Warum sollten Sie Oblyon für Ihre Dolibarr-Schnittstelle wählen?

  4. Installieren des Oblyon-Themas

  5. Aktivieren und Konfigurieren von Oblyon

  6. Die Struktur des Themas verstehen

  7. Anpassen von Farben und Schriftarten

  8. Ändern von Layout und Navigation

  9. Branding der Anmelde- und Startseiten

  10. Verwenden von benutzerdefiniertem CSS mit Oblyon

  11. Integration von Firmenlogos und visueller Identität

  12. Responsive Design und mobile Optimierung

  13. Verwalten von Updates für Oblyon

  14. Kompatibilität mit Modulen und Erweiterungen

  15. Erweiterte Anpassung durch Vorlagenüberschreibungen

  16. Leistungsüberlegungen

  17. Sicherheit und UI-Anpassung

  18. Community-Feedback und Anwendungsfälle

  19. Best Practices für UI-Design in ERP-Systemen

  20. Fazit und strategische Empfehlungen

1. Einleitung

Dolibarr ist eine Open-Source-ERP- und CRM-Lösung für Unternehmen jeder Größe. Eine ihrer wichtigsten Stärken ist ihre Modularität und Flexibilität, die sich auch auf die Benutzeroberfläche (UI) erstreckt. Unter den verschiedenen verfügbaren Themes ist Oblyon eines der beliebtesten und optisch ansprechendsten. Dieser Artikel erläutert, wie Sie die Dolibarr-Benutzeroberfläche mithilfe des Oblyon-Themes vollständig anpassen können, um ein benutzerzentriertes, markenorientiertes und intuitives Erlebnis zu schaffen.

2. Was ist das Oblyon-Thema?

Oblyon ist ein modernes, responsives Theme, das das visuelle Erlebnis von Dolibarr-Nutzern verbessert. Es ersetzt die Standardoberfläche durch ein übersichtlicheres, professionelleres Layout und unterstützt mobile Reaktionsfähigkeit und verbesserte Benutzerfreundlichkeit.

Features sind:

  • Flaches Design und symbolbasierte Menüs

  • Verbesserte Seitenleistennavigation

  • Kompatibilität mit Mobilgeräten und Tablets

  • Klare Typografie und Abstände

  • Unterstützung für White-Labeling und benutzerdefiniertes Branding

3. Warum sollten Sie Oblyon für Ihre Dolibarr-Schnittstelle wählen?

Oblyon ist ideal für Unternehmen, die Folgendes wollen:

  • Ein professionelles Erscheinungsbild für kundenorientierte Schnittstellen

  • Einfachere Navigation für nicht-technische Benutzer

  • Ein responsives Design für alle Geräte

  • Visuelle Konsistenz mit ihrer Marke

Seine Flexibilität und Kompatibilität mit den meisten Dolibarr-Modulen machen es zur ersten Wahl.

4. Installation des Oblyon-Themes

So installieren Sie Oblyon:

  1. Laden Sie das Design von Dolistore oder GitHub herunter.

  2. Laden Sie es hoch auf die /theme/ Verzeichnis in Ihrer Dolibarr-Installation.

  3. Gehen Sie zu „Startseite > Einstellungen > Anzeige“

  4. Wählen Sie „Oblyon“ aus der Liste der verfügbaren Designs.

  5. Speichern und die Seite neu laden.

Überprüfen Sie vor der Installation die Kompatibilität mit Ihrer Dolibarr-Version.

5. Aktivieren und Konfigurieren von Oblyon

Nach der Aktivierung:

  • Navigieren Sie zu „Startseite > Einstellungen > Anzeige“

  • Wählen Sie Oblyon in der Themenauswahl

  • Aktivieren Sie zusätzliche UI-Einstellungen: Kompaktansicht, festes oberes Menü usw.

  • Verwenden Sie das Modul "Oblyon Config" (falls installiert), um erweiterte Einstellungen zu verwalten

6. Die Struktur des Themas verstehen

Schlüsselkomponenten:

  • style.css: Haupt-Stylesheet

  • tpl/: Vorlagendateien für verschiedene Seiten

  • img/: Symbole und Logos

  • theme_vars.inc.php: Enthält Designvariablen

Die Vertrautheit mit diesen Dateien ist für eine umfassendere Anpassung hilfreich.

7. Anpassen von Farben und Schriftarten

So ändern Sie die Farben:

  • Bearbeiten style.css oder verwenden Sie eine benutzerdefinierte CSS-Überschreibung

  • Aktualisieren Sie Variablen wie --color-primary, --color-secondary

Für Schriftarten:

  • Laden Sie Webfonts in der <head> Abschnitt

  • Mit CSS-Selektoren auf Textkörper oder Überschriften anwenden

Verwenden Sie einheitliche Markenfarben, um die UI-Kohäsion zu verbessern.

8. Layout und Navigation ändern

Zu den Layoutanpassungen gehören:

  • Neuanordnung von Menüs über CSS- oder JS-Overrides

  • Hinzufügen fester Kopf- oder Fußzeilen

  • Ändern des Seitenleistenverhaltens (standardmäßig reduziert/erweitert)

Fortgeschrittene Benutzer können bearbeiten tpl/mainmenu.tpl.php kombiniert mit einem nachhaltigen Materialprofil. tpl/topmenu.tpl.php für die Menülogik.

9. Branding der Login- und Homepages

Anpassungen der Anmeldeseite:

  • Ersetzen img/login_background.jpg mit einem benutzerdefinierten Bild

  • Ändern login.tpl.php Layout anpassen

  • Firmenlogo und Begrüßungstext hinzufügen

Homepage:

  • Anpassen von Dashboard-Widgets

  • Anzeigen von Ankündigungen oder benutzerspezifischen Kennzahlen

10. Verwenden von benutzerdefiniertem CSS mit Oblyon

Beste Übung:

  • Kreation custom.css und binden Sie es über das Theme oder ein externes Modul ein

  • Vermeiden Sie Änderungen am Kern style.css um die Update-Kompatibilität sicherzustellen

  • Verwenden Sie Browser-Entwicklertools, um Selektoren zu identifizieren

11. Integration von Firmenlogos und visueller Identität

Schritte:

  • Ersetzen Sie Logodateien in /theme/oblyon/img/

  • Aktualisierung theme_vars.inc.php um neue Bildpfade zu reflektieren

  • Passen Sie die Farbpalette an die Markenrichtlinien Ihres Unternehmens an

Stellen Sie sicher, dass auch die mobilen Versionen des Logos optimiert sind.

12. Responsive Design und mobile Optimierung

Oblyon passt sich an:

  • Verschiedene Bildschirmgrößen durch Medienabfragen

  • Mobile Navigation mit einklappbaren Menüs

  • Berührungsfreundliche Tasten und Eingaben

Testen Sie Änderungen auf mehreren Geräten, um die Reaktionsfähigkeit zu bestätigen.

13. Verwalten von Updates für Oblyon

Beim Aktualisieren von Dolibarr:

  • Überprüfen Sie die Oblyon-Kompatibilitätshinweise

  • Sichern Sie Designdateien vor Upgrades

  • Führen Sie ein Änderungsprotokoll der Anpassungen für eine einfache erneute Anwendung

Verwenden Sie Git oder die Versionskontrolle, um Designaktualisierungen zu verwalten.

14. Kompatibilität mit Modulen und Erweiterungen

Oblyon ist mit den meisten Dolibarr-Modulen kompatibel. Allerdings:

  • Einige Module erfordern möglicherweise Stilanpassungen

  • Verwenden Sie bedingtes CSS für bestimmte Modulseiten

  • Testen Sie die UI-Integration nach dem Hinzufügen von Erweiterungen von Drittanbietern

15. Erweiterte Anpassung durch Vorlagenüberschreibungen

Sie können Vorlagen wie folgt überschreiben:

  • Kopieren von Kernvorlagen in einen benutzerdefinierten Ordner

  • Anpassen der Logik in PHP + Smarty-Syntax

  • Zuweisen neuer Variablen zur Anzeige über Hooks

Beispiel: Ändern Sie Rechnungs- oder Angebotsvorlagen, um Marken- oder Layoutänderungen einzubeziehen.

16. Leistungsüberlegungen

Vermeiden Sie schwere Themen oder Grafiken, die:

  • Verlangsamen Sie das Laden der Seite

  • Beeinflussen Sie die mobile Leistung

  • Erhöhen Sie die CPU-Auslastung

Optimieren Sie Bilder und minimieren Sie CSS/JS für eine bessere Leistung.

17. Sicherheit und UI-Anpassung

Dafür sorgen:

  • Hochgeladene Assets sind sicher und nicht öffentlich zugänglich

  • JS- oder HTML-Änderungen legen keine Schwachstellen offen

  • Dateiberechtigungen werden in Themenverzeichnissen richtig eingestellt

Verwenden Sie HTTPS für alle Assets.

18. Community-Feedback und Anwendungsfälle

Oblyon wird verwendet von:

  • Freiberufler

  • Agenturen, die Kunden betreuen

  • KMU auf der Suche nach einer eleganten ERP-Benutzeroberfläche

Viele teilen ihre Erfahrungen in den Dolibarr-Foren und auf GitHub und bieten Tipps und benutzerdefinierte Forks an.

19. Best Practices für UI-Design in ERP-Systemen

  • Lesbarkeit vor Ästhetik

  • Minimieren Sie die kognitive Belastung mit klaren Beschriftungen

  • Verwenden Sie eine konsistente Navigation auf allen Seiten

  • Aktionen und Warnungen hervorheben

Die Benutzeroberfläche sollte die Produktivität unterstützen und nicht davon ablenken.

20. Schlussfolgerung und strategische Empfehlungen

Durch die Anpassung von Dolibarr mit dem Oblyon-Theme können Unternehmen eine professionellere und intuitivere Benutzererfahrung bieten. Ob für interne Teams oder Kundenportale – Oblyon bietet eine solide Grundlage für die Personalisierung der Benutzeroberfläche.

Nutzen Sie modulare Overrides, benutzerdefiniertes CSS und responsive Best Practices, um die Benutzeroberfläche an Ihre Marke anzupassen. Dokumentieren Sie Änderungen stets, testen Sie auf Updates und legen Sie Wert auf Benutzerfreundlichkeit statt übermäßiger Anpassung. Mit der richtigen Balance wird Dolibarr nicht nur zu einer ERP-Plattform, sondern zu einer nahtlosen Erweiterung Ihrer Unternehmensidentität.