Configure Powermail 8 to use with Bootstrap 5 within TYPO3 10
I wanted to have the option to use Powermail 8 with Bootstrap 5 within TYPO3 10 using bootstrap_package extension as basic site package. Fields should be configured to use 12 columns or 4/3 columns beginning with medium devices.
Additionally I added a new field which outputs a blank line to add line breaks between fields if wanted to have it.
Configuration in Page TSConfig:
TCEFORM {
# Powermail
tx_powermail_domain_model_form {
css {
removeItems = layout1, layout2, layout3
addItems {
col-12 = LLL:EXT:renolit/Resources/Private/Language/locallang.xlf:powermail_12col
col-md-4 = LLL:EXT:renolit/Resources/Private/Language/locallang.xlf:powermail_4col
col-md-3 = LLL:EXT:renolit/Resources/Private/Language/locallang.xlf:powermail_3col
}
}
}
tx_powermail_domain_model_page < .tx_powermail_domain_model_form
tx_powermail_domain_model_field < .tx_powermail_domain_model_form
}
# Powermail new fields
tx_powermail.flexForm.type.addFieldOptions.blankline = LLL:EXT:renolit/Resources/Private/Language/locallang.xlf:powermail_blankline
Needed translations:
<trans-unit id="powermail_blankline">
<source>Blank line</source>
</trans-unit>
<trans-unit id="powermail_12col">
<source>12 cols (full width)</source>
</trans-unit>
<trans-unit id="powermail_4col">
<source>4 cols</source>
</trans-unit>
<trans-unit id="powermail_3col">
<source>3 cols</source>
</trans-unit>
Constants:
plugin.tx_powermail {
settings {
styles {
bootstrap {
numberOfColumns = 2
rowClasses = row
formClasses = form-horizontal
fieldAndLabelWrappingClasses = mb-4
fieldWrappingClasses = col-12
labelClasses = control-label col-12 mb-2
fieldClasses =
offsetClasses = col-sm-offset-2
radioClasses = form-check
checkClasses = form-check
submitClasses = btn btn-primary
createClasses = powermail_create
important = 1
}
framework {
formClasses = container
}
}
}
}
Add a new field template in your site package in the configured Powermail partial path: /your-partial-path/Powermail/Form/Field/Blankline.html with the following content:
<div class="col-12"></div>
With this configuration it's possible to configure each fields behaviour in an easy way to view it over 12, 4 or 3 columns and add breaks before or after fields.