Werner Getzmann hat mich gestern gefragt, ob ich den Durchschuss erhöhen könnte. Im Grunde zu Recht, denn längere Texte sind wirklich nicht sehr gut lesbar. Das war mir auch schon aufgefallen, aber weil es doch hochgradig mühsam ist, an fixfertigen Themes Änderungen vorzunehmen, habe ich darüber hinweggesehen.

Nun hat Firefox aber eine wunderbare neue Möglichkeit, den HTML- und CSS-Code zu inspizieren. Sie steckt unter Extras > Webentwickler > Untersuchen oder Ctrl + Umschalt + i (⌥⌘i beim Mac). Fährt man mit der Maus über die Seitenelemente, werden sie hervorgehoben und mit einer Sprechblase markiert, in der das entsprechende HTML-Element ausgewiesen ist. In einer Leiste am Fuss ist als Brotkrumennavigation der Ast im DOM-Knotenbaum aufgeführt. Klickt man einmal mit der Maus, wird der Untersuchen-Modus beendet und man kann die übergeordneten Elemente anklicken und durch einen Klick auf HTML bzw. Style am rechten Rand der Leiste den entsprechenden Quellcode anzeigen.

Sich in fremden CSS-Dateien zurechtfinden
Klickt man auf Style, erscheint am rechten Rand eine Leiste, in der die auf das ausgewählte Element wirkenden CSS-Regeln sichtbar sind. Man kann diese ein- und ausschalten, verändern und Regeln hinzufügen. Die Auswirkungen werden sofort sichtbar, sodass ich bei p nur die Zeile line-height zu ergänzen brauche, um dann auch schon nach dem Prinzip von Versuch und Irrtum herausfinden kann, welche Vorgabe gut aussehen würde. (Ich habe mich für 1.40em entschieden.)

120217-firefox-styles.jpg
Da liegt der Hase im Pfeffer.

Natürlich werden diese Änderungen an der CSS-Datei in meinem Browser vorgenommen. Ich muss sie dann auch in meiner Stildatei auf dem Server vornehmen. Das grösste Problem ist bei einem Theme, überhaupt herauszufinden, wo die fragliche CSS-Datei steckt. Das findet man über das CSS-Panel von Firefox aber leicht heraus: Man wechselt zur Rubrik Eigenschaften, klickt die fragliche Eigenschaft an und erhält am rechten Rand den Namen der Datei und die Zeilennummer angezeigt. In meinem Fall ist das style.css:430. Klickt man auf diese Angabe, öffnet Firefox ein Fenster mit dem ganzen Quellcode, das im Adressfenster auch den Pfad zu der Stildatei angibt. Damit hat man die Datei im Dateisystem nullkommaplötzlich aufgespürt, kann sie editieren und hochladen, und ist dann auch schon fertig.