Kategorie: t3pimper

Link zum GIT-Repo der Extension:
https://github.com/99grad/TYPO3.Extbase.t3pimper

Styling der Headlines

[1] Hinzufügen von Farben

Die Farbe erscheint als class=“col-xx“ an dem H-Tag. „xx“ ist dabei der Key im Typoscript. Mit removeItems, altLabels und addItems kann das Dropdown geändert werden:

# kommt ins root_page.ts
TCEFORM.tt_content.tx_t3pimper_headercolor {
   removeItems = 2,3,4,5,6
   altLabels {
      1 = Umbra
   }
   addItems {
      10 = apeshit-brown
   }
}

[2] Hinzufügen von Headline-Typen (h1-h6)

Neue Typen können mit addItems hinzugefügt werden. Die Nummer der Headline bestimmt dabei die Hierarchie und Klasse. „31“ wird z.B. zu einer h3 mit der Klasse „h-31“, „44“ wäre h4 mit class=“44″ etc. Eine weitere Formatierung im TS-Setup (lib.stdheader.10…) entfällt.

# kommt ins root_page.ts
TCEFORM.tt_content.header_layout.altLabels {
    2 = mittelgroß (h2)
    3 = klein (h3)
    4 = sehr klein (h4)
}
TCEFORM.tt_content.header_layout.addItems {
    31 = klein, zwo
}

[3] Hinzufügen von Schmuck

Der Schmuck erscheint als class=“deco-xx“ an dem H-Tag. „xx“ ist dabei der Key im Typoscript. Mit removeItems, altLabels und addItems kann das Dropdown geändert werden:

# kommt ins root_page.ts
TCEFORM.tt_content.tx_t3pimper_headerdeco {
   removeItems = 2,3,4,5
   altLabels {
      1 = Line drunter
   }
   addItems {
      10 = Super!
   }
}

Styling Rahmen / Layout

[1] Hinzufügen/Ändern von Layout-Optionen

Das Layout erscheint als class=“layout-xx“ an dem Inhaltselement-DIV. „xx“ ist dabei der Key im Typoscript:

# kommt ins root_page.ts
TCEFORM.tt_content.layout {
   removeItems = 2,3,4,5,6
   altLabels {
      1 = Kleinere Schrift
   }
   addItems {
      10 = Größer Zoomen
   }
}

[2] Hinzufügen/Ändern von Rahmen/Einrückungen-Optionen

Der gewählte Rahmen erscheint als class=“rahmen-xx“ an dem Inhaltselement-DIV. „xx“ ist dabei der Key im Typoscript:

# kommt ins root_page.ts
TCEFORM.tt_content.section_frame {
   removeItems = 1,5,6,10,11,12,20,21
   addItems {
      100 = Grauer Hintergrund
      101 = Blaue Blumen
   }
}

[3] Hinzufügen/Ändern von „Abstand zum Rand“

Der „Abstand zum Rand“ erscheint als class=“marg-xx“ an dem Inhaltselement-DIV. „xx“ ist dabei der Key im Typoscript.

# kommt ins root_page.ts
TCEFORM.tt_content.tx_t3pimper_margin {
   # So kann man das Dropdown komplett ausblenden:
   # disabled = 1
   removeItems = 2,3,4,5,6
   altLabels {
      1 = viel Abstand
   }
   addItems {
      10 = super viel Abstand
   }
}