Search code examples
typo3typo3-9.xtypo3-extensions

Bootstrap's fullscreen carousel does not show up as full-screen in TYPO3

I've added Bootstrap's carousel to my TYPO3 website as a content element. The type of carousel I'm using is carousel_fullscreen. However, the carousel does not cover the full screen. See image: enter image description here

When I look at the source code I think it might be because the carousel is wrapped in a div with 'container' as the class. How do I ensure that the carousel does cover the whole screen?

Solution

  • As you can see from the Bootstrap documentation the container class has a fixed max-width (for each breakpoint). I guess you could use the container-fluid class to cover the full width of the viewport.

    In most cases (but that depends on the individual setup and there is no general rule for that) a <div class="container"> encompasses all the content elements of your page, and it is part of the page template;

    If you are using the famous bootstrap_package extension, it provides all the page templates using the FLUIDTEMPLATE object and the files you are looking for are located in the folder

    EXT:bootstrap_package/Resouces/Private/Templates/Page

    you have to locate which one your page is currently using.

    I would strongly recommend not to modify these files by yourself, but to create an extension of your own (it is usually referred to as "frontend provider" or "site package") and override these files by storing them there and override their paths; you can use this site https://www.sitepackagebuilder.com/new/ to build a new extension for that purpose if you don't already know how to do that.

    EXT:boostrap_package comes with a TypoScript constant 

    page.fluidtemplate.templateRootPath

    that you can use for that; so in your extension there will be a Typoscript Constant like:

    page.fluidtemplate.templateRootPath = EXT:yourextensionname/Resources/Private/Templates/Page/

    Just copy the template file from EXT:bootstrap_package you want to modify to this new path and it will be used.

    If your page template is not provided by EXT:bootstrap_package itself, then it is highly probable that you are already using a "sitepackage" extension and you can modify its files; to find it out a method could be:

    1) Enter the TYPO3 backend as administrator and click on the "Template" module 2) Click on the page with the TypoScript template (usually the home page) 3) on the upper dropdown select "TypoScript Object Browser" 4) make sure you are browsing the "Setup" tree (there is another dropdown) 5) on that tree, you can expand the nodes and search for the "page" node; expand everything inside it and search for the node that ends with "= FLUIDTEMPLATE"; it would be likely something like:

    enter image description here

    In this example "bhsiteconf" is the name of my sitepackage; EXT:bhsiteconf is a short form for /typo3conf/extensions/bhsiteconf so you will have to look on that path to find the template files you are searching for (the extension name would be different of course)