Mithilfe der Entwickler-Tools das Blog-CSS/HTML bearbeiten!

Wie in meinem Waldgarten-Blog bereits angekündigt, will ich hier nun die Schritt-für-Schritt-Anleitung geben, um Veränderungen am html-Quelltext eines Blogger/Blogspot-Blogs vornehmen zu können, selbst wenn man keine präzisen html/Css-Kenntnisse besitzt.

Mein genialer Sohn machte sich kürzlich die Mühe, mir zu zeigen, wie einfach das geht!
Natürlich mußte ich ganz Ohr sein, denn geniale Kinder verlangen ungeteilte Aufmerksamkeit! Doch die wollte ich ihm gern gewähren, lag es doch vor allem auch in meinem eigenen Interesse, diese Dinge endlich allein bewerkstelligen zu können, ohne jedes Mal lange auf Hilfe warten zu müssen.

Zunächst einmal muß man wissen, daß  mittels der Taste F12 (ganz oben auf der Computer-Tastatur) in JEDEM Browser die sog. Entwickler-Tools aufgerufen werden können.

Im Firefox nennt man das Ganze wohl Inspektor. Wenn ich jetzt etwa Falsches schreibe, mich bitte korrigieren! Ich schreibe das Ganze lt. meinen Aufzeichnungen und aus dem Gedächtnis heraus. Denn mein Sohn ist derzeit nicht greifbar.
In Chrome sind es die sog. DevTools. Bei Opera scheint das Ganze Dragonfly zu heißen.  Ansonsten müßt Ihr für speziell Euren Browser googeln.

Was uns betrifft, arbeiteten wir mit Chrome und auch mit dem Firefox, da ich alle Browser auf meinem Rechner habe.

Nachdem man F12 gedrückt hat, erscheint unten auf der Seite der sog. Dom-Baum.

Zugriff auf Elemente der Webseite

 jQuery + DOM

Debugging-Werkzeuge für alle Browser (HTML, CSS, Javascript)

Im Firefox klickt man  mit der linken Maustaste auf den kleinen Pfeil ganz links oben neben "Inspektor".  Im Kontextmenü, das daraufhin zusehen ist, erscheint "Ein Element der Seite auswählen".
Danach fährt man über den Blog - es verändert sich etwas, wie man am nächsten Screenshot sehen  (unter diesem) sehen kann.

In Chrome klickt man dagegen auf die kleine Lupe ganz links oben, wobei in einem Kontextmenü folgender Satz erscheint: "Select an element in the page to inspect it."

Je nachdem, über welchen Bereich des Blogs man mmit der Mouse fährt, wird dieser markiert und man erkennt unten im Quelltext, wo man diesen Bereich im HTML des Blogs ändern kann! Denn hier - in der nicht-internetten-Ansicht, die zwar den Blog zeigt, jedoch nur auf dem Computer und nicht unmittelbar im Internet, kann man den Blog nicht nachhaltig verändern. Es ist nur ein Werkzeug, das eine identische Ansicht des Blogs vermittelt. Nachhaltige Änderungen können im Entwicklertool jedoch nicht vorgenommen werden! Es ist nur zum Testen und Üben gedacht!

Im nächsten Screenshot eine der Markierungen. - Den markierten Bereich könnte man im weiter unten blau markierten Code verändern! Bzw. endgültig erst im Blog im identischen Bereich!

Denn das Tollste ist - HIER im Browser kann man es gefahrlos ausprobieren, ohne daß sich im Blog selbst etwas ändern würde. Denn die eigentliche Veränderung nimmt man dann später im html-Code des Blogs vor.

Dieses hier ist also erst einmal die "Spielwiese" zum Testen ... einfach genial!

Und einmal in der Chrome-Konsole . . .

Wie zu sehen ist, wurde ganz oben der Seiten-Reiter "Pflanzen-Lexikon" markiert. Diesen konnte ich jetzt beliebig einfärben, die Größe verändern oder auch die Abstände zwischen den Reitern. :-)

Und beim nächsten Screenshot habe ich die Sidebar markiert, die sich ebenso beliebig verändern ließe.

Der Bereich, bei dem es bei mir ankam, ist der, der im Screenshot hier drunter blau markiert ist.
Das erfahre ich, indem ich einfach über den entsprechenden Bereich, den ich ändern will, mit der Mouse fahre.

Entscheidend ist diese Ansicht mit den mit meinen roten Pfeilen nachträglich markierten Stellen! Erst wenn dieser Bereich komplett markiert ist, erscheint der "main-outer".

Und genau diesen Bereich habe ich mir dann zunächst im html des Test-Blogs herausgesucht, was nicht schwer ist, da man ja im Blog-HTML mit der blogeigenen Suchfunktion prima suchen kann nach dem Begriff, der im Entwickler-Tool angezeigt wurde.

Ob man nun den Hex-Wert (#CCFFCC) einträgt oder den Farbnamen ausgeschrieben einfügt, bleibt sich gleich. Hauptsache, die Farbe gefällt.
Seiten mit Farbcodes finden sich zuhauf im Internet. Auch dann noch, wenn man ein wenig unprofessionell sucht, wie ich das jetzt einmal gemacht habe! ;o)

Wichtig ist, daß das Dollarzeichen der Variable wie auch die beiden Begriffe mitsamt der Klammern gelöscht werden. Sie dienen lediglich als Platzhalter. Und stattdessen der Farbwert genau an der Stelle eingetragen wird. Präzises Vorgehen ist hier wichtig, es darf kein Leerzeichen zuviel geschrieben werden! Ob als Farbname oder Hex-Wert, bleibt jedem selbst überlassen. Doch das Semikolon MUSS bleiben!

Daß man immer, wenn man Veränderungen im Blog vornehmen will, vorher das gesamte HTML wie auch die XML-Datei des Blogs sichert, versteht sich von selbst!

Der Testblog zeigt nun anstatt des Grau in der Sidebar und Umrandung (rote Pfeile!) ein Grün - in der Testumgebung hatten wir ein Gelb gewählt (siehe oben) und für meinen Waldgartenblog wird es eine Überraschungsfarbe werden! Doch das demnächst!