Jimdo - CSS Grundlagen

Jimdo-Elemente können außer "mit Bordmitteln" (= Design-Werkzeuge) auch noch anders verändert bzw. formatiert werden: per CSS-Script. 

 

CSS-Skripte sind Stil-Anweisungen, die bestimmten html-Bereichen bestimmte Formatierungen zuweisen (CSS = Cascaded-Style-Sheet = Hierarchisch aufgebautes Style-Anweisungsblatt). Infos bez. CSS findet Ihr z.B. hier:

 

Beispiel: 

Diese beiden Grafiken sind gar keine Grafiken, sondern per CSS formatierte Bereiche (div) mit einer bestimmten Höhe (height), Breite (width) und einem angerundeten Rahmen von 1px Stärke mit der Farbe #ccc (border/border-radius):

 

...in Bearbeitung

...in Bearbeitung

 

 

Code:

 

<div id="beispiel">

<div class="cssbox" style="margin-left: 15px; height: 200px; width: 200px;">

<h3>...in Bearbeitung</h3>

</div>

<div class="cssbox" style="height: 200px; width: 200px; position: absolute; margin-left: 30px; margin-top: -180px; background-color: #fff;">

<h3>...in Bearbeitung</h3>

</div>

</div>

Erklärung:

In oben stehendem html-Code kommen 2 Arten von CSS-Anweisungen zu Anwendung:

  • rot markiert: CSS-IDs und CSS-Klassen (id/class) = Anweisungen, die dem html-Code über in ein Script zugeordnet werden, dass zumeist in den Head-Bereich der Webseite geschrieben wird.
  • blau markiert: sog. Inline-Style = Anweisungen, die direkt in den Code geschrieben werden

Die ID id="beispiel" hat in diesem Beispiel keine besondere funktion, sorgt aber für eine eindeutige Identifizierung des gesamten Bereiches (<div> ... </div>)


Die Klasse class="cssbox" sorgt in dem Beispiel für die abgerundeten Ecken und den Rand der Bereiche (div), für die sie gelten (s.a. Grafik weiter unten).


Die Inline-Anweisungen style="..." sorgen in dem Beispiel für die Abmessungen und die Position der Bereiche. 


CSS-Anweisungen in den Head-Bereich schreiben

Dieses Kapitel wird auf der Jimdo-Hilfe ein wenig stiefmütterlich behandelt, ist aber wesentlich für Style Anweisungen, die per Klasse oder ID zugewiesen werden:

Zitat: "Zum Bearbeiten des <head>Bereichs, öffne den Menüpunkt Einstellungen in der Bearbeitungsleiste.
Dort findest du in der Sektion Webseite das Symbol Head bearbeiten.


Klicke auf Head bearbeiten, um den Editor für diesen Seitenbereich zu öffnen und wähle Gesamte Webseite. Der Editor ist zunächst leer, wenn keine Eintragungen gemacht wurden.

 

1. Einstellungen

Einstellungen

2. Head Bearbeiten

 Head Bearbeiten

Die Style-Anweisungen werden einfach in den Editor geschrieben.

 

Wichtig: Style-Anweisungen müssen immer zwischen sog. "style-tags" geklammert werden
 
(<style> ...</style>)  - die Syntax für eine CSS-Anweisung im Head-Bereich ist also:

 

 

<style type="text/css">

 

/*Kommentar 

---------------------------------*/

#id {

  Anweisung: Wert;

}

 

.klasse{

  Anweisung: Wert;

}

 

#id .klasse{

  Anweisung: Wert;

}

 

/*weitere Anweisungen...*/

 

</style> 

 

 

 

Beispiel:

 

Wichtig: bei Anweisungen mit gleichem Namen gilt immer die zuletzt im Skript geschriebene!

Jimdo-Elemente gezielt beeinflussen

 

Elemente selektieren

Um vorhandene Jimdo-Elemente gezielt mit einem CSS-Skript anzupassen, müssen sie zunächst selektiert werden. Dazu bieten die meisten modernen Browser eine Reihe von kostenlosen sog. "Developer-Tools", mit denen die Struktur des aktuellen Inhalts einer Webseite ausgelesen werden kann. (Dev-Tools für Chrome-Browser: Tastenkombination strg/cmd+shift+i)

 

Um ein Element zu selektieren, genügt es, mit der Maus im html-Fenster darüber hinweg zu fahren und es anzuklicken (...oder bei aktivierter Selektionsschaltfläche im Ansichtsfenster). Die Style-Einstellungen des aktiven Elementes erscheinen dann unter dem aktuellen html-Code im rechten Fenster:

 

Chrome Dev-Tools

Jetzt kann das Element per CSS-Anweisung gezielt neu formatiert werden:

 

  • Im Beispiel würde z. B. der Eintrag:

<style type="text/css">

 

/*Überschrift h2 (Mittel) schwarz

--------------------------------------*/ 

.content-options h2:not(.j-blog-headline):not(.j-blog-comment-counter) {

    color: black !important;

 

</style>

 

...die Textfarbe aller h2-Überschriften auf der Unterseite, auf der das Skript eingesetzt/aktiviert ist, schwarz einfärben.

 

  • Wenn nur die eine Überschrift von der Anpassung betroffen sein soll, müsste sie mit einer eigenen Klasse versehen werden. Es ist aber auch möglich, einfach die ID des Elementes voranzustellen (empfohlen):

 

<style type="text/css">

 

/* h2 für Element #cc-m-7791190364  schwarz

--------------------------------------*/ 

#cc-m-7791190364 h2 {

    color: black !important;

 

</style>

 

 

PS: der Zusatz "!important" ist nicht unbedingt notwendig. Sollte jedoch irgend ein anderes Skript für die originale Formatierung des Elementes verantwortlich sein, würde dieser Zusatz die Umformatierung erzwingen

Beispiel

Warenkorb ausblenden

Wenn Du einen Jimdo-Shop auf Deiner Seite erstellt hast und diesen nun doch lieber wieder deaktivieren möchtest, reicht es eigentlich, alle Shop-Produkte auf der Seite zu löschen oder sie auf eine versteckte Seite zu verschieben (...versteckte Seite = Navigation bearbeiten > Augensymbol klicken).

 

Damit wirst Du aber das Warenkorb-Symbol auf der Seite nicht wieder los - Es gibt dafür keinen Schalter im System! Hier zeigen wir Schritt für Schritt, wie das mit einem CSS-Skript dennoch funktioniert. 

 

1. Bezeichner suchen

Im Besuchermodus Rechtsklick auf Warenkorb-Symbol > Untersuchen

2. CSS schreiben

Eine funktionierende CSS-Anweisung für Inhalte ausblenden ist "display:none"

...also ist das CSS-Script für Warenkorb ausblenden entweder:

 

.j-cart.is-empty  {

    display:none

}

 

oder:

 

.jtpl-cart {

    display: none;

}

 

3. Style-Anweisung (CSS-Skript) erstellen

Die Style-Anweisung bzw. das Skript für den head-Bereich sieht also folgendermaßen aus:

 

<style type="text/css">

.j-cart.is-empty  {

    display:none

}

</style>

 

oder:

 

<style type="text/css"> 

.jtpl-cart {

    display: none;

}

</style>

 

 

4. Einsetzen in den head-Bereich der Webseite

Im head-Bereich (Menü > Einstellungen > Head-Bereich bearbeiten) eingesetzt und gespeichert wird das Skript vom System automatisch wie folgt erweitert:

 

5. Ergebnis

Im Besucher-Modus ist das Warenkorb-Symbol nun ausgeblendet:

Achtung! Gefahr!

 

CSS-Anpassungen im <head> der Webseite können den Bearbeitungsmodus beeinflussen!

Eine falsche Einstellung in einem Skript kann u.U. die weitere Bearbeitung der Webseite unmöglich machen! 

In diesem Fall hilft nur das Öffnen der Webseite im "abgesicherten Modus" und die anschließende Korrektur der Skripte:

 

Jimdo "safe mode"
Jimdo "safe mode"

Im "safe-mode" sind sämtliche eigenen Skripte auf der Webseite deaktiviert und können so korrigiert oder herausgenommen werden. Wird der "safe-mode" danach beendet, wird die Webseite wieder wie gewohnt zu bearbeiten sein.