Installation

Support für TYPO3 12

PHP 8.1 & 8.2

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

  • Container Content Elements - (container)
  • Content Defender - (content_defender)

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 - Version-Settings and Google Fonts

T3SB Image settings
T3SB OPTIMIZE-Bootstrap
& T3SB Global pages override
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 - MORE INFO: docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Hmenu/Index.html
bootstrap.pagebrowser.enable = 0
bootstrap.pagebrowser.prevnextToSection = 1
# options: index|up|nextsection|next|prev|prevsection
# used in: page.10.dataProcessing.12 -> Page/Template.typoscript
bootstrap.pagebrowser.prevItem = prev|prevsection
bootstrap.pagebrowser.nextItem = nextsection|next
bootstrap.pagebrowser.entryLevel = 1

# enable the currently available utility colors in the BE Modul
bootstrap.config.enableUtilityColors = 1
# hints to increase the website speed in the BE Modul
bootstrap.config.enableInfo = 1

bootstrap.config.sectionMenuClass = 0

# include print template
bootstrap.print.enable = 0

# disable default CSS - t3sbootstrap.css
bootstrap.config.disableDefaultCss = 0

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

# Preload the google fonts included by bootstrap.cdn.googlefonts if activated (execute scheduler task t3sbootstrap:cdnToLocal)
bootstrap.preloadGooleFonts = 0
# font-weights for Google fonts (regular == 400)
bootstrap.gooleFontsWeights = 300, regular, 700

# 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

bootstrap.navbar {
    image.defaultPath = EXT:t3sbootstrap/Resources/Public/Images/bootstrap-logo-white.svg
    image.width = 30
    image.height = 24
    image.altText = Company Logo
    # (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
    }
    # (int+) subdropdown with two columns if items greater or equal
    subdropdown.twoColumns = 30
    # (boolean) page uid with search plugin - link to your search plugin
    searchboxLink = 0
    # (boolean) fe user name in navbar - if logged in
    feUserName = 0
    # Dropdown icon float right
    floatDropdownIconRight = 0
}

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

# enable in EM config (info: github.com/insites/cookieconsent)
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
}

# Color mode toggler - only if "bootstrap.config.navbarDarkMode" is disabled
bootstrap.colorMode {
    enable = 0
    # e.g.: position-fixed bottom-0 start-0 mb-3 ms-3 | info: getbootstrap.com/docs/5.3/utilities/position/
    position = position-fixed bottom-0 end-0 mb-3 me-3
}

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

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) - Wizard wurde in v5.3 entfernt!
v5.0.0 - Hiermit werden die eingesetzten Utility-Classes umbenannt (INFO) - Wizard wurde in v5.3 entfernt!
v4.5.5 - Migrate tx_gridelements to tx_container - Wizard wurde in v5 entfernt!