Tipps für das Anpassen von Iceblue :

Bilder anklicken zum vergrößern
Bild Links: Alle Farben im Design sind Hintergrundbilder in Tabellenspalten
Bild Rechts: Die Tabellenspalten haben "Namen" (Klassen) bekommen
Diese "Klassen" können wir mit CSS anpassen. CSS-Code beginnt mit dem Klassen-Namen.

Schritt 1: Klassennamen finden

• wir schauen welche Klasse das Feld hat, das wir ändern möchten
• für den CSS-Code schreiben wir dann einen . Punkt vorweg
• wir können aber auch td. vorweg schreiben
• td steht für Tabellenspalte, die den Klassennamen bekommen hat.

Beispiel: Wir wollen den Titel im Header entfernen

• wir schauen auf das Bild mit den Klassen : Titel im Header = headline
• Korrekt mit Punkt vorweg .headline, oder auch td.headline
• die Eigenschaft für "nicht anzeigen" lautet = display: none;

Schritt 2:

• Eingefügt wird im Feld "Text über Design"
• zuerst öffnen wir den style tag
• dann folgen die Klassen und Ihre CSS-Anweisungen
• am Ende wird der style tag geschlossen
• Beispiel-Code für Titel im Header entfernen lautet dann

<style type="text/css">
<!--
.headline {display: none; }
-->
</style>

Den style-tag benötigen wir nur einmal.
Jeder weitere CSS-Code wird ohne style-tags dort mit eingefügt.

---

Einer Klasse eine Hintergrundfarbe geben:

<style type="text/css">
<!--
.Klassenname {
background:  none #FFFFFF; }
-->
</style>

• den korrekten Klassennamen einfügen
• den Punkt vorweg schreiben
• bei url();   bleibt die Klammer leer !
• die Original-Hintergrundgrafik wird damit überschrieben
• danach gewünschten Farbcode einfügen
• und die gewählte Farbe kann angezeigt werden

---

Einer Klasse ein Hintergrundbild geben:

<style type="text/css">
<!--
.Klassenname {
background: url(Hier Grafikadresse); }
-->
</style>

• den korrekten Klassennamen einfügen
• bei background: none;   die Grafikadresse einfügen !
• eine Farbe können wir, müssen wir aber nicht mit angeben
• die Original-Hintergrundgrafik wird dadurch überschrieben

---

Weitere CSS-Eigenschaften :

- mit color: #000000;   können wir die Textfarbe bestimmen
- mit font-size: 12px;   können wir die Schriftgrösse bestimmen
- mit font-family: arial;   können wir Schriftart bestimmen
- mit font-style: italic;   können wir Schrift-Stil bestimmen
- mit font-weight: bold;   können wir Fettschrift bestimmen
- mit text-align: center;   können wir den Text zentrieren
- mit background-repeat: repeat;   wird ein Hintergrundbild wiederholt
- mit background-repeat: repeat-x;   Hintergrundbild nur nach rechts wiederholen
- mit background-repeat: repeat-y;   Hintergrundbild nur nach unten wiederholen
- mit background-repeat: no-repat;   Hintergrundbild wiederholt sich nicht
- mit border: 1px solid #c9c9c9;   Rahmen / Rahmenstärke / Rahmenfarbe bestimmen

Weitere Möglichkeiten lassen sich mit google finden. Verwendet als Suchwort
z.B. "Innenabstand CSS" , oder "Linkfarbe CSS" , oder "Rahmenarten CSS"

---

Ein Beispiel - Wir wollen in 3 Klassen folgendes ändern :

• weiße Textfarbe
• 15 Pixel große Schrift
• Schriftart "Comic Sans MS"
• schwarze Hintergrundfarbe
• der Beispiel-Code lautet dann :

<style type="text/css">
<!--
.Klassenname {
color: #FFFFFF;
font-size: 15px;
font-family: comic sans ms;
background:  none #000000; }

.Klassenname {
color: #FFFFFF;
font-size: 15px;
font-family: comic sans ms;
background:  none #000000; }

.Klassenname {
color: #FFFFFF;
font-size: 15px;
font-family: comic sans ms;
background:  none #000000; }
-->
</style>

Den style-tag benötigen wir nur einmal.
Jeder weitere CSS-Code wird ohne style-tags dort mit eingefügt.