Installation
Support für TYPO3 12
PHP 8.1 - 8.3
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
oder einem Sitepackage t3sb_package
auslagern.
Wenn du die Dateien in ein Sitepackage auslagern möchtest, muss die EXT:t3sb_package installiert und aktiviert sein sowie die Option “sitepackage” (unter T3sb) in der EM config aktiviert sein!
Danach 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.…/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.
# include Bootstraps bundle.min.js (include popper.js)
bootstrap.bundle.enable = 1
# 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
# Google fontsweights
bootstrap.gooleFontsWeights = 300, regular, 700
# Clears the cache when the config is saved
bootstrap.extconf.clearPageCache = 1
# 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
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
}
# 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
}
# style one for the submenu (0 = default)
bootstrap.submenu.styleOne = 0
# creating "Skip Links" to navigation, content or footer for barrier-free accessibility if activated (in Main.html)
bootstrap.skiplinks = 0
# remove any string (e.g. a class name) from shortcuts if in parent CE/wrapper
bootstrap.shortcutsremove =
# 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.3.3 - BgOpacityUpgradeWizard - change settings from e.g. 80 to 0.8 - Wizard wurde in v5.3.13 entfernt!
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!