Installation

Support für TYPO3 10 & 11

PHP 8.0 ready!

Bevor die EXT:t3sbootstrap installiert werden kann, müssen folgende Extensions installiert werden:

  • Container Content Elements - (container)
  • Content Defender - (content_defender)
  • Creates WebP copies for images - (webp) - OPTIONAL

EXT:t3sbootstrap installieren/aktivieren und das "Static Template" nach "fluid_styled_content" einbinden!

Composer support

composer require t3sbs/t3sbootstrap

Nach der Installation werden die JS- & CSS-Dateien (wenn möglich) per CDN (extern) geladen.

Alternativ kannst du die benötigten JS- & CSS-Dateien nach fileadmin auslagern.
Hierfür muss lediglich im Planer (Scheduler) der Task (Console Command) "T3SB CDN to local" hinzugefügt und einmalig ausgeführt werden.
(Console: ./typo3cms t3sbootstrap:cdnToLocal )

Die Versionen kannst du im Konstanten-Editor unter "T3SB::CDN-SETTINGS" aktualisieren/anpassen!

Bei Bedarf kann "Custom Scss" genutzt werden!

TypoScript Setup

Das Root-Setup sollte, nach der Installation von t3sbootstrap, kein Page-Objekt enthalten!

Bei einigen Installationen, wird standardmäßig ein Page-Objekt eingefügt - z.B.: TS-Setup:

# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!

Dieses ist zu entfernen - ansonsten funktioniert t3sbootstrap nicht!

TypoScript Konstanten

Im Konstanten-Editor kannst du Anpassungen unter
T3SB::CDN-SETTINGS
,
T3SB::IMAGE SETTINGS
& T3SB::OPTIMIZE BOOTSTRAP
vornehmen.

Beim erstellen und bearbeiten der T3SB-Config (BE-Modul) werden die Daten aus der Datenbank in eine Datei geschrieben.
fileadmin/T3SB/Configuration/TypoScript/t3sbconstants.typoscript
Die Datei enthält somit die Daten aus der Datenbank als Konstanten.
Diese wird am Ende der Konstanten der EXT:t3sbootstrap eingebunden.

# Pagebrowser
bootstrap.pagebrowser.enable = 0
bootstrap.pagebrowser.prevnextToSection = 1
bootstrap.pagebrowser.prevItem = prev|prevsection
bootstrap.pagebrowser.nextItem = nextsection|next
bootstrap.pagebrowser.entryLevel = 1

# disable default css & js
bootstrap.config.disableDefaultCss = 0

# activate if you get the following error message in the Scheduler -> CustomScss: "Sorry ZIP creation failed at this time!"
   Google Fonts and Bootstrap beta versions (e.g. 5.2.0-beta1) can then no longer be used!

bootstrap.cdn.noZip = 0

# enable the currently available utility colors in the BE Modul
bootstrap.config.enableUtilityColors = 1

# enable the "Dark Mode" - if "prefers-color-scheme" (iOS and Android) is "dark" -> the body tag gets the class "dark-mode"
bootstrap.config.darkMode = 0

# include print template
bootstrap.print.enable = 0

# custom path to your custom.scss files: e.g.: fileadmin/T3SB/Resources/Public/SCSS/ (clear cache and run the Scheduler).
bootstrap.customScssPath = fileadmin/T3SB/Resources/Public/SCSS/

# back to top button
bootstrap.backToTopTitle = to top
bootstrap.backToTopClass = fa fa-chevron-circle-up fa-4x
bootstrap.backToTopForAllPages = 0

# Preload the google fonts includedby "bootstrap.cdn.googlefonts" if activated
bootstrap.preloadGooleFonts = 0
# GTM Account ID - include the Google Tag Manager if entered
bootstrap.gtm =

# disable jQuery by default
bootstrap.disable.jquery = 1
# load jquery into the header if activated
bootstrap.config.jqueryHeader = 0

# disable scroll to top for accordions
bootstrap.disable.accordion.scrollToTop = 0

# style one for the submenu (0 = default)
bootstrap.submenu.styleOne = 0

# Navbar settings
bootstrap.navbar {
    image.defaultPath = /typo3conf/ext/t3sbootstrap/Resources/Public/Images/bootstrap-logo-white.svg
    image.width = 30
    image.height = 24
    image.altText = Company Logo
    # type=int+; default breakpoints - same like Bootstrap (used as condition for inlineJS e.g. navbar hover)
    breakpoint {
        sm = 576
        md = 768
        lg = 992
        xl = 1200
        xxl = 1400
    }
    # type=int+; subdropdown with two columns if items greater or equal
    subdropdown.twoColumns = 30
    # type=boolean; page uid with search plugin - link to your search plugin
    searchboxLink = 0
    # type=boolean; fe user name in navbar - if logged in
    feUserName = 0
    # Dropdown icons float right
    floatDropdownIconRight = 0
}

# Cookieconsent settings enable in EM config
bootstrap.cookieconsent {
    # info, opt-in or opt-out
    type = info
    popup.background = #000
    popup.text = #fff
    button.background = #f1d600
    button.text = #000
    # block (default), edgeless, classic
    theme = edgeless
    # top, bottom, top-left, top-right, bottom-left, bottom-right
    position = top
    message = Diese Website setzt Cookies und verwendet Google Analytics. Durch die Nutzung unserer Website erklären Sie sich damit einverstanden.
    dismiss = Info ausblenden
    allow = zulassen
    link = Mehr erfahren
    deny = Cookies ablehnen
    href = /datenschutzerklaerung/
    revokeBtn = <div class='cc-revoke {{classes}}'>Cookie Optionen</div>
    regionalLaw = false
    location = true
}

styles.content.allowTags:= addToList( s, mark)

# in px (preset)
styles.content.textmedia.maxW = 1320
styles.content.textmedia.linkWrap.width = 1320m
styles.content.textmedia.linkWrap.height = 800m

#disable some not used constants
styles.content.textmedia.maxWInText =
styles.content.textmedia.columnSpacing =
styles.content.textmedia.rowSpacing =
styles.content.textmedia.textMargin =
styles.content.textmedia.borderColor =
styles.content.textmedia.borderWidth =
styles.content.textmedia.borderPadding =

UPDATE - Best practice

Update-Info auf v5.0.0 von älteren Versionen!
Update-Info auf v4.5.5 von älteren Versionen!

Upgrade Wizard:
v5.1.5 - t3sbs_carousel migrate image -> assets (Local-Video und "original image" in Carousel)
v5.0.0 - Hiermit werden die eingesetzten Utility-Classes umbenannt (INFO).
v4.5.5 - Migrate tx_gridelements to tx_container - Wizard wurde in v5 entfernt!