Donnerstag, 25. September 2014

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!


Kommentare:

  1. Mir ist das ehrlich gesagt zu kompliziert.
    Ich suche mir bei Blogger ein Layout aus was mir gefällt und passe das mit den gegebenen Einstellmöglichkeiten (und das sind ja recht viele) an.
    Ich bin nicht so verbissen, unbedingt was umzustellen, was mit diesen Einstellmöglichkeiten nicht oder nur sehr kompliziziert geht.
    Das ist bei Blogger auch kein normales CSS.

    AntwortenLöschen
    Antworten
    1. Mir nicht :o)
      Wobei ich es mir auch erst einmal notieren muß. Beim ersten Mal bleibt sonst nicht alles hängen. Und Einiges wußte ich auch früher schon mal. Nur wenn man es kaum mehr benötigt, vergisst es sich über die Jahre leicht. ;-)

      Kompliziert ist es gar nicht. Probier' es einfach mal aus, indem Du auf F12 klickst - dann kannst Du Deinen Blog genau analysieren bzw. dessen HTML. :-)

      Ups - gibt es "unnormales" CSS???

      Viele Grüße
      Sara

      Löschen
  2. Bei "Main" wo du was rot unterstrichen hast ist das mit dem "background" ja CSS. Der Wert wird aber aus einer Variablen geholt. Da muß man erst wieder nachgucken wie die Variable "main.background" belegt ist.
    Das ist für mich Spaghetti-code oder wie immer man das nennen will...

    AntwortenLöschen
    Antworten
    1. $(main.background) dient lediglich als Platzhalter, lieber Gucky. Das kann man ganz weglöschen und den Background bzw. die Farbe da reinschreiben, die man haben will. Sicherllich ist es CSS, aber den Farbwert kann ich selbst bestimmen, indem ich ihn hineinschreibe, das hatte ich, meine ich, aber beschrieben, wie ich das handhabe.
      Du siehst es an folgendem Bild - darin steht nur noch background und der Hexwert.

      http://2.bp.blogspot.com/-0yBevmFsNZY/VCM592uVOPI/AAAAAAAAYgY/60R2WjgjCmI/s1600/main-outer-Testblog.jpg

      Also nix mit Spaghetti oder so ;-)

      Löschen