Jimdo - CSS Grundlagen

Was ist CSS ?

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

 

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>

 

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* an, mit denen die Struktur des aktuellen Inhalts einer Webseite ausgelesen werden kann. (Mozilla/Chrome: strg/cmd+shift+i)

 

Um ein Element zu selektieren, genügt es, bei aktivierter Selektionsschaltfläche mit der Maus im html-Fenster darüber hinweg zu fahren und es anzuklicken. 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

Abstände vor Elementen mit CSS

Mit oben erklärter Methode lassen sich auch Abstandselemente vor vorhandenen Elementen vermeiden. Alles, was dazu benötigt wird, ist die ID des Elementes, welches mit einem Abstand versehen werden soll.

 

Die IDs von weiteren Elementen, die den gleichen Abstand bekommen sollen, können einfach mit komma-getrennt an den ersten Bezeichner angehängt werden 

 

Beispiel:

 

<style type="text/css">

 

   /* 50px Abstand oben

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

    #cc-m-8191846164, #cc-m-8191846264, #cc-m-8191846364 {

      margin-top: 50px;

    } 

 

</style>

 

 

Mehr Infos:

- https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/margin

 

Bezeichner finden: 

Dev-Tools im Browser aufrufen strg+shift+i


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:

Jimdo Safe-Mode (abgesicherter Modus) 

 

Achtung: CSS-Anpassungen im Head-Bereich der Webseite beeinflussen auch den Bearbeitungsmodus! Eine falsche Einstellung in einem Skript kann u.U. die weitere Bearbeitung der Webseite unmöglich machen! 

 

Lösung:

  • In diesem Fall hilft nur das Öffnen der Webseite im "abgesicherten Modus" und die anschließende Korrektur der Skripte: 
  • Jimdo "safe-mode" aktivieren: https://cms.e.jimdo.com/app/?safemode=1
  • .cc-pagemode-default vor einem Bezeichner: Anweisung wird im Bearbeitungsmodus nicht ausgeführt

 

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.