Utilities

Nicht selten kommt es vor, dass ein Abstand zwischen den Content Elementen gewünscht wird.
Hierfür kannst du das Feld “Extra Class” unter “Erscheinungsbild” nutzen (Beispiel s. Screenshot).
In dem Beispiel werden folgende Utility Klassen gesetzt: my-4 p-3. 
Damit erhält das Content Element folgenden Style: 

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

Die Klassen werden nach dem Format {property}{sides}-{size} für xs und {property}{sides}-{Breakpoint}-{size} für sm, md, lg, xl und xxl benannt.

Beispiel für folgende properties:

• m - für Klassen, die den äußeren Abstand festlegen margin
• p - für Klassen, die den inneren Abstand festlegen padding

Mit folgenden sides:

• t - für den oberen Abstand margin-top oder padding-top
• b - für den unteren Abstand margin-bottom oder padding-bottom
• s - (start) für den linken Abstand margin-left oder padding-left
• e - (end) ffür den rechten Abstandmargin-right oder padding-right
• x - für links und rechts *-left und *-right
• y - für oben und unten *-top und *-bottom
• blank - für alle Abstände margin oder padding oben, rechts, unten und links

Optionen für size:

• 0 - Abstand auf “0” setzen margin oder padding auf “0” setzen
• 1 - ür Klassen, die den Rand oder Abstand auf margin oder padding auf $spacer * .25 festlegen
• 2 - (by default) for classes that set the margin or padding to $spacer * .5 festlegen
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3
• auto - for classes that set the margin to auto

.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

In dem Feld "Background color" kann eine beliebige Farbe ausgewählt werden.

Es sind auch Transparente Farben mit der Option “Opacity” möglich!

Die Textfarbe für die Überschrift kann durch Angabe der entsprechenden Hilfsklasse bestimmt werden. Dieses wird in dem Feld "Header Extra Class" umgesetzt.

Die Textfarbe für den Subheader kan im BE-Modul unter "Other Settings → Subheader Color" definiert werden.

Die Textfarbe für den "Page Title" (die Überschrift "h1") kann ebenfalls mit den Hilfsklassen gestaltet werden.

Dieses wird im BE Modul "T3SB Config" unter "Page Titel" umgesetzt.

Mit der Hilfsklasse .border, kann der Rahmen eines Elements schnell gestaltet werden. Ideal für Bilder, Schaltflächen oder andere Elemente.

Wenn eine Auswahl getroffen wurde, dann erscheinen weitere Auswahlfelder.

Hier kann die "Border color" bzw. der "Border-radius" für dieses Element bestimmt werden.

Wenn eine Rahmen (.border) angegeben wurde, ist es erforderlich einen Abstand für den Inhalt zu definieren.

Dieses kann entweder in dem Auswahlfeld "Bootstrap Spacing" (hier "padding") oder dem Feld "Extra Class" (z.B. mit "p-4") umgesetzt werden.