FireBUG richtig nutzen?

Hallo. Ich habe den FireBUG installiert, um schneller den Block zu finden, den ich ändern will. Aber irgendwie komme ich damit nicht gut zurecht. Beispiel: Artikel-Detailansicht. Die Überscrhift lautet: Produktinformationen „Toller Roller“ Ich will das ändern. Also klicke ich rechts darauf, wähle Element untersuchen. FireBUG geht auf, hat zwei Spalten. Links HTML, rechts Styles. Habe auch schon die andern Sichtreiter durch. Aber wo finde ich wirklich die Information, wo der Code liegt, den ich ändern muss? Danke derweil… AS

Leider ist es nicht ganz soooo einfach immer die entsprechende Datei zu finden, da Firebug im Prinzip nur den Code anzeigt der vom Browser ausgegeben wird. Die ganzen “Berechnungen” im Hintergrund (von wegen: Datei a verweist auf Datei b bei Textstelle x) bleiben trotz Firebird für den User verborgen. Da hilft nur ein wenig Tüftelei. Wenn ich z.B. auf einen beliebigen Artikel gehe und jetzt -wie du es ja möchtest- die Überschrift, also die Produktbezeichnung mit Firebird anwähle, wird mir auf der rechten Seite von Firebird unter “Styles” erstmal alles zu dem Thema in Verbindung mit CSS angezeigt. Wenn du also z.B. nur Schriftfarbe oder Schriftgröße ändern willst, ist es mit Firebird wirklich ein Kinderspiel. Rechts steht bei mir dann z.B. der CSS-Code #detail h1 { color: #333333; } Hier könnte ich also beliebig die Farbe ändern. Du kannst den anderen Farbcode direkt in diesem Feld eintragen und dir das Ergebnis live anschauen. Willst du es dann permanent ändern, müsstest du es dann in der entsprechenden CSS Datei nochmal manuell machen. Aber dank Firebug siehst du ja direkt um welche CSS Datei es sich handelt und in welcher Zeile der entsprechende Code zu finden ist. Genauso kannst du dann z.B. mit der Schriftgröße etc. verfahren. Beim HTML Code ist es dann leider schon schwieriger. Hier hilft es nur sich die einzelnen Oberpunkte anzugucken. Meine Überschrift befindet sich laut Code in der “detailbox_middle”. Die detailbox_middle ist ein Unterpunkt von “detailbox”. Die detailbox ist ein Unterpunkt von “inner” usw. Und hier musst du dann ansetzen. Durch diese “Stichworte” hast du halt mehr Ansätze zum Suchen. Natürlich solltest du auch im Kopf haben in welchen TPLs sich die Artikeldetails (für dein Beispiel) befinden. Dies steht ja wunderbar in den Template-Tutorials beschrieben. Laut Template-Tutorial ist für diesen Bereich die Datei “frontend/detail/index.tpl” verantwortlich. Öffne diese Datei und such nach den Begriffen die wir uns oben notiert haben. Und zack: Wir hätten die Unterpunkte quasi gar nicht beachten müssen. Einer hätte gereicht, denn der Punkt “{* Detailbox middle *}” befindet sich direkt in Zeile 28 und dies ist auch der Block der die Überschrift beinhaltet. Edit: Noch als Tipp: Ich würde es nicht mit der rechten Maustaste machen und dann untersuchen. Mach lieber Firebug auf (Klick auf den Käfer rechts unten im Browser) und klick dann im offenen Firebug-Fenster ganz links auf “Elemente untersuchen” (Das Zeichen links neben “Konsole”). So kann man viel besser auswählen welches Element man jetzt genau untersuchen möchte.

1 Like

Ein SuperDanke für diese Erläuterung. Und für das Edit. Das hat nochmal alles sehr vereinfacht! MERCI AS