Dieser Artikel ist über 1 Jahr alt. Deshalb könnten die Informationen hier veraltet sein.

22. April 2017

Eigene Rahmen für Inhaltselemente in TYPO3 8 LTS

Geschätzte Lesezeit: 1 Minute

Mit TYPO3 8 LTS gab es wieder eine Änderung bei der Methode, Inhaltselemente auszugeben.

Kurzer Rückblick

In TYPO3 7 LTS wurde fluid_styled_content eingeführt, eine modernere Methode, Inhaltselemente zu rendern. Im Gegensatz zur bisherigen Standardmethode über css_styled_content wird bei fluid_styled_content das Rendering über Fluidtemplates abgewickelt, was natürlich die Anpassung der Inhaltselemente erheblich erleichtert.

Leider wurden dabei einige Eigenschaften von css_styled_content entfernt. Gab es bisher zum Beispiel die Felder „Layout“ und „Rahmen“ (section_frames), um unterschiedliche Darstellungen der Inhaltselemente zu ermöglichen, wurden die Rahmen ersatzlos gestrichen. Viele, auch ich, bedauerten diese Entscheidung. Gerade in Kombination mit dem Layout-Feld konnte man hier doch sehr viele Anpassungen einbauen, um Inhaltselemente auf unterschiedliche Arten auszugeben und das auch sehr einfach Redakteuren zur Verfügung stellen.

Rahmen in TYPO3 8 LTS

Mit TYPO3 8 LTS wurden jetzt einige dieser Funktionen wiederbelebt. Ziel war, die Funktionalität von css_styled_content und fluid_styled_content soweit wie möglich abzugleichen, um auch eine Migration von CSC auf FSC zu erleichtern. Denn in TYPO3 9 LTS wird css_styled_content nicht mehr vorhanden sein.

Bei einem Upgrade von TYPO3 7 auf 8 werden zwar duch einen Upgradeassistenten im Installtool auch die Einstellungen für die Rahmen übernommen, trotzdem sind hier noch nacharbeiten notwendig. Neben TSconfig und TypoScript haben sich z.B. auch die Namen der Standard-CSS-Klassen verändert, das eigene CSS muss also angepasst werden, sofern man hier auf die alten Klassennamen zugegriffen hat.

Hier möchte ich jedoch zeigen, wie man eigene Rahmen in TYPO3 8 LTS definiert.

TSconfig

Im PageTSconfig müssen die gewünschten Klassen der Auswahlbox für die Rahmen hinzugefügt werden. Im folgenden Beispiel sollen zwei Elemente hinzugefügt werden:

1
2
3
4
5
6
## Eigene Rahmen fuer Content Elemente
## PageTSconfig
TCEFORM.tt_content.frame_class.addItems {
  greybox = graue Box
  bluebox = blaue Box
}

Danach sind die beiden neuen Elemente bereits in der Rahmen Selectbox in den Content Elementen auswahlbar:

Neue Rahmen

In diesem Beispiel sieht der HTML-Code für die Blaue Box so aus:

<div id="c15" class="frame frame-bluebox frame-type-textmedia frame-layout-0">
</div>

Die Klasse, die wir jetzt entsprechend im CSS stylen können, wäre also hier .frame-bluebox.

Mit ein wenig CSS kann das dann z.B. so aussehen:

Ausgabe der Rahmen im Frontend

Artikel wurde gefunden mit den Suchbegriffen:
  • html typo3 8
  • typo3 flui content section frame
  • typo3 layout flux inhaltselement

Wolfgang Wagner

lebt in Friedrichshafen und arbeitet als Web Developer bei der TYPO3 Agentur jweiland.net in Filderstadt. Weitere Orte im Web: Twitter, Facebook, Videotraining zu TYPO3 8 LTS

Kommentare (5) Schreibe einen Kommentar

  1. Woran kann es liegen, wenn in einem TYPO3 8.7.x die Frame-Selectbox sowie auch die Felder für Space-before und Space-after nicht angezeigt werden? Hängen diese Backendfelder irgendwie an einer bestimmten Extension, oder wodurch könnten sie ausgeblendet worden sein?

    Antworten

    • Diese Einstellungen werden generell per PageTSconfig vorgenommen. Es kann durchaus sein, dass bei dir eine Extension „reingrätscht“, z.B. das bootstrap_package (bzw. das Introduction Package, welches auf dem bootstrap_package basiert).

      Antworten

      • Danke, tatsächlich war eine Extension der Übeltäter, sie hatte unzulässig etwas an TCEFORM.tt_content manipuliert und dadurch die besagten Formularfelder im Backend verschwinden lassen.

        Antworten

  2. Gibt es auch eine Möglichkeit die classen vollständig selbst zu definieren.

    z.B. statt frame-bluebox -> blueboxL boxDefault

    Wären also zwei klassen und natürlich ohne das „frame“.
    Das is zwar kein Beinbruch würde aber bei einem Projekt, wo migriert wird viel Arbeit ersparen.

    Antworten

    • Hm, weiss ich leider nicht. Habe ich noch nicht versucht. Aber du hast Recht, gerade bei Upgrades kann das ziemlich lästig sein. Gut, wenn man eine IDE nutzt, die Projektweit Suchen&Ersetzen kann.

      Antworten

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.