TYPO3 | Layout Dropdown bei fluid_styled_content nutzen

TYPO3 bietet, ohne zusätzliche Extension, die Möglichkeit das Aussehen von Content Elementen selbst zu beeinflussen. Hierfür gibt es bei dem Inhaltselement Text & Medien unter dem Reiter Erscheinungsbild das Layout Dropdown. Folgend zeige ich dir wie du schnell und unkompliziert neue Optionen für das Dropdown Feld anlegen kannst.

Fluid Styled Content Template kopieren.

Es sollte bekannt sein das niemals Core-Dateien bearbeitet werden dürfen. Alle Änderungen würden sonst beim nächsten TYPO3-Update verloren gehen. Der einfachste Weg das zu umgehen ist es die original Dateien von fluid_styled_content zu kopieren und in einen Ordner unserer Wahl abzulegen. Wir erstellen also einen Ordner zum Beispiel hier fileadmin/Ressources/Private/Templates/Extensions/fluid_styled_content/Templates/. TYPO3 muss natürlich auch wissen wo unser Template liegt, dafür schreiben wir folgendes in unser TypoScript Setup:

lib.fluidContent.templateRootPaths.30 = fileadmin/Ressources/Private/Templates/Extensions/fluid_styled_content/Templates/

In diesen Ordner kopieren wir nun die Textmedia.html von der TYPO3 System Extension fluid_styled_content. Für unser Beispiel brauchen wir keine weiteren Dateien, aber es ist natürlich möglich, durch kopieren von weiteren Dateien diese auf die eigenen Bedürfnisse anzupassen. Das Template findet ihr in eurem TYPO3 unter folgendem Pfad: typo3/sysext/fluid_styled_content/Resources/Private/Templates/.

Textmedia.html bearbeiten

Als nächstes öffnen wir die Datei mit einem HTML-Editor eurer Wahl. Wir suchen in dem Template folgende Zeile:

<div id="c{data.uid}">

und ersetzen diese mit folgendem Code:

<div id="c{data.uid}" class="content 
    {f:if(condition:'{data.layout}==100',then:'blue-box')} 
    {f:if(condition:'{data.layout}==110',then:'red-box')}
">

Die Änderung bewirkt das wir erst mal für jedes Inhaltselement die CSS Klasse „content“ hinzufügen. Wenn wir dann eine Wahl in unserem Layout Dropdown treffen, wird die jeweilige CSS Klasse hinzugefügt.

Der HTML Quellcode ohne Auswahl:

<div id="c1" class="content">Dein Inhalt</div>

Der HTML Quellcode mit Auswahl Blauer Kasten:

<div id="c1" class="content blue-box">Dein Inhalt</div>

Layout Dropdown anpassen

Zum Schluss müssen wir nur noch über das Seiten-TSconfig die Layout Klassen zur Verfügung stellen und nicht benötigte löschen. Das Seiten-TSconfig ändert ihr in den Seiteneigenschaften eurer root Page unter dem Reiter Ressourcen. Folgendes wird hier eingetragen:

TCEFORM.tt_content.layout {
  addItems {
    100 = Blauer Kasten
    110 = Roter Kasten
  }
  removeItems = 1,2,3
}

CSS anpassen

Die CSS Klassen können nun zum Beispiel wie folgt angesprochen werden.

.content {
  padding: 20px;
  margin: 30px 0;
}

.blue-box { 
  background-color: rgba(107,188,248,0.8); 
} 

.red-box { 
  background-color: rgba(248,107,110,0.8);
}

Zum Schluß noch den kompletten TYPO3 Cache löschen und die neuen Layout Optionen nutzen. Fertig.

Getestet mit TYPO3 Version 7.6