Firebug 101 – Tutorial für CSS Anfänger!

Robert Windisch edited this page Jul 25, 2015 · 1 revision

Deutsch / German

Clone this wiki locally

Dies ist ein umfangreiches Tutorial für absolute Anfänger denen wir Schritt für Schritt erklären wie man Firebug für Firefox benutzt, damit man das Design seiner Webseite in leichten Schritten mit CSS verändern kann. In diesem Beitrag geht es in einigen Punkten spezifisch um die Gestaltung unserer Childthemes, aber Firebug und dieses Tutorial kann auch für Webseiten die nicht mit WordPress oder unserem Framework erstellt wurden, angewendet werden.

Was wird benötigt

  • Firefox
  • Firebug
  • Editor (z.B. Dreamweaver, Notepad++ oder einfach dein favorisierter Editor deiner Wahl)
  • FTP Programm (z.B. Dreamweaver, Filezilla und so weiter)

Installation

Installiere Firebug in Firefox Starte Firefox und gehe zur Firefox Addon-Seite und klicke dort den Button “Zu Firefox hinzufügen”. Ein neues Fenster wird erscheinen und klicke hier auf “Jetzt installieren”, Der Button zählt runter von 5 bevor man auf den Installier-Button klicken kann. Es öffnet sich ein weiteres Fenster, dort kann man den Installationsprozess verfolgen. Nach der Installation musst du auf den “Firefox neu starten”-Button rechts oben klicken. Nachdem Neustart kannst du unten rechts in der Statusbar ein neues Symbol sehen.

Wähle den Bereich aus, den du gerne ändern möchtest

Doppelklick auf das Symbol und Firebug öffnet ein Fenster am unteren Bereich des Browers. Falls du noch nicht auf dem Tab “HTML” bist, klicke drauf. Um einen speziellen Bereich deiner Webseite zu wählen, damit du auch dessen CSS Style im Firebug sehen kannst, klickst du einfach auf den linken Button (1) neben dem Firebug Symbol und gehst mit der Maus über den Bereich (2), dessen CSS Stil du gerne wissen möchtest und klickst drauf. In dem Beispiel sind wir im Screenshot über den Beitragstitel mit der Maus gegangen (2). Auf der linken Seite (3) wird der HTML Code dieses Bereiches angezeigt und auf der rechten Seite (4) zeigt es den dazugehörigen CSS Code. Und ganz rechts wird anzeigt in welcher Datei und welcher Zeile sich dieser Code befindet (5). In diesem Beispiel hat der Beitragstitel den folgenden CSS Stil: color: #625945; font-family: Georgia,Times,serif; font-size: 1em; font-style: italic; text-decoration: none; Man kann auch einfach auf den gewünschten Code im HTML Bereich (1) klicken und der Bereich wird auf der Webseite markiert (2). Es zeigt dann auch den zugehörigen CSS Code auf der rechten Seite (3).

Den CSS Stil ändern

Wenn man im rechten Bereich auf den CSS Stil klickt, dann kann man diesen editieren und die Änderungen werden auf der Webseite sofort angezeigt. Dies ist sehr vorteilhaft um zu testen und zu sehen wie sich die Änderungen im CSS Code auf die Webseite auswirken. Bei einem Klick auf den CSS Code mit der rechten Maustaste erscheinen einige Optionen, zum Beispiel “Neue Eigenschaft”, dadurch kann man eine neue CSS-Regel dem Stil hinzufügen. Die neue Regel wird sofort auf der Webseite dargestellt. Zum Beispiel tippt man border-bottom, drückt die Tab-Taste und man kann dann Werte eingeben. Firebug vervollständigt automatisch die Eigenschaft. Falls man den Code in Firebug völlig durcheinander gebracht hat, dann muss man die Seite nur aktualisieren und alle Änderungen gehen verloren, die man vorher im Firebug angewendet hat.

Änderungen in der CSS Datei tätigen

Nachdem man zufrieden ist mit den Änderungen im Firebug kann man einfach den geänderten CSS Code kopieren und den Code in die theme.css des aktivierten Childthemes einfügen. Die CSS-Datei wird mit einem FTP Programm hochgeladen. Danach aktualisiert man die Seite im Browser und die Änderungen im CSS werden angezeigt. Um den absoluten Pfad der CSS-Datei zu sehen, muss man einfach nur mit der Maus über den Dateinamen rechts im CSS Bereich gehen oder mit der rechten Maustaste drauf klicken und “Link-Adresse kopieren” wählen, in einen Editor einfügen um den Ort der CSS-Datei herauszufinden. Bitte beachten: Änderungen in der CSS Datei sollten immer in der theme.css des aktivierten Childthemes gemacht werden, auch wenn der jetzige CSS Stil in einer anderen Datei vorhanden ist. Das Hinzufügen des neuen CSS Stils überschreibt den alten Stil in der anderen Datei. Falls man aber doch die Änderungen in der anderen Datei vornimmt, wird man die Änderungen beim nächsten Update von Xtreme One verlieren.

Neuen CSS Selektor der CSS-Datei hinzufügen

Finde den CSS Selektor Pfad Normalerweise sieht man den CSS Selektor Pfad im rechten Bereich von Firebug (1), Aber wenn man einen neuen CSS Selektor einem Bereich hinzufügen will, dann sieht man diesen Pfad in der oberhalb des HTMl-Bereichs, siehe Punkt 2 im unteren Screenshot. In diesem Fall wäre das h2.posttitle a (2) Indem man mit der rechten Maustaste auf den Code klickt und “CSS-Pfad kopieren” kann man dadurch auch den richtigen CSS Selektor Pfad herausfinden, füge es in deine CSS-Datei ein und lösche den unnötigen Teil vom Pfad und füge den gewünschten CSS Stil dem Selektor hinzu. Natürlich gibt es noch viel mehr Möglichkeiten mit Firebug, besonders auch durch weitere Add-ons speziell für den Firebug wie z.B. YSlow. Firebug ist ein “Must Have” für den Webentwickler und Designer! Wir freuen uns über weitere Anregungen, Tipps und Tricks oder Fragen rund um Firebug im Kommentarbereich!