Wie nutze ich das Typolight CSS-Framework richtig?

[globalcow]

Hallo Community,

Ich habe das Framework mit dem, auf der Typolight-Seite verfügbaren, Reset-Stylesheet (basic.css) und dem Pixel-Gridsystem (gridpx.css) vervollständigt.

Dazu habe ich ein paar Verständnisfragen, anhand kleiner Beispiele:

1. Wenn ich individuelle Anpassungen vornehmen möchte (Linkfarbe, Überschriften usw.) mache ich das in einer eigenen Datei oder ändere ich das Reset-Stylesheet? Ich dachte nämlich das die basic.css allgemeingültig wäre.
2. Verwirrung enstand nämlich dabei, als ich festgestellt habe das der TinyMCE-Ordner auf die Styles der basic.css zurückgreift. Da dort aber keine Listen formatiert werden, sieht man nun auch keinerlei Punkte und Aufzählungsnummern im Editor. Also doch die basic.css ändern?
3. Wenn ich nun in der basic.css die Liste formatiere, dann muss ich für alle Module die Listen nutzen (z.B. die Menüs) alles erst wieder zurücksetzen falls ich dort eine andere Formatierung möchte, ist das richtig? Das ist vielleicht eine mehr grundsätzliche Frage zum Arbeiten mit einem CSS-Framework.

Könnt ihr mir da ein paar Erklärungen und Tipps zu geben? Wie macht ihr das denn?

Viele Grüße
globalcow

[Sebastian]

HI

in der Tat hat Leo die Listenformatierung in der basic.css weggelassen. Ich baue sie immer dort ein, wobei man sie dann eben für die Navigation zurücksetzen muss. Aber das nehme ich in Kauf, dafür dass man dann im TinyMCE sieht, was eine Liste ist und was nicht.

Sebastian

[Andreas]

Hallo globalcow,

zu 1: Grundsätzlich würde ich die basis Framework Dateien wie typolight.css, iefixes.css und basis.css nicht verändern, sondern wenn gewünscht von außen überschreiben, sie sind wesentllich für die Funktion des Frameworks und wären somit auch nicht mehr updatesicher. Sehr interessant dazu sind auch die Erklärungen in der Dokumentation zu YAML.

zu 2: Ich binde die basis.css manuell ein, damit hat sie keinen Einfluss auf TinyMCE, da sie dann nicht im Root liegt. TinyMCE sage ich explizit welche CSS-Dateien dort greifen sollen. Eine Umbenennung der basis.css verhindert auch die Benutzung durch TinyMCE, falls du sie im Root lassen möchtest.

zu 3: Listen würde ich allgemein formatieren, so wie sie bei der Benutzung im Fließtext im FE erscheinen sollen. Menüs würde ich dabei nicht berücksichtigen. Menüs formatiere ich dann gezielt und spreche sie über Klassen bzw. IDs an, so dass reguläre Listen im Fließtext davon nicht betroffen sind.

Siehe auch meinen Tutorial-Thread zu CSS in TL (Infos zu TinyMCE sind allerdings noch nicht enthalten)
CSS-Dateien in TL - Wo Wie Warum

Gruß Andreas

[globalcow]

Hi,
vielen Dank für euer Antworten!

Ich habe das jetzt so gemacht wie du gesagt hast, Andreas. Also die basic.css in reset.css unbenannt. Ich hatte nämlich auch im Hinterkopf, das man Framework-Dateien wenn möglich nicht ändern sollte.

Genau so was wie das Tutorial hätte ich übrigens gesucht und natürlich an der falschen Stelle gesucht

Wie kann man den dem TinyMCE sagen auf welches Stylesheet er zurück greifen soll?

Und dann noch eine Verständnisfrage für Dummies: Wenn ich erstmal grundsätzlich fest lege wie welche Elemente aussehen sollen (also z.B. die Einrückung einer Liste), dann muss ich doch später für die Spezialfälle Teile davon erst wieder rückgängig machen (also z.B. für das Menü #menu die Einrückung wieder auf Null setzen), oder?

Viele Grüße
globalcow

[MacKP]

Hallo globalcow,
einstellen kann man da nix, der TinyMCE nimmt automatisch die basic.css

Und ja, mit deinem Rückgängig machen hast du recht. Wobei du da auch einfach direkt passende Werte für das Menü setzten kannst, also nicht erst
#menue li {margin:0}; und dann #menue li {margin: 0.5em}
sondern direkt #menue li {margin: 0.5em}

Viele Grüße

[Andreas]

Die folgende Zeile in system/config/dcaconfig.php eintragen:

// Die eigene RTE-Konfiguration für Text-Elemente verwenden
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom'; 

Dann die tinyMCE.php im selben Ordner kopieren zu tinyCustom.php. In dieser Datei kannst du jetzt den tinyMCE konfigurieren wie du möchtest (Infos beim Entwickler) unter anderem:

  content_css : "<?php echo TL_PATH; ?>/meineeine.css,<?php echo TL_PATH; ?>/meineandere.css",

Ja, was dich dann fürs Menü stört, setzt du eben wieder zurück, z.B. einen falschen margin, padding oder border, ist aber kein Problem.

Andreas

hab ich doch gewuss, dass MacKP schneller ist

[MacKP]

Hallo Andreas,
wobei die Antworten sich ja prima ergänzen in dem Fall

Finde nur das man nicht immer zu viel in der dcaconfig rumschauben sollte, da man dann eventuell Probleme bekommt wenn man vergessen hat, das man da was gemacht hat *g*

Kann ja durchaus mal nicht so bewanderten Leuten passieren ;-)

Aber gut das du das hier auch noch hingeschrieben hast. So findet man über die Suche direkt alles wichtige.

Viele Grüße

[globalcow]

Prima! Danke euch

globalcow

[Andreas]

Ich habe meinen Tutorial-Thread über CSS jetzt mit den Infos zu TinyMCE ergänzt, dann ist die Info da wo sie hingehört
CSS-Dateien in TL - Wo Wie Warum
Andreas