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

Achtung! CSS-Anpassungen im <head> der Webseite berühren auch den Bearbeitungsmodus!

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.