Genauere Informationen zur Einbindung, Konfiguration und Anpassung findest du hier.
bh_newsletter
Button-Element für den Newsletter
HTML-Template: nl-button.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace nl=TYPO3\BhNewsletter\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<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>
<f:if condition="{cObj.allSettings.style.btn-full-width}">
<f:then>
<f:variable name="btn-width" value="100%" />
</f:then>
<f:else>
<f:variable name="btn-width" value="auto" />
</f:else>
</f:if>
<nl:section full-width="true" background-color="{color}{cObj.allSettings.color}" padding="{cObj.allSettings.paddingVTop} 0px {cObj.allSettings.paddingVBottom}" width="{cObj.allSettings.width}" class="nl-button-section">
<nl:cols.row width="{cObj.allSettings.width}">
<nl:cols.col width="{cObj.allSettings.width}" padding="0px">
<table width="{btn-width}" align="{cObj.allSettings.style.button-align}" border="0" cellpadding="0" cellspacing="0" style="text-align:{cObj.allSettings.style.button-align};">
<tr>
<td width="100%" valign="middle" align="center" class="buttonBG">
<bh:link link="{cObj.link}" class="buttonLink">
<bh:property.text tag="span" rte="false" property="text" />
</bh:link>
</td>
</tr>
</table>
</nl:cols.col>
</nl:cols.row>
</nl:section>
</bh:tmpl.element>
Typoscript: nl-button.typoscript
TYPOSCRIPT
plugin.tx_bh.settings.contentElements {
nl-button < abstract.bhElement
nl-button {
name = Button
hidden = 0
bheListgroup = 10
bheSorting = 40
description = verlinkbarer Button
iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/linkbox.svg
settingsForm = EXT:bh_newsletter/Resources/Public/Elements/nl-button/nl-button-settings.html
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-button/
templateFile = nl-button.html
link = 1
doNotRenderLink = 1
options.oncreate = advanced
dummyData.text = mehr dazu...
style.btncolor = orange
width = 600
paddingVTop = 30px
paddingVBottom = 30px
style.with-text = with-text
styleOptions >
styleOptions.color < element.options.nlbgcolor
styleOptions.width < element.options.width
styleOptions.paddingV < element.options.paddingV
styleOptions.width {
width-200 = mini (200px)
}
styleOptions.button-align {
left = links
center = mittig
right = rechts
}
styleOptions.btntype{
btn-type-bg = farbiger Hintergrund
btn-type-border = farbiger Rahmen
}
styleOptions.btncolor{
btn-color-white = weiß
btn-color-black = schwarz
}
style.button-align = center
enablePaddingV = 1
settingsGlobalFields {
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-settings-global-fields.html
}
}
}
## Mediaqueries
element.options.mediaqueries.mobile.nl-button = nl-button-mediaqueries-mobile
## CSS
page.includeCSS {
nl-button = EXT:bh_newsletter/Resources/Public/Elements/nl-button/nl-button.css
nl-button.forceOnTop = 1
}
Settings-HTML: nl-button-settings.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<div class="bhe-formsettings-option">
<label>Optik des Buttons</label>
<f:form.select name="style[btntype]" value="{cObj.allSettings.style.btntype}"
options="{cObj.allSettings.styleOptions.btntype}" />
</div>
<div class="bhe-formsettings-option">
<label>Buttonfarbe</label>
<f:form.select name="style[btncolor]" value="{cObj.allSettings.style.btncolor}"
options="{cObj.allSettings.styleOptions.btncolor}" />
</div>
<div class="bhe-formsettings-option">
<label>Ausrichtung des Buttons</label>
<f:form.select name="style[button-align]" value="{cObj.allSettings.style.button-align}"
options="{cObj.allSettings.styleOptions.button-align}" />
</div>
<div class="bhe-formsettings-option">
<label>Button volle Breite</label>
<f:form.checkbox name="style[btn-full-width]" value="btn-full-width"
checked="{cObj.allSettings.style.btn-full-width}" />
</div>
<div class="bhe-formsettings-option bhe-setting-width">
<label>Breite des Elements</label>
<f:form.select name="style[width]" value="{cObj.allSettings.style.width}"
options="{cObj.allSettings.styleOptions.width}" />
</div>
<div class="bhe-formsettings-option bhe-element-width" style="display:none;">
<label>Breite des Elements</label>
<f:form.textfield type="number" name="width" value="{cObj.allSettings.width}" />
</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.initSettingsWidth();
</script>
</bh:form.settingsform>