Installation

Support für TYPO3 10 & 11

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::EXTENSIONS 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

# disable default css & js included in ConfigProcessor->includeRequiredFiles
bootstrap.config.disableDefaultCss = 0
# enable the currently available utility colors in the BE Modul
bootstrap.config.enableUtilityColors = 1
# get the filereferences from the slides (t3sb_carousel) in the CarouselContainer.html if activated
bootstrap.config.carouselFiles = 0

# include print template
bootstrap.print.enable = 0

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

# GTM Account ID - include the Google Tag Manager if entered
bootstrap.gtm =

# disable jQuery by default
bootstrap.disable.jquery = 1

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
}


# 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
}

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 =

# pages override
pages.override {
	# 1,2,3,4 or 6 (only)
	smallColumns =
	# sm,md,lg or xl (only)
	breakpoint =
}

UPDATE

Ein Update auf Version 5 ist ab Version 4.5.5 möglich!
Update-Info auf v4.5.5 von älteren Versionen!

Upgrade Wizard:
T3SBootstrap - Migrate to Bootstrap 5
Hiermit werden die eingesetzten Utility-Classes umbenannt (INFO).