Le Code de Newsletter
Um einen besseren Einblick zu erhalten, hier der Code der TypoScript-, HTML- & CSS-Dateien der einzelnen Newsletter-Core-Elemente.
Le Code de Newsletter
nl-text
Typoscript:
Typoscript
plugin.tx_bh.settings.contentElements {
nl-text < abstract.bhElement
nl-text {
name = Text
hidden = 0
bheListgroup = 10
bheSorting = 10
description = Text-Element
iconFile = typo3/sysext/bh/Resources/Public/Icons/Elemente/text.svg
settingsForm = EXT:bh_newsletter/Resources/Public/Elements/nl-text/nl-text-settings.html
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-text/
templateFile = nl-text.html
options.oncreate = advanced
paddingVTop = 30px
paddingVBottom = 30px
paddingH = 0
width = 600
dummyData {
text (
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
)
subtext (
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
)
}
styleOptions >
styleOptions.cols {
textCols1 = Text einspaltig
textCols2 = Text zweispaltig
}
styleOptions.color < element.options.nlbgcolor
styleOptions.width < element.options.width
styleOptions.paddingV < element.options.paddingV
style.cols = textCols1
enablePaddingV = 1
settingsGlobalFields {
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-settings-global-fields.html
}
}
}
element.options.mediaqueries.mobile.nl-text = nl-text-mediaqueries-mobile
HTML:
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace nl=TYPO3\BhNewsletter\ViewHelpers}
<bh:tmpl.element object="{cObj}" >
<f:if condition="{cObj.allSettings.style.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.style.color}" width="{cObj.allSettings.width}" padding="{cObj.allSettings.paddingVTop} 0px {cObj.allSettings.paddingVBottom}" class="color-{cObj.allSettings.style.color} nl-text-section">
<nl:cols.row width="{cObj.allSettings.width}" class="nl-text-row">
<f:if condition="{cObj.allSettings.style.cols} == 'textCols2'">
<f:then>
<f:variable name="halfWidth" value="{cObj.allSettings.width / 2}" />
<nl:cols.col width="{halfWidth - 10}" padding="0px" class="textCol1">
<bh:property.text tag="div" property="text" />
</nl:cols.col>
<nl:cols.col width="20" padding="0px" class="textColSpace">
<div class="colSpace"> </div>
</nl:cols.col>
<nl:cols.col width="{halfWidth - 10}" padding="0px" class="textCol2">
<bh:property.text tag="div" property="subtext" />
</nl:cols.col>
</f:then>
<f:else>
<nl:cols.col width="{cObj.allSettings.width}" padding="0px">
<bh:property.text tag="div" property="text" />
</nl:cols.col>
</f:else>
</f:if>
</nl:cols.row>
</nl:section>
</bh:tmpl.element>
nl-picture
Typoscript:
Typoscript
plugin.tx_bh.settings.contentElements {
nl-picture < abstract.bhElement
nl-picture {
name = Bild
hidden = 0
bheListgroup = 10
bheSorting = 20
description = Bild-Element
iconFile = typo3/sysext/bh/Resources/Public/Icons/Elemente/picture.svg
settingsForm = EXT:bh_newsletter/Resources/Public/Elements/nl-picture/nl-picture-settings.html
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-picture/
templateFile = nl-picture.html
allowedData.file = image
link = 1
options.oncreate = advanced
styleOptions >
styleOptions.color < element.options.nlbgcolor
styleOptions.width < element.options.width
styleOptions.paddingV < element.options.paddingV
styleOptions.width {
width-200 = mini (200px)
width-100 = logo (100px)
}
width = 600
max-width = 600
maxWidth = 600
height = 350
imgheight = 350
imgwidth = 600
padding = 0
paddingVTop = 30px
paddingVBottom = 30px
bestate < element.options.backendstate
enablePaddingV = 1
settingsGlobalFields {
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-settings-global-fields.html
}
}
}
element.options.mediaqueries.mobile.nl-picture = nl-picture-mediaqueries-mobile
HTML:
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace nl=TYPO3\BhNewsletter\ViewHelpers}
<bh:tmpl.element object="{cObj}" >
<f:if condition="{cObj.allSettings.style.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.style.color}" width="{cObj.allSettings.width}" padding="{cObj.allSettings.paddingVTop} 0px {cObj.allSettings.paddingVBottom}" class="nl-picture-section">
<nl:cols.row width="{cObj.allSettings.width}" class="nl-picture-row">
<nl:cols.col width="{cObj.allSettings.width}" padding="0px" class="nl-picture-col">
<f:if condition="{cObj.allSettings.bestate} == '1'">
<style>
.nl-picture-image-backend.image{cObj.uid} .bhBackgroundImage {
height: {cObj.settings.imgheight}px;
background-size: cover;
background-position: center center;
}
</style>
<div class="nl-picture-image-backend image{cObj.uid}" style="display: none;">
<bh:property.backgroundImage picture="{cObj.picture}" property="picture"></bh:property.backgroundImage>
</div>
</f:if>
<f:if condition="{cObj.picture.file}">
<!--[if mso | IE]>
<bh:link link="{cObj.link}" class="nl-picture-link" style="width:{cObj.allSettings.imgwidth}px;height:auto;display:block;margin:0;padding:0;"><img src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.imgwidth}', height:'{cObj.allSettings.imgheight}c')}" width="100%" class="width-{cObj.allSettings.width}" alt="{cObj.picture.seo}"></bh:link>
<![endif]-->
<!--[if !mso]><!-->
<bh:link link="{cObj.link}" class="nl-picture-link" style="width:100%;height:auto;display:block;margin:0;padding:0;"><img src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.imgwidth * 2}', height:'{cObj.allSettings.imgheight * 2}c')}" width="100%" class="width-{cObj.allSettings.width}" alt="{cObj.picture.seo}"></bh:link>
<!--<![endif]-->
</f:if>
</nl:cols.col>
</nl:cols.row>
</nl:section>
</bh:tmpl.element>
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 = typo3/sysext/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 INCLUDE
element.options.mediaqueries.desktop.nl-columns = nl-columns-mediaqueries-desktop
element.options.mediaqueries.mobile.nl-columns = nl-columns-mediaqueries-mobile
# INCLUDE CSS
page {
includeCSS {
nl-columns-newsletter = EXT:bh_newsletter/Resources/Public/Elements/nl-columns/nl-columns.css
}
}
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>
nl-trenner
Typoscript:
Typoscript
plugin.tx_bh.settings.contentElements {
nl-trenner < abstract.bhElement
nl-trenner {
name = Trenner
hidden = 0
bheListgroup = 10
bheSorting = 70
options.oncreate = advanced
iconFile = typo3/sysext/bh/Resources/Public/Icons/Elemente/spacer.svg
settingsForm = EXT:bh_newsletter/Resources/Public/Elements/nl-trenner/nl-trenner-settings.html
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-trenner/
templateFile = nl-trenner.html
styleOptions >
styleOptions.color < element.options.nlbgcolor
styleOptions.paddingV < element.options.paddingV
styleOptions.line{
hor-line = horizontale Linie
ver-line = vertikale Linie
no-line = keine Linie
img = mit Bild
}
styleOptions.linecolor {
FFFFFF = weiß
262626 = schwarz
}
border-width-vertical = 2px
border-width-horizontal = 1px
trenner-img-src =
trenner-img-width = 0
paddingVTop = 0px
paddingVBottom = 0px
height = 40
width = 600
enablePaddingV = 1
settingsGlobalFields {
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-settings-global-fields.html
}
}
}
element.options.mediaqueries.mobile.nl-trenner = nl-trenner-mediaqueries-mobile
HTML:
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
{namespace nl=TYPO3\BhNewsletter\ViewHelpers}
<bh:tmpl.element object="{cObj}" >
<f:variable name="height" value="{cObj.settings.height}" />
<f:if condition="{cObj.allSettings.style.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.style.color}" width="{cObj.allSettings.width}" padding="{cObj.allSettings.paddingVTop} 0px {cObj.allSettings.paddingVBottom}" class="nl-trenner-section">
<nl:cols.row class="nl-trenner-row">
<nl:cols.col width="600" padding="0px" class="nl-trenner-col">
<table style="width: 100%;border-spacing:0px;" width="100%" border="0" cellpadding="0" cellspacing="0">
<f:if condition="{cObj.allSettings.style.line} == 'no-line'">
<f:then>
<tr>
<td height="{height}" style="max-height:{height}px;height:{height}px;line-height:{height}px;"> </td>
</tr>
</f:then>
<f:else if="{cObj.allSettings.style.line} == 'ver-line'">
<tr>
<td class="nl-trenner-border-vertical" height="{height}" style="width:50%;max-height:{height}px;height:{height}px;line-height:{height}px;border-right:{cObj.allSettings.border-width-vertical} solid #{cObj.allSettings.style.linecolor};"> </td>
<td height="{height}" style="width:50%;max-height:{height}px;height:{height}px;line-height:{height}px;"> </td>
</tr>
</f:else>
<f:else if="{cObj.allSettings.style.line} == 'img'">
<tr>
<td class="nl-trenner-img-wrapper"height="{height}" align="center" valign="middle" style="vertical-align:center;max-height:{height}px;height:{height}px;line-height:{height}px;border:none;">
<f:if condition="{cObj.allSettings.trenner-img-src} != ''">
<img class="nl-trenner-img" src="{cObj.allSettings.trenner-img-src}" height="auto" width="{cObj.allSettings.trenner-img-width}" style="width:{cObj.allSettings.trenner-img-width}px" />
</f:if>
</td>
</tr>
</f:else>
<f:else>
<tr>
<td class="nl-trenner-border-horizontal" height="{height / 2}" style="max-height:{height / 2}px;height:{height / 2}px;line-height:{height / 2}px;border-bottom:{cObj.allSettings.border-width-horizontal} solid #{cObj.allSettings.style.linecolor};"> </td>
</tr>
<tr>
<td height="{height / 2}" style="max-height:{height / 2}px;height:{height / 2}px;line-height:{height / 2}px;"> </td>
</tr>
</f:else>
</f:if>
</table>
</nl:cols.col>
</nl:cols.row>
</nl:section>
</bh:tmpl.element>
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 = typo3/sysext/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
}
}
}
page.includeCSS.nl-button = EXT:bh_newsletter/Resources/Public/Elements/nl-button/nl-button.css
element.options.mediaqueries.mobile.nl-button = nl-button-mediaqueries-mobile
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>
CSS:
CSS
/*-------------------*/
/*---- NL-BUTTON ----*/
/*-------------------*/
.nl-button .buttonBG {
padding:16px 20px;
}
/* BG */
.nl-button.btn-type-bg.btn-color-white .buttonBG {
background-color: #FFFFFF;
}
.nl-button.btn-type-bg.btn-color-black .buttonBG {
background-color: #262626;
}
/* BORDER */
.nl-button.btn-type-border.btn-color-white .buttonBG {
border: 1px solid #FFFFFF;
}
.nl-button.btn-type-border.btn-color-black .buttonBG {
border: 1px solid #262626;
}
/* TEXT */
.nl-button .buttonLink,
.nl-button .buttonLink span {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 115%;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #FFFFFF;
}
.nl-button .buttonLink {
display: block;
}
.nl-button.btn-type-bg.btn-color-white .buttonLink,
.nl-button.btn-type-bg.btn-color-white .buttonLink span {
color: #262626;
}
.nl-button.btn-type-bg.btn-color-black .buttonLink,
.nl-button.btn-type-bg.btn-color-black .buttonLink span {
color: #FFFFFF;
}
.nl-button.btn-type-border.btn-color-white .buttonLink,
.nl-button.btn-type-border.btn-color-white .buttonLink span {
color: #FFFFFF;
}
.nl-button.btn-type-border.btn-color-black .buttonLink,
.nl-button.btn-type-border.btn-color-black .buttonLink span {
color: #262626;
}
nl-box
Typoscript:
Typoscript
plugin.tx_bh.settings.contentElements {
nl-box < abstract.bhElement
nl-box {
name = Box
hidden = 0
bheListgroup = 10
bheSorting = 50
description = Box-Element
iconFile = typo3/sysext/bh/Resources/Public/Icons/Elemente/box.svg
settingsForm = EXT:bh_newsletter/Resources/Public/Elements/nl-box/nl-box-settings.html
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-box/
templateFile = nl-box.html
link = 1
doNotRenderLink = 1
height = 200
heightImg = 200
width = 600
paddingVTop = 30px
paddingVBottom = 30px
options.oncreate = advanced
dummyData{
text = Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum mattis sit volutpat purus.
subtext = mehr dazu ...
name = Headline
}
styleOptions >
styleOptions.color < element.options.nlbgcolor
styleOptions.paddingV < element.options.paddingV
styleOptions.boxColor{
transparent = ohne Farbe
FFFFFF = weiß
}
styleOptions{
boxStyle{
boxBigLeft = große Box (Bild links)
boxBigRight = große Box (Bild rechts)
boxSmall = kleine Box (nur im Spalter verwenden)
}
}
bestate < element.options.backendstate
responsiveImages < element.options.responsiveImages
smallBoxImgHeight = 200
enablePaddingV = 1
settingsGlobalFields {
templatePath = EXT:bh_newsletter/Resources/Public/Elements/nl-settings-global-fields.html
}
}
}
## Mediaqueries
element.options.mediaqueries.mobile.nl-box = nl-box-mediaqueries-mobile
## CSS
page.includeCSS.nl-box = EXT:bh_newsletter/Resources/Public/Elements/nl-box/nl-box.css
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.boxColor} == 'transparent'">
<f:then>
<f:variable name="color-content" value="" />
</f:then>
<f:else>
<f:variable name="color-content" value="#" />
</f:else>
</f:if>
<f:if condition="{cObj.allSettings.setResponsiveImages} == 1">
<f:then>
<f:variable name="responsiveImages">{cObj.allSettings.responsiveImagesSettings}</f:variable>
<f:if condition="{cObj.allSettings.responsiveImagesSettings} == 1">
<f:variable name="responsiveImagesClass" value="boxWithResponsiveImages" />
</f:if>
</f:then>
<f:else>
<f:variable name="responsiveImages">{cObj.allSettings.responsiveImages}</f:variable>
<f:if condition="{cObj.allSettings.responsiveImages} == 1">
<f:variable name="responsiveImagesClass" value="boxWithResponsiveImages" />
</f:if>
</f:else>
</f:if>
<f:switch expression="{cObj.allSettings.style.boxStyle}">
<f:case value="boxBigLeft">
<nl:section full-width="true" background-color="{color}{cObj.allSettings.color}" width="{cObj.allSettings.width}" padding="{cObj.allSettings.paddingVTop} 0px {cObj.allSettings.paddingVBottom}" class="bigBox boxcolor-{cObj.allSettings.style.boxColor} {responsiveImagesClass}">
<nl:cols.row width="{cObj.allSettings.width}" class="nl-box-row bigBox-row">
<nl:cols.col width="{cObj.allSettings.width / 2}" background-color="{color-content}{cObj.allSettings.style.boxColor}" padding="0px" class="boxColPicture">
<f:if condition="{cObj.allSettings.bestate} == '1'">
<style>
.nl-picture-image-backend.image{cObj.uid} .bhBackgroundImage {
height: {cObj.settings.heightImg}px;
background-size: cover;
background-position: center center;
}
</style>
<div class="nl-picture-image-backend image{cObj.uid}" style="display: none;">
<bh:property.backgroundImage picture="{cObj.picture}" property="picture"></bh:property.backgroundImage>
</div>
</f:if>
<f:if condition="{cObj.allSettings.bestate} == '1' && {responsiveImages} == 1">
<div class="nl-box-img-responsive-switch js-img-responsive-switch">
<div class="nl-box-img-responsive-switch-icon-wrapper">
<div class="nl-box-img-responsive-switch-icon nl-box-img-responsive-switch-icon-desktop">
<div class="nl-box-img-responsive-switch-icon-icon bh-font-monitor"></div>
</div>
<div class="nl-box-img-responsive-switch-icon nl-box-img-responsive-switch-icon-mobile">
<div class="nl-box-img-responsive-switch-icon-icon bh-font-smartphone"></div>
</div>
</div>
</div>
</f:if>
<f:if condition="{cObj.picture.file}">
<f:if condition="{responsiveImages} == 1">
<f:then>
<!--[if mso | IE]>
<img class="img-for-desktop" src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.width / 2}', height:'{cObj.settings.heightImg}c')}" width="100%" alt="{cObj.picture.seo}">
<![endif]-->
<!--[if !mso]><!-->
<img class="img-for-desktop" src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.width}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}">
<img class="img-for-mobile" src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.width * 2}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}">
<!--<![endif]-->
</f:then>
<f:else>
<!--[if mso | IE]>
<img class="img-for-desktop" src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.width / 2}', height:'{cObj.settings.heightImg}c')}" width="100%" alt="{cObj.picture.seo}">
<![endif]-->
<!--[if !mso]><!-->
<img class="img-for-both" src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.width}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}">
<!--<![endif]-->
</f:else>
</f:if>
</f:if>
</nl:cols.col>
<nl:cols.col width="{cObj.allSettings.width / 2}" background-color="{color-content}{cObj.allSettings.style.boxColor}" padding="0px" class="boxColText">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="boxContentWrapper" height="{cObj.settings.heightImg}">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="boxHeadline">
<bh:property.text tag="div" rte="false" property="name" />
</td>
</tr>
</tbody>
</table>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="boxText">
<bh:property.text tag="div" property="text" />
</td>
</tr>
</tbody>
</table>
<f:if condition="{cObj.link}">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="boxButtonWrapper">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr class="mobilePaddingLR">
<td width="100%" valign="middle" align="center" class="buttonBG"><bh:link link="{cObj.link}" class="buttonLink"><bh:property.text tag="span" rte="false" property="subtext" /></bh:link></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</f:if>
</td>
</tr>
</tbody>
</table>
</nl:cols.col>
</nl:cols.row>
</nl:section>
</f:case>
<f:case value="boxBigRight">
<nl:section full-width="true" background-color="{color}{cObj.allSettings.color}" width="{cObj.allSettings.width}" padding="{cObj.allSettings.paddingVTop} 0px {cObj.allSettings.paddingVBottom}" class="bigBox boxcolor-{cObj.allSettings.style.boxColor} {responsiveImagesClass}">
<nl:cols.row width="{cObj.allSettings.width}" class="nl-box-row bigBox-row">
<nl:cols.col width="{cObj.allSettings.width / 2}" background-color="{color-content}{cObj.allSettings.style.boxColor}" padding="0px" class="boxColText">
<f:if condition="{cObj.picture.file} && {responsiveImages} == 1 && {cObj.allSettings.bestate} != '1'">
<!--[if !mso]><!-->
<img class="img-for-mobile" src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.width * 2}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}">
<!--<![endif]-->
</f:if>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="boxContentWrapper" height="{cObj.settings.heightImg}">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="boxHeadline">
<bh:property.text tag="div" rte="false" property="name" />
</td>
</tr>
</tbody>
</table>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="boxText">
<bh:property.text tag="div" property="text" />
</td>
</tr>
</tbody>
</table>
<f:if condition="{cObj.link}">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="boxButtonWrapper">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr class="mobilePaddingLR">
<td width="100%" valign="middle" align="center" class="buttonBG"><bh:link link="{cObj.link}" class="buttonLink"><bh:property.text tag="span" rte="false" property="subtext" /></bh:link></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</f:if>
</td>
</tr>
</tbody>
</table>
</nl:cols.col>
<nl:cols.col width="{cObj.allSettings.width / 2}" background-color="{color-content}{cObj.allSettings.color}" padding="0px" class="boxColPicture">
<f:if condition="{cObj.allSettings.bestate} == '1'">
<style>
.nl-picture-image-backend.image{cObj.uid} .bhBackgroundImage {
height: {cObj.settings.heightImg}px;
background-size: cover;
background-position: center center;
}
</style>
<div class="nl-picture-image-backend image{cObj.uid}" style="display: none;">
<bh:property.backgroundImage picture="{cObj.picture}" property="picture"></bh:property.backgroundImage>
</div>
</f:if>
<f:if condition="{cObj.allSettings.bestate} == '1' && {responsiveImages} == 1">
<div class="nl-box-img-responsive-switch">
<div class="nl-box-img-responsive-switch-icon-wrapper">
<div class="nl-box-img-responsive-switch-icon nl-box-img-responsive-switch-icon-desktop">
<div class="nl-box-img-responsive-switch-icon-icon bh-font-monitor"></div>
</div>
<div class="nl-box-img-responsive-switch-icon nl-box-img-responsive-switch-icon-mobile">
<div class="nl-box-img-responsive-switch-icon-icon bh-font-smartphone"></div>
</div>
</div>
</div>
</f:if>
<f:if condition="{cObj.picture.file}">
<f:if condition="{responsiveImages} == 1">
<f:then>
<!--[if mso | IE]>
<img class="img-for-desktop" src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.width / 2}', height:'{cObj.settings.heightImg}c')}" width="100%" alt="{cObj.picture.seo}">
<![endif]-->
<!--[if !mso]><!-->
<img class="img-for-desktop" src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.width}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}">
<f:if condition="{cObj.allSettings.bestate} == '1'">
<img class="img-for-mobile" src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.width * 2}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}">
</f:if>
<!--<![endif]-->
</f:then>
<f:else>
<!--[if mso | IE]>
<img class="img-for-desktop" src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.width / 2}', height:'{cObj.settings.heightImg}c')}" width="100%" alt="{cObj.picture.seo}">
<![endif]-->
<!--[if !mso]><!-->
<img class="img-for-both" src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.width}', height:'{cObj.settings.heightImg * 2}c')}" width="100%" alt="{cObj.picture.seo}">
<!--<![endif]-->
</f:else>
</f:if>
</f:if>
</nl:cols.col>
</nl:cols.row>
</nl:section>
</f:case>
<f:case value="boxSmall">
<nl:section width="{cObj.allSettings.width}" padding="{cObj.allSettings.paddingVTop} 0px {cObj.allSettings.paddingVBottom}" class="smallBox boxcolor-{cObj.allSettings.style.boxColor}">
<f:if condition="{cObj.allSettings.bestate} == '1'">
<style>
.nl-picture-image-backend.image{cObj.uid} .bhBackgroundImage {
height: {cObj.allSettings.smallBoxImgHeight}px;
background-size: cover;
background-position: center center;
min-height: 100px;
}
</style>
<div class="nl-picture-image-backend image{cObj.uid}" style="display: none;">
<bh:property.backgroundImage picture="{cObj.picture}" property="picture"></bh:property.backgroundImage>
</div>
</f:if>
<f:if condition="{cObj.picture.file}">
<!--[if mso | IE]>
<img class="img-for-desktop" src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.imgwidth}', height:'{cObj.allSettings.smallBoxImgHeight}c')}" width="100%" alt="{cObj.picture.seo}">
<![endif]-->
<!--[if !mso]><!-->
<img src="{f:uri.image(src:'{cObj.picture.relativeFile}', treatIdAsReference:1, width:'{cObj.allSettings.imgwidth * 2}', height:'{cObj.allSettings.smallBoxImgHeight * 2}c')}" width="100%" alt="{cObj.picture.seo}">
<!--<![endif]-->
</f:if>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="boxContentWrapper" height="{cObj.settings.heightImg}" style="background-color:{color-content}{cObj.allSettings.style.boxColor};">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="boxHeadline smallBoxHeadline">
<bh:property.text tag="div" rte="false" property="name" />
</td>
</tr>
</tbody>
</table>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="boxText">
<bh:property.text tag="div" property="text" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="top">
<td class="boxButtonContainer" height="auto" style="background-color:{color-content}{cObj.allSettings.style.boxColor};">
<f:if condition="{cObj.link}">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="boxButtonWrapper">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr class="mobilePaddingLR">
<td width="100%" valign="middle" align="center" class="buttonBG"><bh:link link="{cObj.link}" class="buttonLink"><bh:property.text tag="span" rte="false" property="subtext" /></bh:link></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</f:if>
</td>
</tr>
</tbody>
</table>
</nl:section>
</f:case>
</f:switch>
</bh:tmpl.element>
CSS:
CSS
/*----------------*/
/*---- NL-BOX ----*/
/*----------------*/
.nl-box .boxContentWrapper {
box-sizing: content-box;
}
.nl-box .bigBox .boxHeadline {
padding: 10px 20px 20px 20px;
}
.nl-box .bigBox .boxText {
padding: 0px 20px 20px 20px;
}
.nl-box .bigBox .boxButtonWrapper {
padding: 2px 20px;
}
.nl-box .smallBox .boxHeadline {
padding: 20px;
}
.nl-box .smallBox .boxText {
padding: 0px 20px 20px 20px;
}
.nl-box .smallBox .boxButtonWrapper {
padding: 0px 20px 20px;
}
.nl-box .buttonBG {
padding: 16px 20px;
}
.nl-box .buttonLink,
.nl-box .buttonLink span {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
text-align: center;
padding: 0;
margin: 0;
line-height: 1;
}
.nl-box .boxHeadline {
font-family: Georgia, serif !important;
font-size: 20px;
line-height: 115%;
font-weight: 400;
text-transform: uppercase;
margin-bottom: 20px;
}
.nl-box .boxText,
.nl-box .boxText p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 140%;
}
.nl-box .boxText,
.nl-box .boxText p {
color: #505050;
}
/*--------*/
/* FARBEN */
/*--------*/
/* BOX-HEADLINE */
.nl-box .boxcolor-transparent .boxHeadline,
.nl-box .boxcolor-FFFFFF .boxHeadline {
color: #505050;
}
/* BOX-TEXT */
.nl-box .boxcolor-transparent .boxText,
.nl-box .boxcolor-transparent .boxText p,
.nl-box .boxcolor-FFFFFF .boxText,
.nl-box .boxcolor-FFFFFF .boxText p {
color: #505050;
}
/* BOX-BUTTON */
.nl-box .boxcolor-transparent .buttonBG,
.nl-box .boxcolor-FFFFFF .buttonBG {
background-color: #262626;
}
.nl-box .boxcolor-FFFFFF .buttonLink,
.nl-box .boxcolor-FFFFFF .buttonLink span,
.nl-box .boxcolor-transparent .buttonLink,
.nl-box .boxcolor-transparent .buttonLink span {
color: white;
}
/* BACKEND RESPONSIVE IMAGES */
.bh-bemode .nl-box .boxWithResponsiveImages .boxColPicture {
position: relative;
}
.bh-bemode.bhe-state-editing .nl-box .boxWithResponsiveImages .nl-box-img-responsive-switch {
position: absolute;
left: 5px;
top: 5px;
width: 80px;
height: 30px;
color: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bh-bemode:not(.bhe-state-editing) .nl-box .boxWithResponsiveImages .nl-box-img-responsive-switch {
display: none;
}
.nl-box-img-responsive-switch-icon-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
height: 100%;
}
.nl-box-img-responsive-switch-icon {
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #9f9f9f;
color: white;
cursor: pointer;
}
.nl-box-img-responsive-switch-icon-desktop {
border-radius: 15px 0px 0px 15px;
background-color: #c8f876;
color: #3e4743;
}
.nl-box.showMobilePicture .nl-box-img-responsive-switch-icon-desktop {
background-color: #9f9f9f;
color: white;
}
.nl-box-img-responsive-switch-icon-mobile {
border-radius: 0px 15px 15px 0px;
}
.nl-box.showMobilePicture .nl-box-img-responsive-switch-icon-mobile {
background-color: #c8f876;
color: #3e4743;
}
.nl-box-img-responsive-switch-icon-icon {
font-family: 'bakehouse-iconset' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 20px;
}
.bh-bemode .nl-box.showMobilePicture .boxWithResponsiveImages .nl-box-img-responsive-switch .nl-box-img-responsive-switch-icon.nl-box-img-responsive-switch-icon-mobile,
.bh-bemode .nl-box:not(.showMobilePicture) .boxWithResponsiveImages .nl-box-img-responsive-switch-icon-desktop {
}
.bh-bemode .nl-box.showMobilePicture .boxWithResponsiveImages img.img-for-desktop {
display: none !important;
}
.bh-bemode .nl-box.showMobilePicture .boxWithResponsiveImages img.img-for-mobile {
display: block !important;
width: 100%;
height: auto;
}