TYPO3 v9 LTS Template Foundation - Use it as a base for your website configuration. Add all your Stylesheets, JavaScripts and Templates.
It is considered good practice to save anything related to your website theme
in a separate extension (a so-called Site package):
This TYPO3 extension can be a base for your website configuration.
Add your Stylesheets, JavaScripts and templates, adapt the supplied configurations to your needs.
It will not impose any Frontend Framework on you. You’re free to use your favourite Framework or custom templates.
You want to use Bootstrap for your new website? In that case I recommend the
bootstrap_package extension.
This will provide you with a complete integration of Bootstrap in TYPO3.
typo3conf/ext/
of your TYPO3 installation.sys_template
).For every column you create in a single BackendLayout, you have to set an individual colPos
number.
You should however reuse these values across your other BackendLayouts.
It allows the editors to change the layout of a page while keeping the content in place.
Set the colPos
values wisely. The content of e.g. the top column shouldn’t suddenly move to the bottom
when changing layouts.
Linking a BackendLayout to a Fluid template:
page.10 {
file.stdWrap.cObject {
key.data = pagelayout
// Important! If you set BackendLayouts through TSconfig, you MUST use the prefix 'pagets__':
pagets__2_columns_66_33 = TEXT
pagets__2_columns_66_33.value = EXT:basetemplate9/Resources/Private/Templates/2Columns-66-33.html
default = TEXT
default.value = EXT:basetemplate9/Resources/Private/Templates/1Column.html
}
}
The TypoScript lib.dynamicContent
will take care of rendering the desired column’s content
in your Fluid templates.
All you have to do is inserting the following f:cObject
viewhelper into your Fluid template
and adapt the colPos
value:
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '0'}"></f:cObject>
More details: TYPO3 Site Package tutorial, Chapter ‘Content Mapping’
At some point, you’ll need to customize templates from extensions like news.
You should save all these modifications in your Site Package, too.
I recommend to store them inside the subdirectory Resources/Private/EXT/
to separate them from your website templates.
In case of EXT:news, this will result in the following directory structure:
Resources/Private/EXT/news/Templates/
Resources/Private/EXT/news/Partials/
Resources/Private/EXT/news/Layouts/
You’ll have to set these paths in TypoScript. All TypoScript configurations for third party extensions
should be stored in Configuration/TypoScript/plugin/plugin.[extensionKey].typoscript
.
With TYPO3 version 8.7.2, the file extensions .typoscript and .tsconfig have become the new defaults.
Add these to your editor to benefit from TypoScript syntax highlighting again.
In PhpStorm, open Settings/Preferences and add the patterns *.typoscript
and *.tsconfig
to TypoScript in Editor | Code Style.
[1] TYPO3 extensions have some naming conventions.
See: https://extensions.typo3.org/about-extension-repository/extension-keys/
[2] Also be very careful when using underscores in your extension name! It is highly encouraged to avoid them.
If you e.g. choose the name client_templates_2016
, you’ll have to use two notations!
In links like EXT:client_templates_2016/link/to/file.css, use the actual folder name.
When using constants however, you’ll have to remove all underscores and prefix tx_
: $plugin.tx_clienttemplates2016!