Neuer Stil

Entwickler*innen können TYPO3 GRÜNE mit einem neuen Stil erweitern. Dies geschieht in zwei Schritten:

  • Zur entsprechenden Flexform muss dem Feld Stil ein neuer von Dir definierter Optionswert hinzugefügt werden.
  • Alle für den Stil nötigen TypoScript-Templates (und damit gegebenenfalls auch CSS-, Fluid- und HTML-Dateien) müssen erstellt und hinzugefügt werden.

Für die Integration muss die Erweiterung EXT:startgreen angepasst werden. Bis auf weiteres ist es nicht möglich, extern definierte Stile einzubinden.

Herangehensweise

  1. Web Modul > Seite
  2. Seiteneigenschaften > TYPO3 GRÜNE
  3. Untersuche das Feld "Stil": Nehme einen der Werte aus den Optionsfeldern wie zum Beispiel "2020041"
  4. Wähle eine individuelle eindeutige Id für Deinen Stil. Zum Beispiel JJMMDDn: 2010141

#: Wähle einen individuellen Namen für Deinen Stil in Klein- und Großschrift. Zum Beispiel: stylewhite und Stylewhite

Zu erstellende und zu bearbeitende Dateien

  • Untersuche EXT:startgreen mit Deiner Entwicklungsumgebung (IDE)
  • Kopiere ganze Ordner von der alten Id (2020041) auf die neue Id (2010141)
  • Kopiere in Dateien Code der alten Id (2020041) füge diesen mit der neue Id (2010141) ein
  • Ersetze in Deinen neuen Dateien den Namen des kopierten Stils mit dem Namen Deines Stils

Trefferliste I

Suche nach der alten Id von oben (hier: 2020041)

Unter anderem findest Du

  • Configuration/TCA/Overrides/pages.php

    • Hier erweiterst Du die Flexform mit deinem Wert (einer eindeutigen ID) und einem Label. Etwa: 2010141 (YYMMDDN) und "Mein Stil"

  • Configuration/TypoScript/Base/Page/cssInline/44444/...

    • Hier solltest Du Deine CSS-Inline-Dateien anlegen. Am einfachsten ist es, vorhandene Dateien zu kopieren und umzubenennen: etwa alle 2020041 nach 2010141.

  • Configuration/TypoScript/Base/Page/includeCSS.ts

    • Hier bindest Du Deine neuen CSS-Dateien ein.

  • Configuration/TypoScript/Base/Page/jsFooterInline.ts

    • Hier bindest Du Deine neuen JavaScript-Dateien ein.

  • Configuration/TypoScript/Base/Start/Structure/...

    • Wenn Du eine von TYPO3 GRÜNE abweichende Seitenstruktur haben möchtest, bearbeite die hier gefundenen Dateien.

  • Configuration/TypoScript/Development/cssNotMinified/setup/page/includeCSS.ts

    • Im operativen Betrieb werden komprimierte CSS-Dateien eingebunden. Im Delevepment-Modus werden für ein besseres Debugging Standard-CSS eingebunden.

  • Configuration/TypoScript/EMail/...

    • Hier kannst Du Dateien hinterlegen für einen in Deinem Stil gestalteten Newsletter

Trefferliste II

Der Stil von oben hat einen Namen, der etwa in den Konstanten verwendet wird (hier: 2020041 -> Mandate bzw. mandate).

Suche nacheinander nach dem Wert (hier: Mandate bzw. mandate).

Ersetze den Wert mit Deinem Stil-Namen (hier: Stylewhite bzw. stylewhite). Beachte dabei bitte folgendes:

Bei von Dir kopierten Dateien nur in diesen das Sichwort ersetzen. Also:

  • in Configuration/TypoScript/Base/Page/cssInline/44444/2010141/*
  • nicht aber in Configuration/TypoScript/Base/Page/cssInline/44444/2020041/*

Bei Deiner Suche findest Du unter anderem

  • Configuration/TCA/Overrides/pages.php
  • Configuration/TypoScript/Base/Page/cssInline/44444/2010141/*
  • Configuration/TypoScript/Base/Page/jsFooterInline.ts
  • Configuration/TypoScript/Base/Start/Green/Css/2010141/*
  • Configuration/TypoScript/Base/Start/Green/Css/Default/header.ts
  • Configuration/TypoScript/Base/Start/Structure/header/2010141/*
  • Documentation/EntwicklerInnen/Layout/Stil/Index.rst