Joomla Editor Styles - Formatierungen im Content per CSS

Dienstag, 30. März 2010

Tinymce-Styles Der in Joomla! mitgelieferte Editor TinyMCE bietet die nützliche Funktion, Anwendern CSS-Stile zur Verfügung zu stellen.

Farbiger Text, Hyperlinks mit Icons, optisch ansprechende Tabellen, Abstand um Bilder sind einige Beispiele, die mit CSS-Stilen einfach und effizient umgesetzt werden können.

Die Vorteile liegen auf der Hand:

Der Anwender braucht lediglich den Stil anzuwenden
Der HTML Code bleibt schlank
Nachträgliche Änderungen benötigen nur eine Änderung in der CSS-Datei
Sie können überflüssige Schaltflächen zur Formatierung von Text ausblenden

Wie werden Styles implementiert?

Empfohlen: Laden Sie sich die Firefox Erweiterung Web Developer Toobar bzw. die Internet Explorer Developer Toolbar herunter, installieren Sie diese und benutzen Sie die dort vorhandenen Funktionen zum temporären Deaktivieren des Browser Caches.
Legen Sie im Ordner css unterhalb ihres Templates eine Datei mit dem Namen:
content_styles.css an
Tragen Sie in die Dateien:
- template.css
- editor.css
  
  jeweils diesen CSS-Code ein:
```
 @import url('content_styles.css');
```

Um das folgende Beispiel nachvollziehen zu können, tragen Sie in die Datei
content_styles.css ein:

.tabellegrau {
  background-color: silver;
  border-collapse: collapse;
  border-spacing: 0px;
  border: 2px solid gray;
  width: 100%;
}
.tabellegrau td {
  border: 1px solid gray;
  padding: 5px;
}
.grossschriftblau {
  text-transform: uppercase;
  color: navy;
}
.zehnpixelabstand {
  margin: 10px;
}
.neuezeile {
  clear: both;
}
.linkmiticon {
  background-image: url(/images/M_images/weblink.png);
  background-repeat: no-repeat;
  padding-left: 20px;
}
.listeroemisch {
  list-style-type: lower-roman;
}
.bilderrahmenrot {
  background-color: maroon !important;
  border: 1px solid red !important;
  margin: 5px 11px 15px !important;
  padding: 5px !important;
}
.ueberschriftrot {
  background-color: maroon;
  display: block;
  color: white;
  height: 25px;
  line-height: 25px;
  padding-left: 5px;
  font-size: 16px;
}

Deaktivieren Sie den Browser-Cache vorübergehend, sonst werden Ihnen die Stile möglicherweise nicht angezeigt.

Beispiele1: Tabelle formatieren

Fügen Sie eine Tabelle ein (Der Editor muss im Modus "Komplett" eingestellt sein):

TinyMCE Insert Table

und wählen Sie bei "Class" den CSS-Stil "tabellegrau" aus.

Das Ergebnis:

Tabellenfeld	Tabellenfeld
Tabellenfeld	Tabellenfeld

Beispiel2: Text großgeschrieben und farbig anzeigen lassen

Schreiben Sie einen Text, markieren Sie den Text, klicken Sie oben auf das "Styles"-Dropdown-Feld und wählen Sie den Stil "grossschriftblau".

Ergebnis: Dieser Text wurde klein geschrieben, wird aber blau und in Großbuchstaben angezeigt.

Sie ersparen dem Kunden das Groß-Schreiben und können den Text ganz normal ausdrucken, auch in Google erscheint er ganz normal.

Beispiel3: Hyperlink mit Icon versehen

Fügen Sie einen Link ein und wählen Sie bei "class" den Eintrag "linkmiticon":

TinyMCE Insert Link

Ergebnis: Link mit Icon

Beispiel4: Liste mit römischer Nummerierung

Erstellen Sie eine Liste. Markieren Sie die gesamte Liste mit der Maus und wählen sie den Stil "listeroemisch".

Ergebnis:

Listeneintrag
Listeneintrag
Listeneintrag

Tipp: Auf diesem Wege sind auch eigene Bilder als Aufzählungszeichen möglich.

Beispiel5: Anordnung von Bildern und Text in Tabellenform aber ohne Tabelle

Arbeiten Sie oft mit links oder rechts fließenden Bildern und Text daneben? Dann kennen Sie vielleicht das Problem, dass Sie den Text des nächsten Absatzes gern unterhalb des Bildes anzeigen möchten. Viele Anwender arbeiten hier mit Zeilenumbrüchen oder verwenden Tabellen.

Es gibt aber eine viel einfachere Möglichkeit:

Neue Zeile im TinyMCE