Joomla Editor Hintergrundfarbe

Editor Hintergrundfarbe ändern

Die Farbe für den Hintergrund des Editors in Joomla entspricht nicht den eigenen Vorstellungen? Eine Anpassung ist gar nicht schwer. So gehts!

Editor anpassen!

Man hat sich ein schönes Template mit dunkelblauen Hintergrund installiert. Es sieht toll aus und man möchte auch gleich einen neuen Artikel schreiben, damit sich die Seite entsprechend mit Text füllt. Oder man möchte bisherigen Content an das neue Template anpassen. Voller Tatendrang öffnet man also seinen Editor im Backend und will losschreiben. Jetzt stellt man überrascht fest, daß auch der Editor einen dunkelblauen Hintergrund hat. Tja leider kann man da die schwarze Schrift nicht wirklich mehr erkennen. Das muss unbedingt geändert werden. Aber wie geht das?

Hier kommt es sehr darauf an, welchen Editor man benutzt. Bei allen Editoren kann man Farben und Stile mit Hilfe von Cascading Stylesheets verändern, beziehungsweise anpassen. Manche Editoren bringen auch eine eigene CSS Datei mit. Für andere Editoren ist es nötig eine editor.css Datei zu erstellen. Dann ist auch noch wichtig zu wissen, wo man dem Editor sagt, welche CSS Datei er verwenden soll.

Als erstes erstellt man sich eine leere Textdatei. Diese benennt man zum Beispiel um in "editor_css.css". Man kann aber auch einen anderen Namen für die Datei verwenden. Hauptsache aussagekräftig genug, um immer wieder zu wissen was da wohl drin steht. Hier schreibt man sich nun logischerweise die gewünschten CSS Anweisungen rein. Also eigentlich nur die Farben für Text und Hintergrund. Das könnte so aussehen:

body {
color:#000;
background-color:#fff;
}

Die gesamten Editoranweisungen sind im Selektor: "body" untergebracht. Mit "color" wird die Textfarbe definiert. Die drei Nullen bedeuten Schwarz. Drei mal F bedeutet Weiss und definiert die Hintergrundfarbe. Farben mit nicht gleichen Zahlen bzw. Buchstaben, bestehen aus sechs Zeichen. Die Hintergrundfarbe die Sie hier sehen, lautet: #DCBA2F. 3xF ist also nur eine Abkürzung und könnte auch als #ffffff geschrieben werden. Man kann sinnvollerweise auch noch einen Aussenabstand mit "margin" und/oder einen Innenabstand mit "padding" angeben, was aber nicht unbedingt sein muss. Hier kann man natürlich auch noch die Schriftart, Schriftgröße und viele weitere Sachen angeben. Man könnte auch aus der Template CSS Datei die Body-Einträge übernehmen und entsprechend verändern. Hat man die Datei fertiggestellt, muss sie noch an die richtige Stelle kopiert werden. Das wäre hier:

../templates/name_des_templates/css

In diesem CSS Ordner liegt auch die Datei für das benutzte Template. Diese nennt sich meistens template_css.css, kann aber ebenso anders benannt sein. Manch ein Editor muss jetzt aber noch den richtigen Pfad mitgeteilt bekommen, woher er sich die CSS Datei holen soll. Dazu geht man nach Mambots --> Site Mambots und sucht sich den Eintrag für den richtigen Editor.

Hier lassen sich nun mehr oder weniger umfangreiche Einstellungen vornehmen. Wichtig für das Aussehen zum Beispiel des Editors TinyMCE, sind die Angaben bei Template CSS Classes und Custom CSS Classes.

Bei Template CSS Classes kann man "Yes" oder "No" wählen. Wählt man hier "Yes", so wird immer die Standard CSS Datei des Templates aufgerufen. Der Editor verwendet also immer die CSS Datei des gerade verwendeten Templates, wobei die im Body-Tag angegebenen Anweisungen benutzt werden. Wählt man hier "No", so wird ebenfalls immer die Template CSS Datei aufgerufen. Es sei denn, man hat eine eigene Datei erstellt.

Dann gibt man speziell bei Custom CSS Classes den Pfad zu der eigenen CSS Datei an. Der könnte so aussehen: /templates/template_name/css/editor_css.css. Man sollte den Pfad so beibehalten, weil man dann das Template so als Zip Archiv abspeichern und immer wieder installieren kann. Bei vielen Editoren ist die Installation in diesem Pfad sogar Pflicht. Dann muss man beim JCE in den Parametern auch nur noch die Datei ohne Pfad angeben.

Kurz zusammen gefasst: Man erstellt eine Datei editor_content.css und kopiert sie nach ../templates/name_des_templates/css. Dann geht man ins Joomla-Backend. Unter Mambots --> Site Mambots öffnet man TinyMCE WYSIWYG Editor. Bei den Parametern auf der rechten Seite unter Template CSS Classes klickt man "No" an, was aber schon die Standard Einstellung ist. Da man den Namen editor_content.css verwendet, muß man nichts weiter angeben. Das wäre die einfachste und beste Lösung für diesen Editor. Verwendet man einen anderen Namen, muss man den Pfad zu dieser Datei angeben.

Wer gerne den TMEdit verwendet, muss ein wenig mehr Aufwand betreiben. Bei diesem Editor lässt sich in den Parametern keine CSS Datei zuweisen. Hierfür müssen wir die Datei tmedit.php im Verzeichnis ../mambots/editors/ bearbeiten. Dazu Zeile 110 aufrufen.

config<?php echo $name ?>.pageStyle='@import url(<?php echo $mosConfig_live_site ."/templates/". $template ."/css/template_css.css";?>);';

Hier ändert man einfach "template_css.css" in "editor_content.css" um.

Manche Editoren bekommen die Zuweisung ihrer CSS Datei über Javascript. Dann muss man sich die entsprechende JS Datei in ../mambots/editors/ suchen und bearbeiten. Im Prinzip lassen sich aber nahezu alle Editoren auf ähnliche Weise anpassen.