CSS-CodES Einsetzen - Schritt für Schritt


Die Reihenfolge der Schritte die für eine Designanpassung im bestehenden CSS einzuhalten ist, scheint überschaubar:

  1. Identifizieren Sie den Namen und Werte der verwendeten Klasse oder ID im Layout
  2. ergänzen oder überschreiben Sie die Syntax nach Ihren Vorstellungen und speichern Sie den Code im Head ab
  3. Prüfen Sie das Ergebnis

Das bedeutet in der Anwendung:

 

1. Sie benutzen z.B. das Design „CAIRO“. Dort stört Sie, dass die Schräge im Kopfbereich so groß ist und dies lässt sich nicht über die Style- Einstellungen ändern.

Die CSS-Klasse die für die Höhe des Headerfensters zuständig ist heißt

 

.jtpl-logo

 

bzw. in der Version für die Full-Screen-Variante

 

@media (min-width: 1170px)
.jtpl-logo


2. Die verwendete Syntax für diese Klasse lautet:

 

da Sie mit allen Werten einverstanden sind bis auf

 

 

schreiben Sie für Ihren Head nun folgende Syntax inklusive des !important-Befehls mit dem Sie Ihrer Webseite klarmachen, dass die von Ihnen gemachte Angabe wichtiger ist als die ursprüngliche (die sich ja nach wie vor noch im Quelltext bzw. CSS der Seite befindet):

 

Diese Syntax schreiben Sie in die Sektion Einstellungen > Head bearbeiten in der folgenden Form, bei der Sie bitte die Klammersetzung für @media beachten, mit der dieser neue Wert nur Screendarstellungen zugewiesen wird, bei denen die Ansichtsfläche mindestens 1170px (handelt sich dabei also um einen big screen)

Dann speichern Sie diese, gehen auf Ansicht und sehen sich das Ergebnis an:

 

3. Der Headerbereich Ihrer JIMDO-Seite verfügt nun - durch die Änderung des Padding-Wertes (padding-top und padding-bottom) auf 0px in dieser Bildschirmeinstellung - über einen dieser Bildschirmeinstellung - über einen wesentlich flacheren Kopfbereich.

Ergebnis:

Neben unseren erfolgreichen JIMDO-Seminaren finden Sie bei uns nun auch MAILCHIMP Starter-Seminare. Hier finden Sie alle Termine und Preise in der Übersicht ...


Browser-Extras als große Arbeitshilfe

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

 

"... schön und gut, aber wie finde ich heraus, dass die Klasse die ich verändern oder überschreiben will .jtpl-logo 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 und Chrome seien hier lobend und kostenfrei erwähnt - Internet Explorer aka Edge und Safari weniger.

 

Wenn Sie über eine aktuelle Version verfügen und sich damit eine Seite ansehen, haben Sie im „rechte Maus Menü“ einen  Klick der derzeit „Element untersuchen“ heißt. Klicken Sie sich in einen Bereich der geöffneten Webseite und dann auf dieses Rechtsklick-Menü „Element untersuchen“:

 

Unterhalb des nun mit einer gestrichelten Linie umfassten Elements wird der Name des DIVs im Rahmen der gesamten CSS-Auszeichnung 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 bei diesem Tool namens 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:

 

Hineinklicken in das Regelfenster und ein sicherer Umgang 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 wie in diesem Beispiel:

<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.