Schritt-für-Schritt-Anleitung


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

Ein Praxis-Beispiel dazu:

1. Sie benutzen Layout F460. Dort stört Sie, dass die Navigation im Kopfbereich so dunkel ist. Sie möchten den Dunkelgrauton gerne gegen ein leichteres Grau eintauschen. Es gibt keine Möglichkeit in den Einstellungen Ihrer Jimdo-Page um dies zu ändern.

Die CSS-Klasse, die für den dunkelgrauen Wert zuständig ist, heißt

div#cc-tp-nav-top

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

div#cc-tp-nav-top {width: 850px; background-color: rgb(51, 51, 51); 
border-bottom: 1px solid rgb(255, 255, 255);}

da Sie mit allen Werten einverstanden sind bis auf background-color: rgb(51,51,51) 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):

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

Diese Syntax schreiben Sie in die Sektion Einstellungen > Head bearbeiten. Dann speichern Sie diese, gehen auf Ansicht und sehen sich das Ergebnis an:

Der Headbereich mit der Navigation verfügt jetzt durch die Änderung des RGB-Farbwertes rgb(51,51,51) auf rgb(198,198,198) über ein wesentlich helleres Grau.