Nachdem wir den zahlreichen Randshop Benutzern noch immer ein breites Angebot an Templates schuldig sind, will ich in diesem Beitrag eines der wichtigsten Firefox Add-ons vorstellen, dass man als Frontend Entwickler haben sollte: Firebug. Diese Erweiterung für den Firefox hat vermutlich für alle Belange der Entwicklung einer Website ein Werkzeug parat.

Hat man das Add-on erst einmal installiert, kann man es über den kleinen Käfer in der Statusleiste des Firefox aufklappen. Ich werde mich in diesem Beitrag nur mit dem CSS Bereich von Firebug beschäftigen. Darüber hinaus gibt es noch Tools für das Debuggen von JavaScript, die Prüfung der Ladegeschwindigkeiten, Konsolenausgaben und noch vieles mehr. Dazu aber mehr auf der Website von Firebug.

Ein typischer Einsatz von Firebug ist die Untersuchung der Struktur einer Website. Klickt man mit der rechten Taste auf eine Stelle auf der Website und wählt den Menüpunkt Element untersuchen aus, klappt im unteren Bereich des Browsers das Firebug Add-on auf. Im linken Bereich ist die Stelle in der HTML Struktur markiert, die man gerade ausgewählt hat. Der wichtige Teil für das Designen (per CSS) einer Website ist hier aber auf der rechten Seite. Hier sieht man, aus welchen CSS Angaben dieses Element seine Eigenschaften hat. Bei einer Mehrfachzuordnung, z.B. bei zentralen Einstellungen über das Body Tag oder den Wrapper, werden hier alle Angaben untereinander angezeigt und die überschriebenen durchgestrichen.

Bevor ich hier noch weiter darauf eingehe, sollte hier erwähnt sein, dass Grundkenntnisse im Umgang mit CSS nötig sind, da man sonst einige Punkte nicht vernünftig einsetzen kann. Ich empfehle hier immer noch sehr gerne die Dokumentation von SELFHTML zum Thema CSS.

Lokalisierung und Manipulation der CSS Angaben

Dateiname und Zeilennummer einer CSS Angabe

Ein Vorteil der Anzeige vom Firebug ist die Lokalisierung von CSS Angaben in den entsprechenden Dateien (oder auch als Inline Element). Somit kann man sehr schnell das Design eines Randshops ändern, ohne sich genauer mit den CSS Dateien beschäftigen zu müssen. Es befinden sich neben der Klassifizierung der Zuordnung immer der Name der Datei und die Zeilennummer innerhalb der Datei (fährt man mit der Maus auf den Dateinamen, erscheint er auch komplett.)

Was einem von Firebug aber noch geboten wird, ist eine Art WYSIWYG CSS Editor. Man kann jeden Eintrag, der hier angezeigt wird, bearbeiten, ergänzen oder auch löschen. Und das Ergebnis kann man sofort im Browserfenster sehen. Somit kann man das gesamte Design anpassen und die einzelnen CSS Dateien dann anschließend speichern. Dazu dann später mehr, jetzt erst einmal zu der Manipulation der CSS Eigenschaften.

Am einfachsten ist das Deaktivieren einer Eigenschaft. Dafür geht man mit der Maus einfach links neben die Eigenschaft und es erscheint ein graues Verbotsschild. Klickt man dann drauf, wird es in rot neben der Eigenschaft fixiert. Will man z.B. im Randshop die Unterstreichung bei den Überschriften im Hauptbereich deaktivieren, klickt man mit der rechten Taste auf die Überschrift Aktuelle Artikel auf der Startseite und anschließend auf Element untersuchen. Im Firebug sollten dann im rechten Bereich die Angaben zu dem h1 Tag aus der Datei layout_allgemein.css angezeigt werden. Deaktiviert man hier nun die Angabe border-bottom wie eben beschrieben, werden die Überschriften ohne die Unterstreichung angezeigt.

CSS Angaben verändern

Will man nun eine CSS Eigenschaft ändern, klickt man hier direkt auf den Wert und kann hier direkt einen neuen eintragen. Will man also z.B. die Überschrift im Hauptbereich im Randshop in einer anderen Farbe haben, geht man wie oben schon erwähnt in die Analyse und klickt dann auf den Farbwert #D66C00 der Eigenschaft color. Ein nettes Feature vom Firebug ist hier die Anzeige der Farbe in einem kleinen Tooltip. Eine solche Hilfe erscheint auch bei CSS Angaben zu Grafiken. Der Wert sollte nach dem Klick dann bearbeitet werden können. Es gelten dann hier die üblichen Angaben zu den Farbwerten im CSS.

Fehlt einem noch eine CSS Eigenschaft, kann man hier zusätzlich noch eigene ergänzen. In diesem Fall klickt man direkt mit der rechten Taste auf die CSS Klasse (in diesem Fall das h1) und wählt hier den Punkt Neue Eigenschaft …. Jetzt kann man die Klasse um eine beliebige neue CSS Eigenschaft ergänzen. Will man z.B. alle Überschriften in Großbuchstaben haben, gibt man die Eigenschaft text-transform ein und gibt ihr den Wert uppercase.

CSS Eigenschaften speichern

Das waren so die wesentlichen Möglichkeiten, sehr einfach die CSS Angaben einer Website zu ändern. Nur wie speichert man die Angaben nun dauerhaft? Denn Firebug hat natürlich keinen direkten Zugriff auf die Dateien. Hier werden die Daten nur temporär im Speicher geändert. Lädt man die Seite neu, sind die Angaben, die hier gemacht wurden, wieder weg.

Eine Möglichkeit besteht darin, die Angaben nicht über den Firebug einzutragen, sondern die Angaben immer direkt in der CSS Datei zu machen. An welcher Stelle diese zu machen sind, sieht man ja schnell über die Angabe der Datei und der Zeile.

Man kann aber auch einfach die Dateien, die man geändert hat (z.B. die layout_allgemein.css), komplett kopieren. Das empfiehlt sich vor allem dann, wenn man viele Änderungen auf einmal vorgenommen hat. Hierzu geht man dann in den linken Bereich von Firebug und wählt den Reiter CSS aus. In dem Pulldown (erkennbar durch den kleinen Pfeil) sind alle CSS Dateien aufgeführt, die für diese Seite geladen werden – u.a. auch die veränderte layout_allgemein.css. Auch in dieser Ansicht der CSS Dateien sind alle Änderungen eingetragen. Leider gibt es hier keine elegantere Lösung (zumindest ist sie mir nicht bekannt), als die Änderungen hier über Copy & Paste in die CSS Datei in einem geeigneten Text Editor zu überschreiben.

Ein eigenes Template

Um nun aber das schöne Standard Template des Randshops nicht zu überschreiben, bietet es sich an, ein eigenes Template zu erstellen, wie in dem Titel dieses Beitrags ja auch schon angedeutet wurde.

In der Verzeichnisstruktur des Randshops befindet sich der Ordner templates. Hier sind alle hinterlegten Templates abgelegt. Im Falle der Download Version befindet sich hier nur das Template standard. Ein Template definiert sich durch die HTML Dateien, die das Gerüst der Website vorgeben und den so genannten Designs. Geht man nun in den Ordner des Templates, sieht man dort die Verzeichnisse dokumente, mail_html, mail_text und website, in denen jeweils die HTML Dateien je nach Einsatzgebiet abgelegt sind. Hier muss man nicht unbedingt Änderungen vornehmen, um eine neues Design für seine Website erstellen zu können. Maximal die Datei index.tpl in dem Ordner website könnte relevant sein, da hier das Rahmenlayout der Website in der HTML Struktur definiert ist. Aber wir wollen uns hier mit den CSS Dateien beschäftigen und gehen deshalb in den Ordner design.

Auswahl des eigenen Templates

Hier gibt es nochmals eine Unterteilung, die es einem ermöglicht, ein Template in verschiedenen Designs zu erstellen. Also wie in dem Beispiel des Standard Templates ein Design in Blau, Grün, Lila und in Rot. In diesem Ordner befinden sich dann jeweils die benötigten CSS Dateien, Grafiken und JavaScript Dateien.

Um nun ein eigenes Template zu erstellen, sollte man einfach den Ordner standard kopieren und umbenennen. Also z.B. mit dem Namen mein_template. Dann sollte man von einem Design ausgehen und die anderen nicht benötigten entfernen. Und wenn man schon eine Ahnung hat, wohin es gehen soll, kann man den Ordner des gewünschten Designs auch umbenennen. Also zum Beispiel in den Namen gelb oder auch neues_design. So wie man es dann in der Auswahl im Admintool des Randshops haben will.

Denn hier werden lediglich die Verzeichnisse geprüft und einem diese Angaben zur Template- und Designauswahl zur Verfügung gestellt. Hat man dann sein eigenes Template und Design ausgewählt, wird die Website dann dauerhaft so angezeigt – aber man könnte auch schnell wieder auf das alte Design zurück gehen. Wie man es gerade haben will.

Auch wenn ich noch viel mehr dazu schreiben könnte, hoffe ich, dass man durch diesen Beitrag schon einmal einen ersten Eindruck gewonnen hat, wie man aus dem Standard Template des Randshops mit Hilfe von Firebug seinem Shop ein schönes neues Aussehen verleihen kann.