Customize the TYPO3 bootstrap_package
What is TYPO3?
Typo3 is a free and open-source content management system (CMS) for creating and managing digital material on websites. It is popular for enterprise and corporate websites due to its flexibility, scalability, and advanced functionality. Typo3 includes a strong templating system, multi-language support, versioning, user management, and a diverse set of third-party extensions for content editors, developers, and administrators. Because of its solid design and customizability, it is an excellent choice for developing complex and feature-rich online applications.
What is the bootstrap_package?
Bootstrap is a popular open-source front-end framework for developing and styling online interfaces. It includes a collection of pre-built tools, styles, and components, such as buttons, forms, and navigation bars, to assist developers in creating responsive and visually appealing websites and online apps. Bootstrap is well-known for its ease of use, as it enables the construction of consistent designs across several devices and screen sizes by utilizing responsive CSS and JavaScript. It's well-known for its grid system, which allows for the building of adaptable layouts, as well as its large library of components and utilities. The bootstrap package make this easy usable for your TYPO3 project with pre defined content elements.
Getting Started
Requirements
You will need a TYPO3 running on your server or local to get started.
If you don't have it jet follow the instractions from the TYPO3 documentation
or the instructions from my post traefik with docker-compose and my git repository if you want to run it behind traefik with docker-compose.
Create a new theme plugin
To create a new plugin you have firstly to create a new folder, in your TYPO3 instance, in WEBROOT/typo3conf/ext/.
For this example I will name it a2g_theme.
In your new folder (a2g_theme) create a php file called ext_emconf.php with the following content.
CODE: ext_emconf.php
<?php
$EM_CONF[$_EXTKEY] = [
'title' => 'altogether Theme',
'description' => '',
'category' => 'templates',
'author' => 'Raphael Martin',
'author_email' => '[email protected]',
'state' => 'stable',
'clearCacheOnLoad' => 0,
'version' => '1.0.0',
'constraints' => [
'depends' => [
'typo3' => '12.4.9',
'bootstrap_package' => '14.0.7'
],
'conflicts' => [],
'suggests' => [],
],
];
Change the name, email and if requiered the versions from the dependensis.
After creating your ext_emconf.php you have to create in your plugin folder the following folder structure:
Configuration
→ TCA
→ Overrides
→ TypoScript
Resources
→ Private
→ Bootstrap_package
→ Public
→ Css
Now create a typosript file called setup.typoscript in Configuration → TypoScript.
CODE: setup.typoscript
page.includeCSS.theme = EXT:a2g_theme/Resources/Public/Css/theme.scss
In this file we override the theme css from the bootstrap_package to load the custom scss from this plugin.
That we are able to load this you have to create the theme.scss in Resources → Public → Css with the content:
CODE: theme.scss
// append your costum css/scss here after the theme import
@import '../../../../bootstrap_package/Resources/Public/Scss/bootstrap5/theme';
Here we include the theme scss from the bootstrap_package to use all the mixins and variables from it.
To make the typoscript loadabel for TYPO3 you have to creat 100_sys_template.php in Configuration → TCA → Overrides.
CODE: 100_sys_template.php
<?php
defined('TYPO3') || die();
/***************
* TypoScript: Full Package
* This includes the full setup including all configurations
*/
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
'a2g_theme',
'Configuration/TypoScript',
'Altogether Theme: Full Package'
);
Now copy all the files from the bootstrap_package/Resources/Private to a2g_theme/Resources/Private/Bootstrap_package.
If you are done with it login to your TYPO3 instance and install the plugin and enable it in your root page.
you can find the example on my git server.
