Button  

    bh_newsletter
    Button-Element für den Newsletter

    Genauere Informationen zur Einbindung, Konfiguration und Anpassung findest du hier.

    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>