Hallo!
Ich habe schon einige Typo3 Webseiten mit externen Stylesheets veröffentlicht.
Der Vorteil in der Extension CSS Styled Content liegt ja anscheinend hauptsächlich darin, dass der Quelltext von nervigen "clear-gifs" und "<p style:margin:=""> gesäubert wird... gibt es noch andere Argumente?
Beim Überfliegen einiger Forumsbeiträge ist mir aufgefallen, dass viele anscheinend an der Extension herumdoktorn um sie vernünftig anwenden zu können... so richtig zufriedenstellend waren die Infos für mich nicht.
Meine Fragen:
a. Gibt es ein Tutorial zu CSS Styled Content?
b. Wenn ich die EXT installiert habe, konfiguriere ich die Styles ja anscheinend im CSS Styler. Kann ich da auch umfangreiche Stylesheets verwirklichen, oder muss ich muss ich dafür in die PHP Datei eingreifen so wie ich es in anderen Forumsbeiträgen gelesen habe??
c. gibt es keine Möglichkeit das fertige Stylesheet ins CSS Styled Content einzubinden?
d. Bei einer Testinstallation bei einem fertigen Typo3 Projekt wurden die im externen Stylesheet festgelegten Formatierungen nicht mehr richtig angezeigt, obwohl das Stylesheet im CSS Styler unter "Style Collection Info" angezeigt wird. Warum?
e. Welche Nachteile muss ich in Kauf nehmen, bzw. wo könnte es Problem mit anderen Extensions geben?
Vielen Dank für eure Hilfe!
Claudia
also,
zu a) - nein, aber so gross ist die Extension nicht, man kann sich den Quellcode anschauen und sieht, wie die Elemente gerendert werden
b) man kann auch ganz normal mit einem externen Stylesheet arbeiten. Dazu löscht man die vorhandene CSS-Ausgabe und bindet die erforderlichen Elemente in seine CSS-Datei (so mache ich es)
c) siehe b
d) wenn Definitionen mehrfach auftauchen, so ist die letzte Angabe massgeblich. Man kann aber mit dem Schlüsselwort important! Formatierungen erzwingen
e) die Ext ist nicht perfekt, einige HTML-Sachen sind noch immer hardcodiert. Ausserdem ist die Ausgabe nicht Barrierefrei. Es gibt andere Ansätze, z.B.AccessibleContent. Probleme gibt es immer mit Extension, die nicht T3 rendern lassen sondern selber rendern, vorwiegend ältere.
Ich hoffe Du hast ein paar Antworten gefunden.
Hallo Steffen,
vielen Dank erstmal für deine ausführlichen Antworten!
Von !important habe ich auch schon gehört und auch noch mal recherchiert. Leider wird es vom IE nicht beherrscht...
b) man kann auch ganz normal mit einem externen Stylesheet arbeiten. Dazu löscht man die vorhandene CSS-Ausgabe und bindet die erforderlichen Elemente in seine CSS-Datei (so mache ich es)
Wo kann ich die CSS-Ausgabe löschen? Im CSS Styler??
Oder in der EXT Datei? wenn ja, welche, habe auf den ersten Blick nichts gefunden...
Wenn ich CSS Styled Content aktiviere, versieht er alle <p>-Tags mit class=bodytext oder fließtext und ändert auch automatisch <h1>, <h2>... das möchte ich gerne raushaben.
Am liebsten halt ALLE Styles aus meinem eigenen Stylesheet...
Claudia
Etwas falsch war meine Antwort schon, da die css_styled_content gar keine css-styles setzt. Es gibt lediglich Beispiel-Css-Dateien im Ordner der Extension.
Andere Extensions bringen ihre "Basisstyles" mit und schreiben sie als Inlinestyle in die Seite, diese Angaben löscht man so:
plugin.modulname._CSS_DEFAULT_STYLE >
Ein eigenes stylesheet bindet man ganz einfach ein:
page.includeCSS {
file1 = fileadmin/css/style1.css
file2 = fileadmin/css/style2.css
}
Diese CSS-Dateien kann man ganz normal editieren.
Die Tags von denen Du sprichst sind "Standard-Wraps". Diese kann man mit TS überschreiben, löschen etc.
z.B.
# Formatierung des Standardtextes
content.wrap.bodytext = <p>|</p>
# Formatierung der Header über Stylesheet
content.wrap.header = |
content.wrap.header1 = <h1>|</h1>
content.wrap.header2 = <h2>|</h2>
content.wrap.header3 = <h3>|</h3>
content.wrap.header4 = <h4>|</h4>
usw.
Hi Steffen,
ich hab jetzt nach weiterer Recherche eine akzepable Lösung gefunden, die zumindest bei meinem neuen Projekt funktioniert. Beim bestehenden muss ich wohl trotzdem das Stylesheet umschreiben.
Hier meine Lösung für Interessierte:
1. css_styled_content installieren und über Include Static from Extension einfügen
2. Auf der Root Seite im TS Config folgenden Code einfügen:
RTE.default.proc {
dontConvBRtoParagraph=1
}
3. Root-Template anpassen um unnötige Tags zu entfernen:
# entfernt die Anker-Tags
tt_content.stdWrap.dataWrap =
tt_content.noANameTagForFirstRecord = 1
# entfernt class=bodytext
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
Wenn man nun im RTE im Fliesstext die Enter-taste drückt, fügt der RTE einen Absatz <p> ein, mit 'shift' & Enter einen Zeilenumbruch </br>.
4. letztlich für das Ausschalten der Stylesheets mancher Extensions:
plugin.modulname._CSS_DEFAULT_STYLE >
Alles in allem ist der Quelltext so viel aufgeräumter und Typo3 verwendet durchgehend das externe Stylesheet 🙂
grüße
claudia
Hallo,
ich nutze diesen Thread einfach mal, da meine Frage CSS Styled Content betrifft.
Ich habe CSS Sytled Content nun aktiviert, dabei ist mir aufgefallen das es vorher möglich war im Header HTML Tags unter zu bringen.
Also konnte ich einen Zeilenumbruch durch <br> erzeugen. Nun ist dies nicht mehr möglich ...
Gibt es hierfür eine Lösung?
DANKE
twomaze