Anregung: Statistik per CSS auffrischen
Verfasst: Do 6. Dez 2012, 21:40
In einer der letzten Versionen haben die ersten CSS-Anweisungen ihren Weg in die HTML-Ausgabe von efa2 gefunden.
Das ist besonders für bei der Nutzung von efaLive eine nette Sache, wenn die Statistiken ins Internet auf die Webseiten des Vereins sollen.
Um die HTML-Ausgabe per CSS aufzuhübschen müßten nur minimale Änderungen in der HTML-Ausgabe vorgenommen werden.
Ein Beispiel mit einer CSS-Datei für die angezeigten Statistiken gibt es hier:
http://bamberger-rudergesellschaft.de/index.php?id=335
Damit alles per CSS steuerbar ist, würden diese Anpassungen reichen:
Der (noch fast neue) Abschnitt
<style type="text/css">
.line1 {background-color: #eeeeff;}
.line2 {background-color: #ccccff;}
</style>
wird einzeilig zu
<link rel="stylesheet" type="text/css" href="efa-styles.css" media="all" />
Die neue CSS-Datei müßte wie die bisherigen gif-Grafiken mit in den Ausgabordner der HTML-Statistik gepackt werden.
Die Überschrift mit
<h1 align="center">
wird zu
<h1>
Tabelle-Tag für den Kopf
<table align="center" border>
wird zu
<table class="header" >
Tabelle-Tag für die Daten
<table align="center" bgcolor="#ffffff" border>
wird zu
<table class="data" >
Die Zeilen line1/2 wie
<tr class="line1"><td align="right">
werden zu
<tr class="line1"><td>
Alle img-Tags werden mit Klassen ergänzt, z.B.
<img src="color_blue.gif" ...
<img src="color_darkblue.gif" ...
werden zu
<img class="color_all" src="bar.gif" ...
<img class="color_rowed" src="bar.gif" ...
usw. Im Beispiel oben sind mehrere Spalten für die diversen Ruderkilometer definiert.
bar.gif ist die berühmte, transparente, 1x1-Pixel-Grafik.
Die anderen Gifs werden nicht mehr unbedingt gebraucht.
Mit diesen Änderungen und den entsprechenden CSS-Definitionen lassen sich die Balken leicht in der Farbe anpassen und mit anderen optischen CSS-Nettigkeiten ergänzen. Im Beispiel oben ist eine CSS-Vorlage für eigene Anpassungen enthalten:
http://bamberger-rudergesellschaft.de/f ... styles.css
PS.
Wie wären denn die Balkengrafiken und die HTML-Vorlage in efa2 für Anpassungen zu finden?
Im Programm und im Datenverzeichnis konnte ich sie nicht aufspüren?
Das ist besonders für bei der Nutzung von efaLive eine nette Sache, wenn die Statistiken ins Internet auf die Webseiten des Vereins sollen.
Um die HTML-Ausgabe per CSS aufzuhübschen müßten nur minimale Änderungen in der HTML-Ausgabe vorgenommen werden.
Ein Beispiel mit einer CSS-Datei für die angezeigten Statistiken gibt es hier:
http://bamberger-rudergesellschaft.de/index.php?id=335
Damit alles per CSS steuerbar ist, würden diese Anpassungen reichen:
Der (noch fast neue) Abschnitt
<style type="text/css">
.line1 {background-color: #eeeeff;}
.line2 {background-color: #ccccff;}
</style>
wird einzeilig zu
<link rel="stylesheet" type="text/css" href="efa-styles.css" media="all" />
Die neue CSS-Datei müßte wie die bisherigen gif-Grafiken mit in den Ausgabordner der HTML-Statistik gepackt werden.
Die Überschrift mit
<h1 align="center">
wird zu
<h1>
Tabelle-Tag für den Kopf
<table align="center" border>
wird zu
<table class="header" >
Tabelle-Tag für die Daten
<table align="center" bgcolor="#ffffff" border>
wird zu
<table class="data" >
Die Zeilen line1/2 wie
<tr class="line1"><td align="right">
werden zu
<tr class="line1"><td>
Alle img-Tags werden mit Klassen ergänzt, z.B.
<img src="color_blue.gif" ...
<img src="color_darkblue.gif" ...
werden zu
<img class="color_all" src="bar.gif" ...
<img class="color_rowed" src="bar.gif" ...
usw. Im Beispiel oben sind mehrere Spalten für die diversen Ruderkilometer definiert.
bar.gif ist die berühmte, transparente, 1x1-Pixel-Grafik.
Die anderen Gifs werden nicht mehr unbedingt gebraucht.
Mit diesen Änderungen und den entsprechenden CSS-Definitionen lassen sich die Balken leicht in der Farbe anpassen und mit anderen optischen CSS-Nettigkeiten ergänzen. Im Beispiel oben ist eine CSS-Vorlage für eigene Anpassungen enthalten:
http://bamberger-rudergesellschaft.de/f ... styles.css
PS.
Wie wären denn die Balkengrafiken und die HTML-Vorlage in efa2 für Anpassungen zu finden?
Im Programm und im Datenverzeichnis konnte ich sie nicht aufspüren?