CSS Design einfach mit Firebug und Firefox

Immer wieder tauchen im Zusammenhang mit DRUPAL Fragen des Designs auf, die man eigentlich relativ leicht lösen kann, wenn man weiss wie es geht und vor allem, wenn man die richtige und entsprechende Software nutzt.

Ein perfektes und kostenloses Werkzeug ist die Kombination aus dem Browser FIREFOX und dem zugehörigen Addon FIREBUG.

Wie man mit wenigen Klicks und vor allem in wenigen Sekunden CSS Problemen, wie Abständen, "Border-Linien" und sonstigem auf die Spur kommt, live und in Echtzeit im Browser Änderungen am zugehörigen CSS verfolgen kann, zeige ich in diesem kleinen Tutorial.

Nach dem Download ( Die entsprechenden Quellen für FIREFOX und FIREBUG sind unten angegeben ) und der zugehörigen Installation wird die zu prüfende Seite einfach im FIREFOX Browser aufgerufen und entweder wird dann mit einem Klick auf die "F12" Taste, einem Klick auf das FIREBUG Symbol unten rechts im Browser, oder mit "Ansicht" -> "Firebug" der FIREBUG gestartet. Daraufhin erscheint eine dreigeteilte Ansicht der aktuellen Seite.

Im oberen Bereich bleibt die Seite in Ihrer Ursprungsansicht stehen, im unteren linken Bereich erscheint der der Seite zugehörige HTML Quelltext und auf der rechten Seite können die den HTML TAGs zugehörigen CSS Befehle angesehen werden.

Im unteren linken Bildschirmfenster gibt es rechts neben dem Firebug Symbol ein Symbol "Element untersuchen" ein symbolisierter "Rahmen mit Pfeil". Diesen anklicken und schon kann das Untersuchen der HTML Elemente losgehen.

Entweder fährt man mit der Mouse im oberen Bildschirm die Einzel Elemente ab ( beim Überfahren erscheint ein blauer Rahmen um die Einzelemente ), oder man sucht sich die HTML Elemente im unteren linken Bildschirmsegment aus. Dann werden nicht nur die Elemente in der Ansicht oben hellblau unterlegt, es erscheinen auch noch vorhandene Abstände in gelb.

Damit ist es jetzt eigentlich ein leichtes, Änderungen am Design vorzunehmen. In meinem
Beispiel wähle ich das Standard GARLAND Theme und der Name der Website lautet Drupaltest und der zugehörige Slogan lautet: Einfach ein wenig "drupalieren"

Wie zu erkennen ist der Name zwar mit dem CSS Attribut "bold" fett geschrieben, ich hätte aber gerne noch einen horizontalen Abstand zwischen Name und Slogan.

Ich fahre also im aktivierten FIREBUG Modus auf den Namen "Drupaltest", worauf unten links die Zeile:   <span>Drupaltest</span> blau hinterlegt ist. Im zugehörigen rechten Fenster steht als CSS Anweisung für dieses "<span> Element":

#wrapper #container #header h1 span { font-weight:bold; }

Und ausserdem verrät der FIREBUG praktischerweise auch noch, dass die zugehörige Datei für die CSS Anweisung die style.css ist und der Befehl in der Zeile 375 steht. Wenn ich hier etwas dauerhaft ändern möchte, muss diese Datei geändert werden, oder an anderer Stelle nach den Theming Regeln überschrieben werden! ( z. B. eine eigene CSS Datei im Theme )
Wenn "CSS Dateien optimieren" unter "Leistung" deaktiviert ist, dann kann man mit einem überfahren der zugeordneten CSS Datei auch noch den absoluten Pfad sehen. Was häufiger von Vorteil sein kann.

Im Beispiel möchte ich ja nach wie vor den Abstand zwischen "Name" und "Slogan" vergrößern und deshalb mache ich im rechten Fenster einen Doppelklick hinter font-weight: bold! Darufhin erscheint ein blinkendes Eingabefeld "undefined;" ... da ich einen rechten Horizontalabstand haben möchte gebe ich ein: margin-right, drücke "Return" und gebe jetzt 30px als Abstand ein.

Und schon lässt sich die Änderung oben in Realtime erkennen! Dieses Spielchen lässt sich mit jedem Element wiederholen und man kann so schon sehen, was eigentlich wäre, wenn man den CSS Code ändert.

Geändert ist er natürlich nach wie vor nicht, erst wenn er in der entsprechenden Datei fest eingetragen ist, erfolgt die Änderung unwiderruflich.

Ich hoffe, dass dieses kleine Tutorial aufgezeigt hat, welch mächtiges und vor allem unverzichtbares Werkezeug die FIREFOX / FIREBUG Kombination beim Theming von Webseiten ist.  Und das ist nicht nur bei Drupal der Fall!