Site Konfiguration
Das erforderliche Site Set "T3S Bootstrap - MAIN SETTINGS” ist einzubinden.dependencies: typo3/fluid-styled-content
Hiermit wird typo3/fluid-styled-contentautomatisch eingebunden!
Folgende Sets sind optional:
- T3S Bootstrap - VERSION (optional)
Erforderlich für den Scheduler Task “CDN to local” oder “Custom SCSS” - T3S Bootstrap - IMAGE SETTINGS (optional)
Z.B. kann hier eine File-Extension (webp oder avif …) für das Rendern von Bildern angegeben werden. - T3S Bootstrap - BOOTSTRAP OPTIMIZE (optional)
Wird nur benötigt, wenn du bestimmte Bootstrap Componenten entfernen möchtest. - T3S Bootstrap - OTHER SETTINGS (optional)
Verschiedene Optionen, die selten zum Einstaz kommen. - T3S Bootstrap - PAGES OVERRIDE (optional)
Hiermit kannst du globale Settings für Seiteneigenschften vorbelegen! Einige können unter “Seite bearbeiten” überschrieben werden.
Site Settings
Konstanten
T3S Bootstrap - MAIN SETTINGS
T3SB Templates
| Path of Fluid Layouts | Pfad zu den Layouts | bootstrap.view.layoutRootPath |
| Path of Fluid Partials | Pfad zu den Partials | bootstrap.view.partialRootPath |
| Path of Fluid Templates | Pfad zu den Templates | bootstrap.view.templateRootPath |
T3SB CDN, SCSS and Google Fonts
Nach einer Änderung muss der Scheduler-Task ausgeführt werden, um die erforderlichen Dateien in die EXT:t3sb_package/ zu schreiben!
| Enable CDN | Bitte die „DSGVO“ („DSGVO“) beachten. Bevor CDN deaktiviert werden kann, den Scheduler-Task „T3SB CDN to local“ ausführen. | bootstrap.cdn.enable |
| Enable Custom SCSS | Den Scheduler-Task „T3SB Custom SCSS” einmalig ausführen. Bevor „Enable Custom SCSS” aktiviert werden kann, muss „Enable CDN” deaktiviert werden. | bootstrap.cdn.customScss |
| Bootswatch Themes | Den Scheduler-Task „T3SB CDN to local” und „T3SB Custom SCSS” ausführen, wenn „Custom SCSS” aktiviert ist. Überschreiben Sie die Standardwerte von Bootstrap mit dem ausgewählten Bootswatch-Theme – Info: https://bootswatch.com/ | bootstrap.cdn.bootswatch |
| Keep Bootstrap variables | Behalten Sie Ihre Bootstrap-SCSS-Variablen bei, wenn Sie den Scheduler ausführen (aus welchem Grund auch immer). | bootstrap.cdn.keepVariables |
| Comma separated list with google fonts | Den Scheduler-Task „T3SB CDN to local” ausführen. Integriere Google Fonts „DSGVO”-konform lokal in deiner Website (z. B.: Montserrat, Fira Sans). | bootstrap.cdn.googlefonts |
| Font-weights for Google fonts | Den Scheduler-Task „T3SB CDN to local” ausführen. | bootstrap.gooleFontsWeights |
jQuery
| Disable jQuery (true by default) | Diese Option deaktivieren, wenn jQuery benötigt wird. | bootstrap.disable.jquery |
| Load jQuery into the header | jQuery im Header laden. | bootstrap.config.jqueryHeader |
T3SB Image settings
| Custom file extension to use | z. B. webp, avif oder andere zulässige Dateiendungen. Die temporären Assets entfernen (Install-Tool). | bootstrap.image.fileExtension |
| Set Cookie with viewport width | Nützlich bei Verwendung des Containers „fluid-container” und automatischer Bildbreite. | bootstrap.image.viewportWidthCookie |
Default Image Size
| Min. width | Wenn diese Option aktiviert ist, wird die minimale „equalMediaWidth“ auf 575px und damit auf 100 % Breite auf Mobilgeräten festgelegt. Kann überschriebne werden! | bootstrap.image.minimumWidth |
| Ratio | Wenn aktiviert, verwenden Sie Breite und Höhe für das Verhältnis in Textmedien, Textbildern, Bildern, Karten und Medienobjekten. | bootstrap.image.ratioWithHeight |
| Max. image width Media object | Die Standard-Maximalbreite für das Medienobjekt. | bootstrap.image.maxWidthMediaObject |
| Max. image width Toast | Die Standard-Maximalbreite für Bootstrap-Toasts. | bootstrap.image.maxWidthToast |
| Disable auto row | Die Standardeinstellung „Gallery row width in % = auto“ wird bei Aktivierung auf „none“ gesetzt. | bootstrap.image.disableAutoRow |
Additional image sizes
(srcset) das für jedes Inhaltsbild generiert werden sollte
| For Desktop min-width 1200px | Durch Kommas getrennte Liste der Bildbreiten, angegeben in Pixeln. | bootstrap.image.srcsetDesktop |
| For for Tablet min-width 576px | Durch Kommas getrennte Liste der Bildbreiten, angegeben in Pixeln. | bootstrap.image.srcsetTablet |
| For Mobile max-width 575px | Durch Kommas getrennte Liste der Bildbreiten, angegeben in Pixeln. | bootstrap.image.srcsetMobile |
| For Background-Image | Durch Kommas getrennte Liste der Bildbreiten, angegeben in Pixeln. | bootstrap.image.bgMediaQueries |
Lazyloading Threshold
| Threshold for Lazy load | Wenn „lazyLoad” in der EM-Konfiguration aktiviert ist, der Abstand außerhalb des Ansichtsfensters, in Pixel, vor dem mit dem Laden der Bilder begonnen werden soll. | bootstrap.image.lazyLoadThreshold |
| Lazy load for images in the BG-Wrapper | Jedoch nicht für “backgrond-images” | bootstrap.image.lazyLoadBgWrapperImage |
T3SB Other
Zusätzliche Einstellungen, die zuvor nicht im Konstanten-Editor enthalten waren
Miscellaneous
| Include Bootstraps bundle.min.js | bundle.min.js (include popper.js) anstelle von 2 Dateien | bootstrap.bundle.enable |
| Add class "section-index" | zu jedem Inhaltselement – Wird in einigen seltenen Fällen verwendet | bootstrap.config.sectionMenuClass |
| Disable default CSS - t3sbootstrap.css | bootstrap.config.disableDefaultCss | |
| Disable Fontawesome CSS - t3sb-fontawseome.css | bootstrap.config.disableFaCss | |
| Clears the cache | Wenn T3SB config gespeichert wird | bootstrap.extconf.clearPageCache |
| Disable scroll to top for accordions | bootstrap.disable.accordion.scrollToTop | |
| creating "Skip Links" to navigation, content or footer | Für barrierefreien Zugang, wenn aktiviert (in Main.html) | bootstrap.skiplinks |
| Disable scroll to top for accordions | bootstrap.disable.accordion.scrollToTop | |
| Remove any string from shortcuts | Entfernt alle Zeichenfolgen aus shortcuts, wenn diese sich in einem übergeordneten CE/Wrapper befinden. | bootstrap.shortcutsremove |
| Style one for the submenu | bootstrap.submenu.styleOne | |
| Enable color mode toggler | Nur wenn „bootstrap.config.navbarDarkMode” deaktiviert ist | bootstrap.colorMode.enable |
| Position-fixed bottom-0 start-0 mb-3 ms-3 | Info: https://getbootstrap.com/docs/5.3/utilities/position/#center-elements | bootstrap.colorMode.position |
Pagebrowser
MORE INFO: https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Hmenu/Index.html#special-browse
| Enable Pagebrowser | bootstrap.pagebrowser.enable | |
| Prev and next navigation | Wenn diese Option aktiviert ist, springen die Navigationen „Zurück“ und „Weiter“ zum nächsten Abschnitt, wenn das Ende der Seiten im aktuellen Abschnitt erreicht ist. | bootstrap.pagebrowser.prevnextToSection |
| Prev item | Optionen: index|up|nextsection|next|prev|prevsection | bootstrap.pagebrowser.prevItem |
| Next item | Optionen: index|up|nextsection|next|prev|prevsection | bootstrap.pagebrowser.nextItem |
| Entry Level | bootstrap.pagebrowser.entryLevel |
Back to top button
| Link Title | bootstrap.backToTopTitle | |
| Class | Font Awesome HTML class | bootstrap.backToTopClass |
| Iconpack Class | Wenn EXT:iconpack aktiviert ist | bootstrap.backToTopIconpack |
| Back to top icon for all pages | bootstrap.backToTopForAllPages |
Navbar
| No link title in the navbar links | bootstrap.navbar.noLinkTitle | |
| Navbar brand image path | bootstrap.navbar.image.defaultPath | |
| Navbar brand image width | In px | bootstrap.navbar.image.width |
| Navbar brand image height | In px | bootstrap.navbar.image.height |
| Navbar brand image alt text | bootstrap.navbar.image.altText | |
| Default small breakpoint (sm) | Benötigt für inlineJS, z. B. bei navbar hover | bootstrap.navbar.breakpoint.sm |
| Default medium breakpoint (md) | Benötigt für inlineJS, z. B. bei navbar hover | bootstrap.navbar.breakpoint.md |
| Default large breakpoint (lg) | Benötigt für inlineJS, z. B. bei navbar hover | bootstrap.navbar.breakpoint.lg |
| Default extra large breakpoint (xl) | Benötigt für inlineJS, z. B. bei navbar hover | bootstrap.navbar.breakpoint.xl |
| Default extra extra large breakpoint (xxl) | Benötigt für inlineJS, z. B. bei navbar hover | bootstrap.navbar.breakpoint.xxl |
| Subdropdown with two columns if items greater or equal | bootstrap.navbar.subdropdown.twoColumns | |
| Page UID with search plugin | Link zu deinem Search-PlugIn | bootstrap.navbar.searchboxLink |
| Fe user name in navbar - if logged in | bootstrap.navbar.feUserName | |
| Dropdown icon float right | bootstrap.navbar.floatDropdownIconRight |
Global pages override
| Container (for the whole page) | bootstrap.pages.override.container | |
| Aside columns width | bootstrap.pages.override.smallColumns | |
| Dropdown menu right | bootstrap.pages.override.dropdownRight | |
| Aside order on mobile | bootstrap.pages.override.mobileOrder | |
| Breakpoint | bootstrap.pages.override.breakpoint | |
| Title color | Hex color codes, RGB or CSS variables e.g. var(--bs-primary) | bootstrap.pages.override.titlecolor |
| Subtitle color | Hex color codes, RGB or CSS variables e.g. var(--bs-primary) | bootstrap.pages.override.subtitlecolor |
T3SB - Version-Settings
Für CDN und den Scheduler-Task „T3SB CDN to local“ verwendete Versionen könne hier angepasst werden – müssen gültig sein:
| Bootstrap | bootstrap.bundle.min.js, bootstrap.min.js & bootstrap.min.css | https://getbootstrap.com/ |
| Popper JS | popper.js | https://popper.js.org/ |
| Masonry JS | masonry.pkgd.min.js | https://getbootstrap.com/ |
| jQuery library | jquery.min.js | https://jquery.com/ |
| Lazyload | lazyload.min.js | https://github.com/ |
| Animate CSS: animate.compat.css | animate.compat.css | https://animate.style |
| Baguette Box: baguetteBox.min.css | baguetteBox.min.js & baguetteBox.min.css | https://feimosi.github.io/ |
| Halkabox | halkaBox.min.js & halkaBox.min.css | https://ahmednooor.github.io/ |
| G Lightbox | glightbox.min.js & glightbox.min.css | https://github.com/ |
| Jarallax | jarallax.min.js & jarallax-video.min.js | https://github.com/ |
| Swiper | swiper-bundle.min.js & swiper-bundle.min.css | https://swiperjs.com |