Genauere Informationen zur Einbindung, Konfiguration und Anpassung findest du hier.
bh_newsletter
Spalten-Element für den Newsletter
HTML-Template: nl-columns.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace nl=TYPO3\BhNewsletter\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<f:variable name="col1" value="{cObj.allSettings.col1}" />
<f:variable name="col2" value="{cObj.allSettings.col2}" />
<f:variable name="width" value="{cObj.allSettings.width}" />
<f:if condition="{cObj.allSettings.color} == 'transparent'">
<f:then>
<f:variable name="color" value="" />
</f:then>
<f:else>
<f:variable name="color" value="#" />
</f:else>
</f:if>
<nl:section full-width="true" background-color="{color}{cObj.allSettings.color}" padding="{cObj.allSettings.paddingVTop} 0px {cObj.allSettings.paddingVBottom}" width="{width}" class="color-{cObj.allSettings.color} nl-section-padding-adjustable">
<nl:cols.row width="{width}">
<nl:cols.col width="{col1}" padding="0px" class="nl-col nl-col1 nl-col-width-{col1}">
<div class="col-width" data-col-width="{col1}">
<bh:tmpl.content section="col1" elements-allowed="{cObj.allSettings.elementsAllowed}" parent="{cObj.uid}" />
</div>
</nl:cols.col>
<nl:cols.col width="{cObj.allSettings.paddingCol}" padding="0px">
<div class="colSpace"> </div>
</nl:cols.col>
<nl:cols.col width="{col2}" padding="0px" class="nl-col nl-col2 nl-col-width-{col2}">
<div class="col-width" data-col-width="{col2}">
<bh:tmpl.content section="col2" elements-allowed="{cObj.allSettings.elementsAllowed}" parent="{cObj.uid}" />
</div>
</nl:cols.col>
</nl:cols.row>
</nl:section>
</bh:tmpl.element>
Typoscript: nl-columns.typoscript
TYPOSCRIPT
plugin.tx_bh.settings.contentElements {
nl-columns < abstract.bhElement
nl-columns {
name = Spalten
hidden = 0
bheListgroup = 10
bheSorting = 30
description = Element um Spalten zu machen
iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/columns.svg
settingsForm = EXT:bh_newsletter/Resources/Public/Elements/nl-columns/nl-columns-settings.html
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-columns/
templateFile = nl-columns.html
padding = 0
paddingCol = 20
paddingVTop = 30px
paddingVBottom = 30px
grid = 300
width = 600
col1 = 290
col2 = 290
options{
oncreate = advanced
edit = 0
translate = 0
}
styleOptions >
styleOptions.color < element.options.nlbgcolor
styleOptions.paddingV < element.options.paddingV
styleOptions{
colStyles{
default = auswählen...
fifty = ½ / ½
onethird = ⅓ / ⅔
twothird = ⅔ / ⅓
}
}
elementsAllowed = nl-text,nl-picture,nl-button,nl-box,nl-newsbox,nl-pauschalbox
enablePaddingV = 1
settingsGlobalFields {
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-settings-global-fields.html
}
}
}
## Mediaqueries
element.options.mediaqueries.desktop.nl-columns = nl-columns-mediaqueries-desktop
element.options.mediaqueries.mobile.nl-columns = nl-columns-mediaqueries-mobile
## CSS
page.includeCSS {
nl-columns-newsletter = EXT:bh_newsletter/Resources/Public/Elements/nl-columns/nl-columns.css
nl-columns-newsletter.forceOnTop = 1
}
Settings-HTML: nl-columns-settings.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<div class="bhe-formsettings-option" id="bhe-colstyle-select" data-colstyle="{cObj.allSettings.grid}">
<label>Aufteilung der Spalten</label>
<div class="bhColsStyleGroup">
<f:form.radio name="grid" value="300" class="bhe-colstyle-radio bh-cols-fifty" />
<f:form.radio name="grid" value="200" class="bhe-colstyle-radio bh-cols-onethird" />
<f:form.radio name="grid" value="400" class="bhe-colstyle-radio bh-cols-twothirds" />
</div>
</div>
<div class="bhe-formsettings-option bhe-col1-width" style="display:none;">
<label>Breite Spalte 1 in Pixel</label>
<f:form.textfield type="number" name="col1" value="{cObj.allSettings.col1}" />
</div>
<div class="bhe-formsettings-option bhe-col2-width" style="display:none;">
<label>Breite Spalte 2 in Pixel</label>
<f:form.textfield type="number" name="col2" value="{cObj.allSettings.col2}" />
</div>
<div class="bhe-formsettings-option bhe-col-padding" style="display:none;">
<label>Platz zwischen den Spalten</label>
<f:form.textfield type="number" name="paddingCol" value="{cObj.allSettings.paddingCol}" />
</div>
<div class="bhe-formsettings-option">
<label>Hintergrundfarbe</label>
<f:form.select name="color" value="{cObj.allSettings.color}" options="{cObj.allSettings.styleOptions.color}" />
</div>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
<f:form.submit value="Speichern" />
<script type="text/javascript">
Bh.newsletter.coreElements.initColSettings();
</script>
</bh:form.settingsform>