Browser-Extras als große Arbeitshilfe


Die entscheidende Frage, die sich für jeden stellt, der das erste Mal diese Methode anwendet lautet:

 

„Schön und gut, aber wie finde ich heraus, dass die Klasse, die ich verändern oder überschreiben will, div#cc-tp-nav-top heißt und welche Werte ich wie verändere?“

 

Hier helfen Browser und Plug-ins von Browsern, sowie die ein oder andere kommerzielle Software. Firefox sei hier lobend und kostenfrei erwähnt. Ebenso Google Chrome. Wenn Sie z.B. über eine aktuelle Version des Firefox verfügen und sich damit eine Seite ansehen, haben Sie im „rechte Maus Menü“ einen Klick (Alt + Q), der derzeit „Element untersuchen“ heißt.


Berühren Sie mit der Maus in der geöffneten Webseite einen „zu untersuchenden Bereich“ und dann auf dieses Rechtsklick-Menü „Element untersuchen“:
 
Unterhalb des nun mit einer gestrichelten Linie umfassten Elements wird der Name des DIVs (hier div#headerlogo) angezeigt.


    Im Splitscreen unten wird weiterhin die Einbettung des DIVs im Quelltext und die vollständige Definition des Elements ausführlich (und für die spätere Verwendung kopierbar) angezeigt:

Der Clou liegt vor allem in der Tatsache, dass man in diesem Regelfenster rechts die einzelnen DIVs und Klassen per Doppelklick bearbeiten kann und das durch die eigenen Codeeingaben sich verändernde Ergebnis in der Live-Webseite vorab ansehen kann.

Diese wird logischerweise dabei nicht wirklich verändert, es wird nur eine Was-wäre-wenn-Ansicht erzeugt.


Sobald einen das Ergebnis der eigenen Codeeingabe überzeugt, kann man die Sequenz kopieren und sie in die Head-Syntax übergeben:

Das Hineinklicken in das Regelfenster und die Bearbeitungstechnik benötigen ein wenig Übung, aber als schnelle Arbeitshilfe sind diese Funktionen unschlagbar.



Sobald Sie den gewünschten Code erzeugt haben, kopieren Sie die ganze Syntax bzw. nur den geänderten Teil und kopieren Sie in den Rahmen Ihrer Head-Syntax:

<style type="text/css">
/*<![CDATA[*/
div#cc-tp-nav-top {background-color: rgb(64,112,198) !important;}
/*]]>*/
</style>

die Sie dann im „Head bearbeiten-Bereich“ abspeichern um den Code wirksam zu hinterlegen.