Liste der Anhänge anzeigen (Anzahl: 1)
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
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
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:
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" />
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.
PHP-Code:
content_css : "<?php echo TL_PATH; ?>/basic.css,<?php echo TL_PATH; ?>/system/themes/tinymce.css",
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:
PHP-Code:
// Die eigene RTE-Konfiguration für Text-Elemente verwenden
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom';
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.
PHP-Code:
content_css : "<?php echo TL_PATH; ?>/tl_files/css/basic.css,<?php echo TL_PATH; ?>/tl_files/css/elements.css",
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
Liste der Anhänge anzeigen (Anzahl: 5)
Zitat:
Zitat von
Thomas
@Andreas
Vergib Deinen Ebenen ab Level 2 mal einen 1px breiten Border und teste damit mal ein wenig rum!
Ich bekomme es nicht hin, dass keine Versätze unter den IEs ab 7 abwärts entstehen. Wobei ich den IE 5.5 sträflich und vollkommen vernachläßige.
Ich halte immer noch
diese Lösung für die Bessere, auch wenn sie etwas umständlicher umgestzt wird. ;)
Hallo Thomas,
ich hab mal Screenshots von den 7 Browsern beigefügt. Ich habe NUR diese CSS aus der ZIP im Layout übers Head-Feld eingefügt:
HTML-Code:
<link rel="stylesheet" href="tl_files/css/basic.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="tl_files/css/gridpc.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="tl_files/css/elements.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="tl_files/css/form.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="tl_files/css/navigation.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="tl_files/css/suckerfish_h.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="tl_files/css/print.css" type="text/css" media="print" />
Die einzige Modifikation habe ich in der suckerfish_h.css vorgenommen. (BTW Ich lade gleich eine neue ZIP hoch, in welcher die Eigenschaften für das Debugging in der suckerfish_h um !important erweitert wurde).
line-height, margin-left und font-size habe ich auf 16px verkleinert. Die Breiten habe ich alle 4 auf 160px vergrößert (vorher 140px, margin-left nicht vergessen). Dann habe ich ein wenig formatiert - NUR (wichtig!) in den A/SPANs. Ein padding von 4px und einen border von 1px. Deswegen muss ich jetzt die Breite (nur vom A/SPAN) um 10px verkleinern auf 150px (1+4+4+1). Auch das negative margin-top, welches bisher den gleichen Wert hatte wie line-height und font-size, musste ich um 10px (1+4+4+1) von -16px auf -26px ändern. Zum Schluss musste ich noch den background-color auch in dem A/SPAN angeben.
Das Ergebnis siehst du in den Screenshots.
In der Kopfzeile h82px habe ich eine Überschrift H1 ohne umschließende DIVs und darunter das Menü mit der ID suckerfish.
In left b:300px und main m-l:300px habe ich einen über ein Modul-HTML mit {{insert_article::1}} eingebundenen Artikel mit Dummytext, welchem deshalb der DIV mod_article fehlt (nur "ce_text block").
Im footer h:60px einen nackten DIV mit ein wenig Text.
Nur damit habe ich es getestet, ich kann ja nicht alle möglichen Konstellationen testen. Alle davon abweichenden Formatierungen müssen individuell gecheckt werden. Wenn man nicht klar kommt, solle man sich rückwärts Stück für Stück an diese Formatierung annähern, oder direkt damit starten und sein Design langsam wieder aufbauen. Wenn man nicht genau weiß, was man da macht (so wie ich ;)) muss man zwischendurch immer mal wieder mit allen Browsern testen. Bevor man um Hilfe bittet (das meine ich jetzt allgemein) sollte das Dropdown zumindestens einmal mit dieser Ausgangssituation in allen Browsern funktioniert haben. Wenn man alleine das nicht hinbekommt, sollte man natürlich hier fragen. Und bei Fehlern im eigenen Design versuchen die Unterschiede zwischen dieser Vorlage hier und dem eigenen Desing zu analysieren.
Der von dir empfohlene Link zeigt genau das, was ich hier umgesetzt habe. Ich habe nur die Selektoren umgeschrieben, damit man an den TL-Templates nichts ändern muss und sofort das Nav-Modul richtig anspricht. Desweiteren habe ich die Maßeinheit em in px abgeändert, damit man padding, border, line-height, margin und font-size aufeinander abstimmen kann (bis jetzt keine Probleme dadurch). Und dem UL auf erster und zweiter Ebene einen z-index von 9999 gegeben.
Über dem eigentlichen Suckerfish-CSS musste ich noch ein paar von TL gesetzte Werte überschreiben, bzw. anpassen, da das original Suckerfish im Gegensatz zu TL in einem UL liegt, welchem direkt ein DIV mit dem Inhalt folgt. Das Original hat im Gegensatz zu TL keine weiteren CSS-Formatierungen. Der Umstand mit den vielen Containern, den Floats und den Browserhacks in TL (YAML auch) macht diese Anpassungen nötig.
Leider bin ich immer noch nicht dazu gekommen die Lösung von Stu Nicholls umzusetzen und zu testen. Auch auf die Lösung mit HTC bin ich gespannt, das hatte ich mal im Rahmen von rounded corners ausprobiert und bin daran gescheitert. Irgendwie war mir auch nicht klar, was da eigentlich passiert.
Gruß Andreas
Liste der Anhänge anzeigen (Anzahl: 2)
