https://github.com/thwillert/homematic_css

CSS Datei für die HomeMatic WebUI in Verbindung mit dem FireFox Addon Stylus
https://github.com/thwillert/homematic_css

ccu css firefox homematic stylus webui

Last synced: 1 day ago
JSON representation

CSS Datei für die HomeMatic WebUI in Verbindung mit dem FireFox Addon Stylus

• Host: GitHub
• URL: https://github.com/thwillert/homematic_css
• Owner: THWillert
• License: apache-2.0
• Created: 2019-11-07T19:08:59.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-09-18T13:21:47.000Z (over 4 years ago)
• Last Synced: 2025-04-03T01:06:44.067Z (22 days ago)
• Topics: ccu, css, firefox, homematic, stylus, webui
• Language: CSS
• Size: 385 KB
• Stars: 7
• Watchers: 4
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: changelog.txt
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# HomeMatic_CSS

[CSS](https://de.wikipedia.org/wiki/Cascading_Style_Sheets)-Datei für die HomeMatic CCU in Verbindung mit dem FireFox Addon Stylus.

## Übersicht

Ein modernes Design:

![WebUI Neu](/images/WebUI_Neues_Design_1_sm.png)

für die etwas in die Jahre gekommene Oberfläche der HomeMatic WebUI:

![WebUI Original](/images/WebUI_Original_sm.png)

## Voraussetzungen

Die CSS-Datei benötigt  _keine_ Installation auf der CCU.

Stattdessen wird diese über FireFox-Addon [Stylus](https://addons.mozilla.org/en-US/firefox/addon/styl-us/) eingebunden.

Dieses "überschreibt" die vorhandenen Style-Sheets, die von der CCU geladen werden, direkt im Browser.

## Installation

Nach der Installation von Stylus wird die CCS-Datei in Stylus importiert:

![Bearbeiten](/images/HomeMatic_CSS__Stylus_bearbeiten.png)

und den Inhalt der CSS-Datei einfügen:

![Einfuegen](/images/HomeMatic_CSS__Stylus_einfuegen.png)

danach ist eine Anpassung der IP-Adressen, auf die IP bzw. URL der CCU, in den einzelnen Code-Bereichen nötig:

![IP](/images/HomeMatic_CSS__Gilt_fuer.png).

> Hierzu noch ein schönes Video von [Verdrahtet](https://www.verdrahtet.info) auf [YouTube](https://www.youtube.com/watch?v=nxAQbJ4O01g)

### Anpassungen

Nach dem Import sieht man in Stylus mehrere Code-Bereiche:

 1. Changelog, CSS-Variablen zum einfachen Anpassen und des Drucklayouts ![Variablen](/images/HomeMatic_CSS__CSS-Variablen.png)![CSS_Print](/images/HomeMatic_CSS__Print.png)

 2.  Allgemeine Stile

 3. die restlichen Stile

 4. das Hintergrundbild

 

 ### Drucken

 Für einen Ausdruck werden per CSS die Kopf- und Fußzeilen der Seite ausgeblendet, sowie alles auf schwarz / weiß gesetzt.

 

 Um ein sauberes Ergebnis zu bekommen, sollten in den Druckeinstellungen von FireFox zusätzlich "Hintergrund drucken" deaktiviert werden:

 

 ![Druck Einstellungen](/images/HomeMatic_CSS__CSS-Variablen_print_1.png)

 

 ## Diskussion / Vorschläge

Bitte auch die Diskussion dazu im [HomeMatic-Forum](https://homematic-forum.de/forum/viewtopic.php?f=41&t=46033) beachten.

## ToDo

Die Reihenfolge entspricht keiner Priorität.

 - [ ] Button "Geräte löschen" korrigieren

 - [ ] Anleitung vervollständigen

 - [ ] CSS-Variablen vervollständigen

 - [x] Status / Geräte-Controls überarbeiten

 - [x] Status / Geräte: Modus Auto / Manu 

 - [X] Status / Gewerke

 - [X] Status / Räume

 - [ ] Status / Favoriten

 - [ ] Status / Systemprotokoll - Header

 - [ ] Direkte Verknüpfungen

 - [ ] Einstellungen - Unterpunkte Header

 - [ ] Popup - Allgemeine Geräteeinstellungen

 - [ ] Popups - Kanalauswahl / Geräteauswahl usw.

 - [ ] Geräteeinstellungen / Formular-Inputs verbergen

 - [ ] zweites Design: "Hell"

Optional:

 - [ ] als Addon?

 - [ ] wenn es ein Addon wird: Die Geräte-Bilder durch Fotos ersetzen?

 - [ ] Auf CUx erweitern?

 ## Author

 Thorsten Willert

 [Homepage](https://www.thorsten-willert.de/software/design-fuer-homematic-webui)

 ## Lizenz

 Das ganze steht unter der [Apache 2.0](https://github.com/THWillert/HomeMatic_CSS/blob/master/LICENSE) Lizenz.

.