Schritt 1
Beim CSS-Layout wird die URL deiner eigenen CSS-Datei an den LoFi-Server übermittelt. Dies funktioniert natürlich nur, wenn sich die Datei auf deinem Live-Server befindet. Für den Entwurf des Designs steht deshalb eine Test-Datei zur Verfügung, die eine statische Chatliste enthält. Dadurch kannst du bequem dein Layout lokal entwerfen und erst nach Fertigstellung auf den Live-Server stellen.
Im ersten Schritt lernst du wie man die Schriftfarben und die Hintergrundbilder des Chats individuell anpasst. Die Ergebnisse kannst du dann sofort in Schritt 2 überprüfen.
- Öffne im Tutorial die Datei css/mydesign/list.css.
- Scrolle nach unten zum Punkt LIST BODY.
- Ändere in .ll-1, .ll-2, .ll-3 den Wert #000000 auf #663300 und speichere die Änderungen ab.
- Öffne mit einem Graphikprogramm die Datei images/mydesign/list_line.jpg.
- Ändere die Farbe des Bildes auf grün.
- Klicke auf Schritt 2 um das Ergebnis zu sehen.
Für den Hintergrund wurden Bilder benutzt um einen 3D-Rand zu erzeugen. Wenn du kein Graphikprogramm zur Verfügung hast kannst du auch eine normale Farbe setzen. Lösche in der CSS-Datei im Attribute lb den Wert background-image: ... und füge dafür background-color: #00FF00; ein.