Startseite BlogContao, OptimierungContao anpassen – 3 wenig bekannte Tipps

Contao anpassen – 3 wenig bekannte Tipps

11. Februar 2010 — Contao Optimierung
Contao anpassen

Contao (ehemals TYPOlight) erfreut sich – zu Recht – zunehmender Beliebtheit. Einzigartig gut ist die Benutzerfreundlichkeit und Anschaulichkeit für Laien. Auch lässt sich das CMS Contao einfach anpassen, obwohl es nicht nur ein Framework ist. Daher setzen wir es auch selbst ein. Recht viel besser kann ein Backend nicht sein. Oder doch? Dieser Beitrag zeigt, wie man das Backend von Contao mit weniger bekannten Tricks noch besser anpassen kann und welche Einstellungen wir optimalerweise vornhemen. Auch wenn sich in der anstehenden TYPOlight/ Contao Version 2.8 viel ändern wird, folgende Anpassungen sind natürlich updatesicher.

Contao TYPOlight?!

Wieso wir Contao empfehlenswert finden und selbst häufig einsetzen, haben wir bereits im Artikel Contao – 8 Vorteile skizziert.
Ansonsten findet man auf der offiziellen Webseite viele Infos. So setzen auch etwa McFit, Schubeck und Demba Ba auf Contao.

»Artikel«

Die Bezeichnung »Artikel« im Backend finde ich unpassend. Dies verursacht immer den meisten Erklärungsbedarf im Handout für Kunden.
Denn Contao verwendet »Artikel« als bloßen Inhaltscontainer oder Inhaltsbereich. Die eigentlichen Inhalte sind dann Elemente des »Artikels«. Diese Konstruktion hat durchaus seinen Sinn, denn je nach Elementtyp (Überschrift, Text, Bildergalerie, …) bietet das CMS dem Benutzer gleich passende Eingabe- und Auswahlfelder – ähnlich wie bei Redaxo. Allerdings ist das per se schon erklärungsbedürftig und die Bezeichnungen ab Werk sind da nicht gerade hilfreich.
Also ändern wir diese. Diese Anpassung geht ganz einfach und ist zudem updatesicher.
In der Datei langconfig.php unter system/config/ kann man für jede Sprache eigene Übersetzungen updatesicher überschreiben. Die deutschen Standardübersetzungen findet man übrigens in modules/backend/languages/de/.
Wenn man anstatt Inhalte > Artikel > Elemente beispielsweise Inhalte > Inhaltsbereich > Inhaltselemente verständlicher findet, könnte man dort folgendes einfügen (Umlaute in UTF-8 codieren!):

// Bezeichnung Artikel verbessern
$GLOBALS['TL_LANG']['MOD']['article'] = array('Inhaltselemente', 'Inhaltsbereich und Inhaltselemente verwalten.');
$GLOBALS['TL_LANG']['CHMOD']['editarticles']   = 'Inhaltsbereich bearbeiten';
$GLOBALS['TL_LANG']['CHMOD']['movearticles'] = 'Hierarchie der Inhaltsbereiche ändern';
$GLOBALS['TL_LANG']['CHMOD']['deletearticles'] = 'Inhaltsbereich löschen';
$GLOBALS['TL_LANG']['tl_article']['published'] = array('Inhaltsbereich veröffentlichen', 'Den Inhaltsbereich auf der Webseite anzeigen.');
$GLOBALS['TL_LANG']['tl_article']['new'] = array('Neuer Inhaltsbereich', 'Einen neuen Inhaltsbereich anlegen');
$GLOBALS['TL_LANG']['tl_article']['show'] = array('Inhaltsbereich-Details', 'Details des Inhaltsbereichs ID %s anzeigen');
$GLOBALS['TL_LANG']['tl_article']['edit'] = array('Inhaltsbereich bearbeiten', 'Inhaltsbereich ID %s bearbeiten');
$GLOBALS['TL_LANG']['tl_article']['copy'] = array('Inhaltsbereich duplizieren', 'Inhaltsbereich ID %s duplizieren');
$GLOBALS['TL_LANG']['tl_article']['cut'] = array('Inhaltsbereich verschieben', 'Inhaltsbereich ID %s verschieben');
$GLOBALS['TL_LANG']['tl_article']['delete'] = array('Inhaltsbereich löschen', 'Inhaltsbereich ID %s löschen');

Diese Zeilen bügeln in allen Sprachen die Übersetzung über, wer es also mehrsprachig braucht, muss zuvor per If-Abfrage die Sprachen unterscheiden.

Contao Editor anpassen

In Contao arbeitet eine angepasste Version des Editors TinyMCE:
Contao Editor anpassen - vorher

Schriftgröße

In der Standard-Einstellung ist die Schriftgröße nichts für hohe Auflösungen oder Sehschwache. Das kann man updatesicher ganz einfach anpassen. Man legt ins Hauptverzeichnis eine CSS-Datei, die basic.css heißen muss. Denn diese wird standardmäßig vom Editor abgefragt.
Darin könnte dann stehen (vielleicht noch ein color:#000; für besseren Kontrast):

/*Backend Editor*/
body{
font-size:12px;
font-family:verdana,arial,sans-serif;}

Will man die CSS-Datei ins Contao-Hauptverzeichnis legen, muss man das Contao mitteilen, ansonsten löscht Contao die Datei. Dies geschieht in der Datei system/config/dcaconfig.php:
$GLOBALS['TL_CONFIG']['rootFiles'][] = 'basic.css'; 

Nutzt man zur Ladezeitoptimierung komprimierte Dateien, muss man natürlich auch eine basis.css.gz anlegen.

Schaltflächen, Buttons

Der Editor ist nicht überladen aber auch nicht auf das Wesentliche reduziert, wenn man vom Normalfall ausgeht. Den Contao-Editor kann man auch ganz einfach updatesicher anpassen.
Die Standardeinstellung von Contao findet man unter system/config/tinyMCE.php. Dieses wird aber ggf. bei einem Update überschrieben – also nicht updatesicher änderbar.
Daher kopieren wir die Datei und speichern diese etwa als tinyCustom.php im gleichen Verzeichnis. Die wesentlichen Funktionen zur Anpassung finden sich zu Beginn unter Plugins und am Ende unter theme_advanced_blockformats und theme_advanced_buttons1 bis 3 (für jede Buttonzeile).
Will man nur eine Zeile mit minimalen Schaltflächen und reduzierter Formatauswahl, könnte das zum Ende so aussehen:

theme_advanced_blockformats : "p,h1,h2,h3,h4",
theme_advanced_buttons1 : "bold,italic,separator,typolinks,unlink,separator,formatselect,styleselect,separator,bullist,numlist,outdent,indent,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,pasteword,separator,code,separator",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""

Nun muss man Contao für die Anpassung noch mitteilen, dass es die tinyCustom.php anstatt der normalen tinyMCE.php verwenden soll. Dies geht einfach und updatesicher in der Datei dcaconfig.php unter system/config:
// Die eigene RTE-Konfiguration für Text-Elemente verwenden
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';

Ergebnis: Contao Editor vorher und nachher

Contao Editor anpassen - vorher
Contao Editor anpassen - nachher

Komprimierung

Contao hat bei uns selbst bei umfangreicheren Seiten oder Multidomain-Umgebungen (mit 20 und mehr Domains) sehr schnelle Ladezeiten – ohne Caching und ohne Komprimierung.
Ab Version 2.8 wird sich hier auch einiges verbessern, daher will ich nicht vorgreifen. Achtet anbedingt auf die entsprechende Erweiterung in der .htaccess, welche die .gz-Varianten ins Spiel bringt.
Zur Ladezeitoptimierung mit GZip-Komprimierung, expire-Datum und last modified-Angaben im Header in einem der folgenen Beiträge mehr.

Fazit

Ich hoffe, ich konnte jedem Contao-Nutzer und Betreuer mindestens einen Tipp zur generellen Verbesserung des CMS geben.
Weitere sinnvolle Vorschläge sind willkommen!

NETPROFIT Blog

Im Blog schreibt         über CMS, SEO & Webdesign. Kontakt →

Kategorien
SMX München 2017 -15% Rabatt-Code: NETPROFITSMX

7 Kommentare zu Contao anpassen – 3 wenig bekannte Tipps

Hi, vielen Dank für die Tipps.

Gerade das mit den TinyMCE ist eine gute Sache, da vor allem Kunden mit einem überladenen Editor nicht zurecht kommen. Das Verhältnis zu WYSIWYG ist da eher schwierig zu erklären…

Besten Dank!

Gravatar von Clemens - via garvatar.org Clemens
Kommentar 1
1. Mai 2010 um 09:10 Uhr

Hallo,
hoffen wir mal, dass Contao bald Typo3 ablöst. Wobei ich auch gespannt bin, wie sich Typo3 in Version 5 gibt.

Gravatar von Dominik - via garvatar.org Dominik →
Kommentar 2
4. August 2010 um 18:48 Uhr

Die Änderung der Sprachvariablen lässt sich updatesicher (und somit besser) in /system/config/langconfig.php ablegen. Die vorhandenen Variablen werden dabei einfach überschrieben.

Gravatar von FloB - via garvatar.org FloB
Kommentar 3
13. Oktober 2010 um 11:27 Uhr

@Dominik,

ich denke nicht Contao T3 je ablösen wird. T3 ist viel umfangreicher und eher etwas für wirklich Professionelle Webseiten. Wogegen Contao eher etwas für kleinere Webseiten ist.

Gravatar von Markus - via garvatar.org Markus →
Kommentar 4
29. Dezember 2010 um 14:33 Uhr

Hallo Markus,
ich gebe Dir insoweit recht, dass Typo3 eher etwas für wirklich professionelle Programmierer ist. Dass es T3 nicht ablösen wird in Punkto Umfang ist sicherlich auch richtig – und aus meiner Sicht auch gar nicht erstrebendswert. Allerdings deckt Contao einen sehr großen Teil aller „normalen“ Webseiten ab und ist in Punkto Pflege jedenfalls für Kunden deutlich einfacher. Ansonsten muss man sowohl bei T3 wie auch bei Contao ans Programmieren passender Erweiterungen. Hier kommt es meiner Erfahrung nach eher darauf an, wie fit man in der Funktionsweise der Hooks usw. des jeweiligen Systems ist – ganz egal ob Contao oder Typo3.

Gravatar von Robert Hartl - via garvatar.org Robert Hartl
Kommentar 5
2. Januar 2011 um 23:14 Uhr

Hallo Robert,
der Tipp mit der Schriftvergrößerung im Backend gefällt mir gut. Ich habe das nachgebastelt, aber es funktioniert bei mir nicht. Mir ist aufgefallen, dass Du schreibst, die Datei im Hauptverzeichnis soll „basic.css“ heißen, aber in der dcaconfig.php wird auf eine „basis.css“ verwiesen. Soll das so richtig sein, oder sollte die Datei in der dcaconfig.php auch „basic.css“ heißen? Wie dem auch sei, ich hab es sowohl mit basis.css als auch mit basic.css ausgetestet, und mein Contao springt nicht drauf an.

Ich kenne mich mit PHP leider noch nicht so ganz gut aus. Habe den String $Globals….. unter den anderen $Globals, der schon in der dcaconfig.php stand, kopiert. Die basis.css.gz habe ich nicht angelegt, da ich nicht weiß, was ich da hineinschreiben soll und wo diese hingepackt werden soll. Da ist mir als Anfängerin der Artikel noch etwas zu schwammig.

Können Sie mir mitteilen, was ich falsch gemacht habe?

Danke schon mal im Voraus und freundliche Grüße,
Heike Schulze

Gravatar von Heike - via garvatar.org Heike
Kommentar 6
17. Februar 2011 um 20:58 Uhr

Hallo Heike,
danke für die Frage. Dieser Artikel ist ja nun schon über 1 Jahr her, so dass sich bei TYPOlight/ Contao viel geändert hat.
Grundsätzlich muss es in der dcaconfig natürlich auch identisch basic.css lauten, das war ein Fehler, ist korrigiert.

Ausgangspunkt in Contao für den Backendeditor ist die Datei tinyMCE.php in system/config/. Dort steht in der Zeile content_css, an welchen Stellen der Editor nach CSS-Anweisungen sucht. Ohne Änderungen sucht der Editor in /system/themes/tinymce.css und danach tl_files/tinymce.css (sofern man das Uploadverzeichnis nicht geändert hat). Dies ist seit Version 2.9 so, die basic.css gibt es nicht mehr.

Jetzt kann man natürlich die tl_files/tinymce.css anpassen. Da die letztere CSS die vorigen überschreibt, macht das Sinn. Bindet man diese tinymce.css auch ins Frontend ein bzw. die Inhaltsregeln des Frontend-CSS auch in die tinymce.css dürfte die Vorschau im Editor dem Ergebnis auf der Webseite nahe kommen. Das mag für manche recht hilfreich sein.

Man kann aber auch die zugrunde liegende tinyMCE.php in system/config/ ändern und Conato vorgeben, die eigene, andere tinyMCE.php zu nehmen. Nennt man diese tinyCustom.php kann man in besagter Zeile content_css seine eigene CSS-Datei einfügen und auch die Buttons simpel steuern. Jetzt muss man Contao in der system/config/dcaconfig.php nur noch mitteilen, dass Contao die tinyCustom.php anstatt der originalen tinyMCE.php verwenden soll:

$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';
$GLOBALS['TL_DCA']['tl_news']['fields']['text']['eval']['rte'] = 'tinyCustom'; 
$GLOBALS['TL_DCA']['tl_calendar_events']['fields']['details']['eval']['rte'] = 'tinyCustom';  

jetzt ausloggen, Cookies und Cache löschen und einloggen und der neue Backend Editor in Contao ist angepasst.

Gravatar von Robert Hartl - via garvatar.org Robert Hartl
Kommentar 7
17. Februar 2011 um 22:42 Uhr

Kommentar schreiben zu Contao anpassen – 3 wenig bekannte Tipps

Kommentare werden erst nach manueller Freischaltung sichtbar.

Kommentar

KommentatorIn

(erforderlich)

(erforderlich, wird nicht angezeigt)

(optional)

Nibelungenplatz 2
D-94032 Passau

Tel.: +49 (0)851/ 966 31-31
Fax: +49 (0)851/ 966 31-41
E-Mail:

©  2001 − 2017  NETPROFIT  | Kontakt | AGB | Datenschutz, Impressum