Biowetter benötigt zusätzliche Styles

[olwaldi]

Aktuell nutzt die von biowetter erzeugte Tabelle Style-Elemente von Belcherton. Daher sollte man den Style-File dwd.css wie folgt ergänzen:

.records-header {
    text-align:center;
    background:#D7D7D7;
    color:#000;
    font-weight:400;
}
.table-striped {
    tr:nth-child(even) {background-color: #f2f2f2;}
}

Ggf. die Doku hier entsprechend erweitern.

[roe-dl]

Ich werde hier noch allgemeine Klassen ergänzen, mit denen man die Gestaltung entsprechend beeinflussen kann.

[roe-dl]

Folgende Ergänzungen habe ich in Commit https://github.com/roe-dl/weewx-DWD/commit/360a5ffc48870c4aaa90ff1d0f23135afc5f757c vorgenommen:

Die Tabelle selbst hat zusätzlich die Klasse dwdbiowettertable bzw. dwdpollentable, die im CSS definiert werden können. Die Klasse table-striped stammt aus dem Bootstrap-Framework, das nicht nur bei Belchertown sondern auch noch bei anderen Skins verwendet wird.

Zusätzlich sind die Klassen jetzt konfigurierbar. Dabei ist schon vorbereitet, daß es einmal ein Tabellenformat für hochformatige Bildschirme wie bei Mobiltelefonen geben soll. Wie bei dwd-mosmix gibt es jetzt die Option show_placemark, mit der die Angabe des Namens oberhalb der Tabelle ausgeblendet werden kann. Dann gibt es die Option orientation, die momentan noch keine Wirkung hat. Mit horizontal_table_classes können die vorgegebenen Klassen für die Tabelle überschrieben werden, mit horizontal_main_effect_td_classes die der Zwischenüberschriften. Die restlichen Optionen sind noch nicht wirksam.

[olwaldi]

Fein, schaue ich mir morgen mal an.Ich hätte noch den Wunsch, die Ampel-Icons etwas kleiner darstellen zu können. Ich nutze für mich als Basis den Seasons-Skin, und dort werden alle Fonts auf 80% skaliert (sieht auch bei der Biowetter-table fürs Tablet prima aus). Dann sind die Circles allerdings einen Tick zu groß.Und vielleicht noch eine Anregung: Die Texte im Biowetter sind ja ziemlich standardisiert gleich. Wie wäre es, diese Texte nur on demand (mouse over oder onclick) anzuzeigen? Dann spart man viel Platz und gewänne mehr Übersichtlichkeit bei gleichem Informationsgehalt.Von meinem Huawei-Tablet gesendet

[olwaldi]

Option tut fast perfekt - nur die Legende bleibt noch zu groß. In Zeile 621 sollte es wohl

                            effect = symbol(effect,self.plusminus_icon_size)

heißen.

Vielen Dank!

[teffi71]

Ich verwende Safari als Browser und mir ist aufgefallen, dass das Datum der Tage der Wetterfühligkeit beim Scrollen stehen bleibt, aber leider über dem Inhalt der Tabelle (siehe 2. Bild) ... Gleiches mit Chrome ...

[teffi71]

Daher sollte man den Style-File dwd.css wie folgt ergänzen:

wo findet man die Datei dwd.css? ich finde nur eine Datei styles.css ...

[roe-dl]

Da die Tabelle sehr lang ist, ist es hilfreich, wenn die Kopfzeile beim Scrollen oben stehen bleibt. Dazu muss sie im CSS eine Hintergrundfarbe erhalten. Für dunklen Hintergrund etwa:

thead {
    background-color: #222;
}

Wenn es sowohl dunklen als auch hellen Hintergrund gibt und man umschalten kann, etwa:

.light thead {
    background-color: #000;
}
.dark thead {
    background-color: #222;
}

Im Normalfall haben Tabellen einen transparenten Hintergrund, weil die globale Hintergrundfarbe durchscheinen soll. Das geht bloß bei der Scrollfunktion nicht.

Wenn die Kopfzeile beim Scrollen nicht am oberen Bildschirmrand klebt, ist irgendetwas mit dem CSS im Allgemeinen faul.

Eine dwd.css gibt es nicht, aber es gibt in der Beschreibung einen Satz CSS-Deklarationen, den @olwaldi möglicherweise in einer Datei dwd.css gespeichert hat. Im Falle von Belchertown ist custom.css der Ort, wo die CSS-Deklarationen hineingehören. Wenn die Datei existiert, wird sie automatisch eingebunden.

[teffi71]

Obwohl ich überhaupt keine Ahnung von CSS habe, bin ich immer wieder erstaunt, dass ich mit Deiner Hilfe Deine Anregungen umsetzen kann. Danke! :)