Hallo ihr,
ich suche eine Lösung für folgendes Problem:
Ich habe ein FCE, das ein spezielles Stylesheet braucht. Ds Stylesheet soll nur eingebunden werden soll, wenn das FCE auch wirklich eingesetzt wird, sonst nicht.
Die CSS-Datei soll natürlich nicht irgendwo im Quelltext eingebaut sein, sondern im head.
In der Datenstruktur vom FCE kann man ja auch TypoScript verwenden.
Ich habe schon sowas in Richtung:
10.data = register:tx_templavoila_pi1.parentRec.header...
ausprobiert. Leider ohne Erfolg.
Hat jmd. eine Lösung?
Danke und Grüße
Phil
ps: Das gleiche soll auch mit JavaScript-Dateien funktionieren. Generell binde ich immer das JS-Framework ein. Falls dann ein FCE verwendet wird, was zusätzliche JS-Funktionen braucht, soll die passende JS-Datei eingebunden werden.
Nimm deine CSS-Datei und binde diese ganz normal über den LINK-Tag in dein Template ein. Der Pfad muss stimmen...den Rest macht TV.
Wenn du den Tag drin hast machst du folgendes:
TemplaVoila->TV-Ordner->Flexible CE->Update Mapping->Header Parts->CSS auswählen->Set->Save->Fertig
Ach ja...Cache leeren...
froemken
Hi froemken,
ich muss noch mal auf deine Lösung zurückkommen.
Generell funktionert das so wunderbar, allerdings werden die Header Parts vom FCE vor den Header Parts vom Main Template gepackt.
Das würde ich gerne ändern!
Ideen?
Danke und Grüße
Phil
Hört sich danach an als würden Angaben in deinem Main-CSS, Angaben aus dem CSS fürs FCE überschreiben.
Lösung 1)
Deine Klassen erhalten in deinem FCE einen eigenen Klassennamen wie z.B. fce-liste-bodytext. So weißt du, dass diese Klasse für ein FCE ist, für welches FCE und dass es ähnliche Eigenschaften wie bodytext hat.
Lösung 2)
Wenn Angaben im FCE-CSS nicht überschrieben werden sollen, dann stelle denen ein "!important" hinten dran. Dann werden diese Angaben nicht durch Angaben im main-css überschrieben.
Hier ein Beispiel:
<html>
<body>
<style>
<!--
.text1 {
color: red !important;
font-size:24pt;
font-weight: bold;
}
-->
</style>
<style>
<!--
.text1 {
color: blue;
font-size: 12pt;
font-weight: normal;
}
-->
</style>
</body>
<div class="text1">Hallo zusammen</div>
<body>
</body>
</html>
Lösung 3)
Schmeiß das CSS-File wieder raus und binde es in einem +ext-Template für die entsprechende Seite wieder ein mit Hilfe von
page.includeCSS.FCEListe = fileadmin/templates/style/fce-liste.css
Lösung 4)
Schmeiß das CSS-File wieder raus und binde es in einem +ext-Template für die entsprechende Seite wieder ein mit Hilfe von
page.additionalHeader = <link type="text/css" href="fileadmin/templates/style/fce-liste.css"></link>
Alles sind Möglichkeiten die funktionieren, such Dir die beste raus und entscheide selbst, welche du für die beste empfindest.
froemken
Hi Froemken,
erst mal vielen Dank für deine ausführliche Antwort.
Allerdings fallen Lösung 1 und Lösung 2 weg, da es sich auch um JavaScript-Dateien handelt.
Lösung 3 und 4 finde ich dahingehend nicht sinnvoll, da ich dann ja auf jeder Seite, auf der ich das FCE einbinde den TypoScript-Schnipsel einfügen muss.
Oder kann ich diesen Aufruf direkt mit dem FCE verknüpfen, so dass er immer gesetzt ist, wenn das FCE eingebunden wird. (Kann man sowas in die DS des FCE packen?)
THX und Grüße
Phil
Dann bau Dir ein Plugin (userFunc), dass die benötigten Zeilen in den Header krickelt und binde das in dein FCE ein.
Eine userFunc sind nur ein paar Zeilen Code und nicht wirklich schwierig. Wie eine userFunc aufgebaut ist und eingebunden werden muss, kannst du an meiner userFunc sehen:
http://typo3.sfroemken.de/blog/datum/2009/06/18/getsqlquery-veraendertes-content-objekt.html
Eine komplexere Variante mit Umwegen wäre:
Du kannst meine Extension sfmootools missbrauchen. Allerdings musst du in der pi-Datei die beiden Einträge für die Mootools-Dateien löschen, ansonsten werden die jedes Mal mitgeladen. Mit Hilfe der TS-Variablen css und domready kannst du dann dein CSS und dein JS selber in die Page reinbauen.
Vielleicht gibt es ja auch schon andere bessere Extensions,die einfach nur ein paar Zeilen in den Header schreiben.