Grundregeln für diese Arbeitsweise


Die Technik CSS-Einträge per Head-Eintrag zu überschreiben oder zu ergänzen ist selbstverständlich nicht auf Jimdo begrenzt. Hier sind einige wichtige Grundregeln für diese Arbeitsmethode die Sie – teilweise ganz speziell für Jimdo – berücksichtigen können:

1. Gruppieren von Einträgen
Sie können Einträge im Head untereinander aufführen:

<style type="text/css">
/*<![CDATA[*/
div#number-one {color: #FF0000 !important;}
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
div#nummer-zwei {padding-right: 24px;}
/*]]>*/
</style>

Schöner noch und weniger Code: Sie fassen die Einträge zusammen:

<style type="text/css">
/*<![CDATA[*/
div#number-one {color: #FF0000 !important;}
div#nummer-zwei {padding-right: 24px;}
/*]]>*/
</style>

Das gilt insbesondere und noch kürzer, wenn beide Einträge (oder mehr) das selbe Merkmal (hier die „background-color“) fixieren. Hier kommt das Komma zum Einsatz:

<style type="text/css">
/*<![CDATA[*/
#layer-eins, #layer-zwei {background-color: #FFFFFF !important;}
/*]]>*/
</style>

2. Ergänzung von Einträgen


Manche Einträge sind im Original-CSS bereits für Ihre Wünsche korrekt definiert, benötigen aber nur eine Ergänzung. In diesem Fall reicht es nur den ergänzenden Wert im Head zu hinterlegen. Unnötig wäre demnach folgender Eintrag im Head:

<style type="text/css">
/*<![CDATA[*/
ul.mainNav1, ul.mainNav2, ul.mainNav3 {text-align: left; list-style-type: none; font-weight: bold;}
/*]]>*/
</style>

es reicht der Wert:

<style type="text/css">
/*<![CDATA[*/
ul.mainNav1, ul.mainNav2, ul.mainNav3 {font-weight: bold;}
/*]]>*/
</style>


da nur der Wert („font-weight“) vorher noch nicht definiert wurde.

 

3. DIV-Bezeichnungen und Layout-Wechsel
Was im Layout F460 bei Jimdo eben noch den Namen

div#cc-tp-nav-top

trägt, heißt im Layout F4245 vielleicht

div.cc-nav-action-wrapper

obwohl es dieselbe Funktion hat. Andere DIVs heißen vielleicht immer gleich wie z.B. der Warenkorb, Bestandteile der Navigation usw.

Bei Jimdo wird aus vielen Gründen und historisch bedingt in den Layouts (derzeit noch) eine uneinheitliche Benamung vieler Layout-Elemente verwendet, was für den User weder Vor- noch Nachteile hat. Als Coder kann man hier Verwirrung stiften. Wichtig dabei ist zu erkennen, dass man bei einem Layout-Wechsel überprüfen muss, ob vielleicht hinterlegte CSS-Einträge im Head in die Gestaltung des neu ausgesuchten Layouts „hineinfunken“.

Ein Layoutwechsel bedeutet demnach auch immer eine Überprüfung der im Head hinterlegten Einträge, damit der Jimdo-Support solche selbst verursachten Fehler hinterher nicht ausbaden muss. Wenn Sie die Headeinträge für ein bestimmtes Layout vorübergehend nicht mehr benötigen, speichern Sie den kompletten Headeintrag unter Einstellungen > Head bearbeiten für eine spätere Verwendung in einer TXT-Datei unter der Nummer des Layouts einfach ab. Dann löschen Sie (nur) diese Layout-relevanten Bestandteile aus dem Head, speichern und schalten auf das neue Layout um.

4. Ausblenden und Austausch von Grafiken
Manche Jimdo-Layouts verwenden zentral gehostete Grafiken als Bestandteil des Designs. Das betrifft häufig Schattenelemente, abgerundete Bereiche oder kreative Elemente der festen Layouts: Sie haben die Möglichkeit diese Aufrufe mit eigenen Grafiken zu übersteuern, oder die hinterlegten Grafiken auszublenden.
Ein Beispiel am Jimdo-Layout F4097 Hier wurde als kreatives Element ein Rotkehlchen unten links hingesetzt, welches wir einmal ganz unromantisch gegen ein ordentliches Motorrad austauschen werden.

Mit der rechten Maustaste im z.B: Firefox-Browser (Element untersuchen) identifizieren wir folgenden Eintrag:



Das Element heißt also

div#cc-tp-bird

und sein grafischer Hintergrund wird – gemäß Syntax – gespeist aus folgender Quelle

http://u.jimdo.com/www65/o/layout/l1f27bad9ed593363/img/bird.png

Wollten wir nun dieses Bild-Element einfach verschwinden lassen (ausblenden), so würden wir jetzt folgende Syntax für den Headbereich erstellen:

<style type="text/css">
/*<![CDATA[*/
div#cc-tp-bird
{background:none !important;}
/*]]>*/
</style>

Der Befehl "!important" wird hier benötigt, da unser neue Eintrag für die Anzeige wichtiger (bzw. mächtiger) sein soll, als der bereits definierte Eintrag für den „background“ des

div#cc-tp-bird

Hier das sichtbare Ergebnis:

Da wir ja eigentlich eine andere Grafik (Motorrad) anstelle der verwendeten (Rotkehlchen) hinterlegen wollen, erstellen wir nun eine neue Grafik motorrad.png, die wir sinnigerweise genau so groß machen wie die Grafik des Rotkehlchens.


Anschließend fügen wir diese Datei motorrad.png zum Beispiel auf einer versteckten Unterseite unserer Jimdo-Page als Element „Bild“ ein.

Wir finden jetzt über die rechte Maustaste den Bildpfad des hochgeladenen Bildes heraus um ihn im nächsten Schritt gegen den Bildpfad des in unserem Layout F4097 ja fest hinterlegten Rotkehlchen-Bildes auszutauschen.

Dieser Pfad lautet zum Beispiel:

http://u.jimdo.com/www65/o/s7c2498edf25bfcd6/img/i54f79b4e825/1334849084/std/image.png

also bauen wir nun folgende Syntax für den Head mit der wir den Pfad zum Original-Rotkehlchen-Bild (bei gleichbleibenden Bildattributen wie „no-repeat scroll 0px 0px transparent“) mit dem Bildpfad zu unserer Motorrad-Grafik überschreiben werden:

<style type="text/css">
/*<![CDATA[*/div#cc-tp-bird
{background: url(“http://u.jimdo.com/www65/o/s7c24/img/25/984/std/image.png”)!important;}
/*]]>*/
</style>

Nach dem Abspeichern des Heads wird dann folgende neue Seitengestaltung sichtbar:

Aktion „Tausche Rotkehlchen gegen Bike“ war also ein voller Erfolg.


Anhand dieses Beispiels können Sie „gegen“ alle im CSS hinterlegten Grafiken in Jimdo-Layouts vorgehen.

5. Integration von fehlenden DIVs
Man kann nur DIVs und IDs ändern, die auch tatsächlich im HTML Ihres Jimdo-Layouts hinterlegt sind. Wenn Sie bestehende (feste) Jimdo-Layouts mit dieser Methode bearbeiten, werden Sie feststellen, dass es immer wieder einmal den Wunsch nach Elementen gibt, die im HTML (an welches Sie ja nicht wirklich herankommen) nicht definiert wurden.

Hierfür können Sie hervorragend das Element „Widget/HTML“ verwenden, mit dem Sie einfach ein neues DIV definieren. Und zwar in der Sidebar, wenn Sie das Element auf jeder Seite benötigen oder im Content, wenn Sie es nur auf bestimmten einzelnen Seiten verwenden möchten.

Als Beispiel: Sie hätten gerne im Kopf Ihrer Seite (sichtbar auf jeder Seite) ein Element, das auf Ihre bestehenden Betriebsferien hinweist. Erstellen Sie dazu mit dem Element „Widget/HTML“ in der Sidebar folgenden Eintrag:

<div id="zeiten">
Achtung: Betriebsferien!!!
</div>

Den Inhalt dieses Feldes (Text) haben Sie bereits in diesem Eintrag hinterlegt.

Wenn der Eintrag so gespeichert wird, macht er da rechts in der Sidebar (verwendet wird im Beispiel das Layout F381) einen recht unspektakulären Eindruck:


6.   Neugestaltung

Also werden wir das von uns begründete DIV #zeiten im nächsten Schritt per CSS formatieren und diesen Eintrag im Head hinterlegen. Zum Beispiel so:

<style type="text/css">
/*<![CDATA[*/
#zeiten {position: fixed;
top: 30px; margin-left: -100px;
font-size: 22px; color: rgb(255, 255, 255);
background-color: rgb(228, 12, 27);
padding: 10px; width: 300px;
font-weight: normal;}
/*]]>*/
</style>

Mit dieser Definition weisen wir dem DIV nicht nur einen auffälligen, sondern auch stabil positionierten Platz innerhalb der Webseite zu. Die Sidebar bleibt damit – obwohl sie den HTML-Aufruf für

#zeiten

enthält auch frei für andere Inhalte. Die Position des HTML-Elements in Sidebar oder Content sollte nach Möglichkeit stabil sein (zu oberst), da die hiermit verbundenen Elemente – wenn sie nicht auf position:fixed stehen auf den Seiten je nach weiterem Content umherwandern.