Erweiterte Anpassung

Einstellungen → System → Erweiterte Anpassung

Hier können Sie Funktionen verwalten Javascript und Regeln CSS auf Desktop oder Handy angewendet.

Aufmerksamkeit

Die Verwendung unangemessener CSS-Regeln kann die Anzeige Ihres Jeedoms beeinträchtigen. Nicht ordnungsgemäß verwendete JS-Funktionen können zu erheblichen Schäden an verschiedenen Komponenten Ihrer Installation führen. Denken Sie daran, ein Backup zu erstellen und auszulagern, bevor Sie diese Funktionen verwenden.

Diese Funktion verwendet einen bestimmten Modus des Core-Dateieditors mit zwei Speicherorten :

• Desktop / Benutzerdefiniert : Kann beide Dateien enthalten custom.js Und Benutzerdefinierte CSS die vom Core in der Desktop-Version geladen wird.
• mobil / benutzerdefiniert : Kann beide Dateien enthalten custom.js Und Benutzerdefinierte CSS die vom Core in der mobilen Version geladen werden.

In der Menüleiste des Core-Dateieditors befindet sich eine Schaltfläche Ermöglicht Oder Deaktiviert sagt dir, ob der Core sie laden soll oder nicht. Diese Option ist auch verfügbar in Einstellungen → System → Konfiguration Registerkarte Schnittstelle.

Aufgefallen

Wenn diese Seite gestartet wird, wird der Baum automatisch erstellt, ebenso wie die 4 Dateien mit einem Kommentar in der ersten Zeile, einschließlich der Core-Version, die sie erstellt hat.

Ressources

CSS: Kaskadierende Stylesheets

Javascript

Tipps zum Anpassen der Benutzeroberfläche

Im Falle eines Problems

Das Injizieren von JS und / oder CSS kann dazu führen, dass Jeedom nicht mehr funktioniert.

In diesem Fall zwei Lösungen :

• Öffnen Sie einen Browser im Rettungsmodus : IP / index.php?rescue=1
• Stellen Sie eine Verbindung in SSH her und löschen Sie die Anpassungsdateien : Desktop/Benutzerdefiniert undMobil/Benutzerdefiniert

Beispiel für erweiterte Personalisierung in CSS

Alle diese Beispiele müssen in die CSS-Datei eingefügt werden (vergessen Sie nicht, oben die erweiterte Anpassung zu aktivieren))

Bildlaufleisten in Widgets entfernen

„ .eqLogic-widget.cmds{ overflow-x: versteckt !important; overflow-y: versteckt !important; } „

Mindestbreite/-höhe von Widgets entfernen

Dies ermöglicht Ihnen kleinere Widgets (Breite [min-width], Höhe [min-height]), aber seien Sie vorsichtig, da dies die Anzeige weniger attraktiv machen kann.

„ div.cmd-widget.content, div.cmd-widget .content-sm, div.cmd-widget .content-lg, div.cmd-widget.content-xs { min-width: nicht gesetzt !important; min-height: nicht gesetzt !important; } „

Es wurden Abstände zwischen den Namen von Objekten und Geräten im Dashboard hinzugefügt

„ .div_object-Legende .objectDashLegend { margin-bottom: 5px; } „