CSS-Dateien in TL - Wo Wie Warum - incl. suckerfish, TinyMCE
Updates und neue Infos packe ich immer hier oben in diesen ersten Post.
Könnt ihr eure Posts, welche sich durch Updates erledigt haben, und die, welche keine Hilfe mehr für andere darstellen, bitte aus diesem Thread löschen? Danke, Andreas
Vorab
da die Dateien im Ordner tl_files/xBrowser_style_sheets veraltet sind, habe ich sie mal erneuert bzw. ergänzt. Der kompl. Ordner wird nicht mehr Bestandteil von Tl 2.8 sein. Alle alten x___.css habe ich gelassen wie sie sind. Dieser Thread befasst sich nicht mit der Bearbeitung von Stylesheets aus dem BE heraus (warum und mehr dazu weiter unten).
Änderungen bzw. neue Basis-CSS-Dateien
Kompl. Ordner im Anhang als ZIP-Datei.
Warum dieser Thread?
Will man ein neues leeres Projekt, also ohne den Import des Music-Academy-Example-Templates während der Installation, beginnen, steht man erstmal was die Formatierung betrifft fast bei Null.
Welche CSS-Dateien werden von TL default eingebunden?
1. Im Seitentemplate fe_page.tpl
Hardcodiert wird hier im HEAD über ein LINK die Datei plugins/slimbox/css/slimbox.css importiert, damit die JavaScript-Großansicht der Bilder mit Slimbox (das ist ein Lightbox-Clone und erfordert Mootools) ihr typisches Aussehen und Verhalten bekommt. Ohne diese CSS-Datei funktioniert die Slimbox nicht. Wer weiß, dass er keine Slimbox in seiner Website einsetzen wird, kann diese Zeile aus dem Templ. entfernen. Zum neuen TYPOlight 2.8.x siehe den Hinweis im Post #53 in diesem Thread von pmmueller.
Dynamisch über <?php echo $this->framework; ?> (nicht <?php echo $this->stylesheets; ?>) im HEAD-Bereich wird die Datei system/typolight.css, und für IEs kleiner als 8 zusätzlich die Datei system/iefixes.css eingebunden. Diese Dateien sollen einen Browser-Reset bewirken, Browser-Bugs abfangen und dafür sorgen, dass die spätere Layoutgestaltung mit den floatenden DIVs in allen Browsern funktioniert. Mittlerweile gibt es auch eine erweiterte CSS-Reset-Datei namens basic.css https://contao.org/herunterladen.html#css. Achtung! Diese Datei ist nicht im Core von TL enthalten, ihr müsst sie downloaden und manuell einbinden. Diese Datei als Basis einzubinden ist zwingend zu empfehlen, es sei denn man setzt das Framework YAML auf.
Desweiteren sind manche Module so programmiert, dass sie bei Bedarf mittels <?php echo $this->stylesheets; ?>, ihre eigenen Modul-CSS-Dateien einbinden. Entfernt man diese Zeile, könnte es also sein, dass evtl. ein Modul nicht wie erwartet funktioniert.
(Über die Anweisung <?php echo $this->stylesheets; ?> würden auch die CSS-Dateien aus dem BE-Modul-Stylesheets als LINK-Element in die Seite generiert werden, falls welche erstellt wurden. Aber in diesem Thread geht es hauptsächlich darum, gänzlich auf das BE-Modul-Stylesheets zu verzichten und dort keine Dateien drinnen zu haben. mehr dazu unten)
2. Im BE über ein Seitenlayout
Ein Seitenlayout zu erstellen ist Pflicht, ohne gibt es keine Seite im FE. Setzt den Haken bei 'Standardlayout', dann braucht ihr den Seiten noch nicht einmal ein Layout zuzuweisen - ohne Zuweisung erhält jede Seite das Standardlayout. Werte die hier eingetragen werden - welche Spalten, Breiten, Zentrierung... - also alles was Formatierung mit CSS betrifft, wird von hier übernommen und in die HTML-Seiten eingetragen - aber wo? und wie?
Ganz einfach: Im Seitentemplate fe_page.tpl ist im HEAD die Anweisung <?php echo $this->framework; ?>. Darüber wird an dieser Stelle ein STYLE-Element mit zentralen Formaten für diese Seite entsprechend der Layouteinstellungen generiert. Lässt man im Seitenlayout alle Einstellungen, welche CSS-Formatierungen betreffen leer, dann wird an dieser Stelle im Template nichts generiert. - Sollte man also unbedingt die zentralen Formate aus dem HEAD entfernen wollen, so sollte man sie zumindestens einmal generieren lassen und sie sich genau ansehen und kopieren, bevor man sie aus dem HEAD entfernt und sie in seine eigene CSS-Datei integriert. Achtung! Bei entfernen der Anweisung aus dem Template werden auch typolight.css und iefixes.css nicht mehr eingebunden.
Individuelle CSS-Dateien manuell einbinden (nicht importieren)
1. Welche Dateien?
Die Dateien, welche ich hier in das Archiv gepackt habe, kann man jetzt erstmal als Basis in sein Projekt einbinden (wie? später). Dabei könnt ihr alle Dateien mit einem x davor ignorieren, die sind nur wegen Abwärtskompatibilität enthalten. Möchte man mit dem Gridsystem arbeiten https://contao.org/herunterladen.html#css, dann bindet man entweder gridpx.css, oder gridpc.css ein. Möchte man ein Dropdown-Menü, dann bitte erst mal nur die horizontale oder vertikale suckerfish einbinden - sie sind noch nicht auf gleichzeitigen Gebrauch abgestimmt. Auch ist die navigation.css nicht gerade das Gelbe vom Ei, es ist ja noch die alte Originaldatei. An einer neueren bin ich dran, ist im Alpha-Stadium. Ist im zip-Paket.
2. Wie und wo einbinden? (zwei Möglichkeiten)
1. Über ein Seitenlayout im Feld 'Zusätzliche <head>-Tags'. Hierbei ist darauf zu achten, dass man die Dateien nicht in den Root der Seite legt, da sie ansonsten von TL gelöscht werden. Ich empfehle den Ordner /tl_files/css/. Auch zu beachten ist, dass die Angaben aus diesem Feld mittels der Anweisung <?php echo $this->head; ?> im Seitentemplate fe_page.tpl in die Seite generiert werden und somit z.B. unterhalb der system/iefixes.css sind. Korrekturen für IEs kleiner als 8 könnten also wieder überschrieben werden.
2. Direkt ins Seitentemplate fe_page.tpl. Dort dann am besten direkt oberhalb Zeile <?php echo $this->stylesheets; ?>. Dabei muss man natürlich auch auf den richtigen Ordner achten.
In beiden Fällen sähe eine Einbindung z.B. so aus:
Und natürlich nicht vergessen, die Dateien in den entsprechenden Ordner, hier /tl_files/css/, zu kopieren.
Bearbeitung der CSS-Dateien
1. Warum nicht mit dem Modul Stylesheets im BE?
Erfahrene Webmaster werden ihre CSS-Dateien wohl alle lieber mit einem Desktop-Editor (also nicht online im Browser) ihrer Wahl bearbeiten, weil sie das einfach gewohnt sind und es auch, und nicht nur deswegen, schneller geht. Ich persönlich mache das auch so und benutze dazu PSPad, da er einerseits Freeware ist und andererseits einer der wenigen Editoren, bei dem mit Klick auf den Speicherbutton die Datei sofort auf dem FTP-Server gespeichert ist. Desweiteren könnten über das BE-Modul beim CSS-Import Fehler entstehen. Einige Angaben könnten in den generierten CSS-Dateien auch etwas verändert wieder auftauchen, als man sie im BE eingebeben hat. Einige Angaben sind nicht möglich, z.B. @charset "UTF-8"; und @import url();. Man kann so auch mehrere Dateien gleichzeitig offen halten und bearbeiten.
2. Warum doch mit dem Modul Stylesheets im BE?
Man kann von jedem PC und Land aus die CSS-Formate bearbeiten ohne seinen PC, Hilfsmittel, Zugänge usw. parat zu haben, einzig den Login ins BE muss man kennen. Ein Kunde, welcher nicht in der Lage ist die nötigen Hilfsmittel einzurichten und zu bedienen, hat damit die Möglichkeit alleine aus dem BE die CSS-Formate zu bearbeiten. Achtung! Bei der Bearbeitung mit dem BE-Modul bearbeitet man nicht die CSS-Dateien. Man bearbeitet Datenbankeinträg. Aus diesen Einträgen generiert TL CSS-Dateien im Root. Aus diesem Grund werden manuelle Einträge in, aus dem BE heraus erstellten, CSS-Dateien auch von TL wieder mit den Werten aus der Datenbank überschrieben. Die CSS-Dateien im Root werden auch nicht fürs BE eingelesen. Außerdem werden CSS-Dateien, welche nicht im BE-Modul vorhanden sind aus dem Root gelöscht.
3. Geht denn auch beides gleichzeitig?
Ja, das geht. Die TL-BE-Modul-CSS-Dateien sind dann im Root und können nur übers BE bearbeitet werden, und die manuellen sind in tl_files/css/, werden manuell eingebunden und mit einem Editor bearbeitet.
2 Fälle aus der Praxis:
1. Der Webmaster entwickelt ein Projekt, welches er anschließend kompl. an den Kunden übergibt. Der Kunde wünscht CSS-Format-Bearbeitung aus dem BE heraus. Hier entwickelt der Webmaster mit manuellen CSS-Dateien. Kurz vor Abgabe des Projektes importiert er die CSS-Dateien ins BE, deaktiviert die manuelle Einbindung und überprüft ob alles gut gegangen ist. Er übergibt das Projekt.
2. Wieder ein Projekt, welches kompl. übergeben wird. Der Kunde wünscht die einfache Möglichkeit kleinere Änderungen am Design aus dem BE heraus vornehmen zu können, wie z.B. Farben, Rahmen und Hintergründe ändern. Auch hier entwickelt der Webmaster mit manuellen Dateien. Am Ende zieht er die Formatangaben zu Farben, Rahmen und Hintergründen in eine eigene CSS-Datei, welche er dann ins BE-Modul importiert.
Info zu den Suckerfish Dropdown Menüs
Die Suckerfishs basieren auf dem original Suckerfish von htmldog http://htmldog.com/articles/suckerfish/dropdowns/ und sind auf TL angepasst.
Für den IE6, IE5.5 und IE7 muss noch ein wenig JavaScript im HEAD eingefügt werden. Der Code und noch eine suckerfish_h_readme.txt sind jetzt im ZIP. Der IE<=7 Bug (Text von unten scheint durch) ist jetzt behoben.
Getestete Browser: FF 3.5.4, IE 8, IE 7 (im IE 8), IE 5.5 und IE 6 (im IETester), Safari 4.0.3, Opera 10.01
Info zu den CSS-Dateien für den TinyMCE
In der Datei /system/config/tinyMCE.php in Zeile 76 wird festgelegt, welche CSS-Dateien der TinyMCE benutzt.
Nun soll man aber nicht einfach Änderungen in dieser Datei vornehmen, weil das nicht updatesicher wäre. Um das updatesicher zu machen kopieren wir die Datei in den gleichen Ordner und vergeben den Namen tinyCustom.php. Jetzt müssen wir TL nur noch sagen, dass er jetzt nicht mehr die tinyMCE.php, sondern die tinyCustom.php zur Konfiguration des TinyMCE heranziehen soll. Das machen wir in der Datei /system/config/dcaconfig.php mit der Zeile:
Jetzt können wir die Befehlszeile für die Auswahl der CSS-Dateien für den TinyMCE in der Datei tinyCustom.php nach belieben abändern. z.B.
Die Datei tinyCustom.php könnt ihr jetzt desweiteren dafür benutzen, den TinyMCE auf eure individuellen Bedürfnisse einzustellen. Infos zur Konfiguration gibt es beim Entwickler TinyMCE Wiki Configuration
Erstellt von Andreas
Könnt ihr eure Posts, welche sich durch Updates erledigt haben, und die, welche keine Hilfe mehr für andere darstellen, bitte aus diesem Thread löschen? Danke, Andreas
Vorab
da die Dateien im Ordner tl_files/xBrowser_style_sheets veraltet sind, habe ich sie mal erneuert bzw. ergänzt. Der kompl. Ordner wird nicht mehr Bestandteil von Tl 2.8 sein. Alle alten x___.css habe ich gelassen wie sie sind. Dieser Thread befasst sich nicht mit der Bearbeitung von Stylesheets aus dem BE heraus (warum und mehr dazu weiter unten).
Änderungen bzw. neue Basis-CSS-Dateien
Code:
+gridpc.css (Grid in Prozent) +gridpx.css (Grid in Pixeln) +print.css (aus Music-Academy) +suckerfish_h.css (Dropdownmenü horizontal) +suckerfish_v.css (Dropdownmenü vertical) Infos siehe unten xBasic.css => +basic.css (das neue Reset-Stylesheet von Leo, siehe unten) xElements.css => +elements.css line-height: 1.5; => line-height: 1.5em; line-height: 1.4; => line-height: 1.4em; xForm.css => +form.css div.error => div.error, p.error xNavigation.css => +navigation.css .mod_navigationMain => .navMain + hint to use a class p => span in allen TL-Dateien: 0px => 0 +Copyright Header
Warum dieser Thread?
Will man ein neues leeres Projekt, also ohne den Import des Music-Academy-Example-Templates während der Installation, beginnen, steht man erstmal was die Formatierung betrifft fast bei Null.
Welche CSS-Dateien werden von TL default eingebunden?
1. Im Seitentemplate fe_page.tpl
Hardcodiert wird hier im HEAD über ein LINK die Datei plugins/slimbox/css/slimbox.css importiert, damit die JavaScript-Großansicht der Bilder mit Slimbox (das ist ein Lightbox-Clone und erfordert Mootools) ihr typisches Aussehen und Verhalten bekommt. Ohne diese CSS-Datei funktioniert die Slimbox nicht. Wer weiß, dass er keine Slimbox in seiner Website einsetzen wird, kann diese Zeile aus dem Templ. entfernen. Zum neuen TYPOlight 2.8.x siehe den Hinweis im Post #53 in diesem Thread von pmmueller.
Dynamisch über <?php echo $this->framework; ?> (nicht <?php echo $this->stylesheets; ?>) im HEAD-Bereich wird die Datei system/typolight.css, und für IEs kleiner als 8 zusätzlich die Datei system/iefixes.css eingebunden. Diese Dateien sollen einen Browser-Reset bewirken, Browser-Bugs abfangen und dafür sorgen, dass die spätere Layoutgestaltung mit den floatenden DIVs in allen Browsern funktioniert. Mittlerweile gibt es auch eine erweiterte CSS-Reset-Datei namens basic.css https://contao.org/herunterladen.html#css. Achtung! Diese Datei ist nicht im Core von TL enthalten, ihr müsst sie downloaden und manuell einbinden. Diese Datei als Basis einzubinden ist zwingend zu empfehlen, es sei denn man setzt das Framework YAML auf.
Desweiteren sind manche Module so programmiert, dass sie bei Bedarf mittels <?php echo $this->stylesheets; ?>, ihre eigenen Modul-CSS-Dateien einbinden. Entfernt man diese Zeile, könnte es also sein, dass evtl. ein Modul nicht wie erwartet funktioniert.
(Über die Anweisung <?php echo $this->stylesheets; ?> würden auch die CSS-Dateien aus dem BE-Modul-Stylesheets als LINK-Element in die Seite generiert werden, falls welche erstellt wurden. Aber in diesem Thread geht es hauptsächlich darum, gänzlich auf das BE-Modul-Stylesheets zu verzichten und dort keine Dateien drinnen zu haben. mehr dazu unten)
2. Im BE über ein Seitenlayout
Ein Seitenlayout zu erstellen ist Pflicht, ohne gibt es keine Seite im FE. Setzt den Haken bei 'Standardlayout', dann braucht ihr den Seiten noch nicht einmal ein Layout zuzuweisen - ohne Zuweisung erhält jede Seite das Standardlayout. Werte die hier eingetragen werden - welche Spalten, Breiten, Zentrierung... - also alles was Formatierung mit CSS betrifft, wird von hier übernommen und in die HTML-Seiten eingetragen - aber wo? und wie?
Ganz einfach: Im Seitentemplate fe_page.tpl ist im HEAD die Anweisung <?php echo $this->framework; ?>. Darüber wird an dieser Stelle ein STYLE-Element mit zentralen Formaten für diese Seite entsprechend der Layouteinstellungen generiert. Lässt man im Seitenlayout alle Einstellungen, welche CSS-Formatierungen betreffen leer, dann wird an dieser Stelle im Template nichts generiert. - Sollte man also unbedingt die zentralen Formate aus dem HEAD entfernen wollen, so sollte man sie zumindestens einmal generieren lassen und sie sich genau ansehen und kopieren, bevor man sie aus dem HEAD entfernt und sie in seine eigene CSS-Datei integriert. Achtung! Bei entfernen der Anweisung aus dem Template werden auch typolight.css und iefixes.css nicht mehr eingebunden.
Individuelle CSS-Dateien manuell einbinden (nicht importieren)
1. Welche Dateien?
Die Dateien, welche ich hier in das Archiv gepackt habe, kann man jetzt erstmal als Basis in sein Projekt einbinden (wie? später). Dabei könnt ihr alle Dateien mit einem x davor ignorieren, die sind nur wegen Abwärtskompatibilität enthalten. Möchte man mit dem Gridsystem arbeiten https://contao.org/herunterladen.html#css, dann bindet man entweder gridpx.css, oder gridpc.css ein. Möchte man ein Dropdown-Menü, dann bitte erst mal nur die horizontale oder vertikale suckerfish einbinden - sie sind noch nicht auf gleichzeitigen Gebrauch abgestimmt. Auch ist die navigation.css nicht gerade das Gelbe vom Ei, es ist ja noch die alte Originaldatei. An einer neueren bin ich dran, ist im Alpha-Stadium. Ist im zip-Paket.
2. Wie und wo einbinden? (zwei Möglichkeiten)
1. Über ein Seitenlayout im Feld 'Zusätzliche <head>-Tags'. Hierbei ist darauf zu achten, dass man die Dateien nicht in den Root der Seite legt, da sie ansonsten von TL gelöscht werden. Ich empfehle den Ordner /tl_files/css/. Auch zu beachten ist, dass die Angaben aus diesem Feld mittels der Anweisung <?php echo $this->head; ?> im Seitentemplate fe_page.tpl in die Seite generiert werden und somit z.B. unterhalb der system/iefixes.css sind. Korrekturen für IEs kleiner als 8 könnten also wieder überschrieben werden.
2. Direkt ins Seitentemplate fe_page.tpl. Dort dann am besten direkt oberhalb Zeile <?php echo $this->stylesheets; ?>. Dabei muss man natürlich auch auf den richtigen Ordner achten.
In beiden Fällen sähe eine Einbindung z.B. so aus:
Code:
<link rel="stylesheet" type="text/css" media="screen, projection" href="tl_files/css/basic.css" /> <link rel="stylesheet" type="text/css" media="screen, projection" href="tl_files/css/gridpx.css" /> <link rel="stylesheet" type="text/css" media="screen, projection" href="tl_files/css/elements.css" /> <link rel="stylesheet" type="text/css" media="screen, projection" href="tl_files/css/form.css" /> <link rel="stylesheet" type="text/css" media="screen, projection" href="tl_files/css/navigation.css" /> <link rel="stylesheet" type="text/css" media="screen, projection" href="tl_files/css/suckerfish_h.css" /> <link rel="stylesheet" type="text/css" media="print" href="tl_files/css/print.css" />
Bearbeitung der CSS-Dateien
1. Warum nicht mit dem Modul Stylesheets im BE?
Erfahrene Webmaster werden ihre CSS-Dateien wohl alle lieber mit einem Desktop-Editor (also nicht online im Browser) ihrer Wahl bearbeiten, weil sie das einfach gewohnt sind und es auch, und nicht nur deswegen, schneller geht. Ich persönlich mache das auch so und benutze dazu PSPad, da er einerseits Freeware ist und andererseits einer der wenigen Editoren, bei dem mit Klick auf den Speicherbutton die Datei sofort auf dem FTP-Server gespeichert ist. Desweiteren könnten über das BE-Modul beim CSS-Import Fehler entstehen. Einige Angaben könnten in den generierten CSS-Dateien auch etwas verändert wieder auftauchen, als man sie im BE eingebeben hat. Einige Angaben sind nicht möglich, z.B. @charset "UTF-8"; und @import url();. Man kann so auch mehrere Dateien gleichzeitig offen halten und bearbeiten.
2. Warum doch mit dem Modul Stylesheets im BE?
Man kann von jedem PC und Land aus die CSS-Formate bearbeiten ohne seinen PC, Hilfsmittel, Zugänge usw. parat zu haben, einzig den Login ins BE muss man kennen. Ein Kunde, welcher nicht in der Lage ist die nötigen Hilfsmittel einzurichten und zu bedienen, hat damit die Möglichkeit alleine aus dem BE die CSS-Formate zu bearbeiten. Achtung! Bei der Bearbeitung mit dem BE-Modul bearbeitet man nicht die CSS-Dateien. Man bearbeitet Datenbankeinträg. Aus diesen Einträgen generiert TL CSS-Dateien im Root. Aus diesem Grund werden manuelle Einträge in, aus dem BE heraus erstellten, CSS-Dateien auch von TL wieder mit den Werten aus der Datenbank überschrieben. Die CSS-Dateien im Root werden auch nicht fürs BE eingelesen. Außerdem werden CSS-Dateien, welche nicht im BE-Modul vorhanden sind aus dem Root gelöscht.
3. Geht denn auch beides gleichzeitig?
Ja, das geht. Die TL-BE-Modul-CSS-Dateien sind dann im Root und können nur übers BE bearbeitet werden, und die manuellen sind in tl_files/css/, werden manuell eingebunden und mit einem Editor bearbeitet.
2 Fälle aus der Praxis:
1. Der Webmaster entwickelt ein Projekt, welches er anschließend kompl. an den Kunden übergibt. Der Kunde wünscht CSS-Format-Bearbeitung aus dem BE heraus. Hier entwickelt der Webmaster mit manuellen CSS-Dateien. Kurz vor Abgabe des Projektes importiert er die CSS-Dateien ins BE, deaktiviert die manuelle Einbindung und überprüft ob alles gut gegangen ist. Er übergibt das Projekt.
2. Wieder ein Projekt, welches kompl. übergeben wird. Der Kunde wünscht die einfache Möglichkeit kleinere Änderungen am Design aus dem BE heraus vornehmen zu können, wie z.B. Farben, Rahmen und Hintergründe ändern. Auch hier entwickelt der Webmaster mit manuellen Dateien. Am Ende zieht er die Formatangaben zu Farben, Rahmen und Hintergründen in eine eigene CSS-Datei, welche er dann ins BE-Modul importiert.
Info zu den Suckerfish Dropdown Menüs
Die Suckerfishs basieren auf dem original Suckerfish von htmldog http://htmldog.com/articles/suckerfish/dropdowns/ und sind auf TL angepasst.
Für den IE6, IE5.5 und IE7 muss noch ein wenig JavaScript im HEAD eingefügt werden. Der Code und noch eine suckerfish_h_readme.txt sind jetzt im ZIP. Der IE<=7 Bug (Text von unten scheint durch) ist jetzt behoben.
Getestete Browser: FF 3.5.4, IE 8, IE 7 (im IE 8), IE 5.5 und IE 6 (im IETester), Safari 4.0.3, Opera 10.01
Info zu den CSS-Dateien für den TinyMCE
In der Datei /system/config/tinyMCE.php in Zeile 76 wird festgelegt, welche CSS-Dateien der TinyMCE benutzt.
PHP-Code:
content_css : "<?php echo TL_PATH; ?>/basic.css,<?php echo TL_PATH; ?>/system/themes/tinymce.css",PHP-Code:
// Die eigene RTE-Konfiguration für Text-Elemente verwenden
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';
PHP-Code:
content_css : "<?php echo TL_PATH; ?>/tl_files/css/basic.css,<?php echo TL_PATH; ?>/tl_files/css/elements.css",Erstellt von Andreas
Nimm mal nur die hier:
Kommentar