newsletter:cols.row & newsletter:cols.col  

    Dieser ViewHelper ist vorgesehen, um einen Spalter in einem Responsive Newsletter auszugeben.

    Die beiden ViewHelper müssen immer innerhalb eines newsletter:section-ViewHelper sein und müssen miteinander verwendet werden.

    Die Summe der Breiten der einzelnen Cols muss immer gleich mit der Breite der Row sein!

    Die beiden ViewHelper müssen immer innerhalb eines newsletter:section-ViewHelper sein und müssen miteinander verwendet werden.

    Die Summe der Breiten der einzelnen Cols muss immer gleich mit der Breite der Row sein!

    Achtung

    Content-Bereiche in Newsletter-Elementen

    Wenn ein Element einen Content-Bereich hat, sollte dieser eine fixe Breite haben und in einer Settings-Variablen des cObj des Elements gespeichert werden. Außerdem muss die Section des Content-Bereichs den gleichen Namen tragen wie die Settings-Variable. Dadurch können der Row- und der Col-ViewHelper des Kind-Elements die Breite des Content-Bereichs auslesen und die Daten des ViewHelpers anpassen.

    Dies gilt auch für die ViewHelper newsletter:section & newsletter:property.backgroundImage

    Folgender Namespace muss im Templatefile gesetzt werden:
    {namespace newsletter=TYPO3\BhNewsletter\ViewHelpers}

    Attribute

    NameBeschreibungTypedefaultrequired
    widthBreite in Pixelinteger-true
    paddingPadding um den ViewHelper - hier kann mit der CSS-Syntax gearbeitet werden - z. B. '10px 20px' etc...string-false
    background-colorHintergrundfarbe - z. B. '#d1d1d1'hexcode-false
    classHier können Klassen mitgegeben werden, die auf den ersten table bzw. auf den ersten div gelegt werdenstring-false

    Beispiel

    html
    <newsletter:cols.row width="600" padding="0px" class="footerColWrapper"> <newsletter:cols.col width="250" padding="0px" class="footerCol1"> <bh:tmpl.content section="col1" parent="{cObj.uid}" /> </newsletter:cols.col> <newsletter:cols.col width="350" padding="0px" class="footerCol2"> <bh:tmpl.content section="col2" parent="{cObj.uid}" /> </newsletter:cols.col> </newsletter:cols.row>

    Ausgabe

    html
    <div style="Margin:0px auto;max-width:600px;" data-property="container"> <table class="mj-row-12345 footerColWrapper" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" style="width:600px; background-color:;"> <tbody> <tr> <td class="nlRowContainer nl-row-padding" style="direction:ltr;font-size:0px;padding:0px;text-align:center;vertical-align:top;"> <!--[if mso | IE]> <table role="presentation" border="0" width="600" cellpadding="0" cellspacing="0" style="table-layout: fixed;"> <tr> <td style="vertical-align:top;background-color:;" width="250"> <![endif]--> <div class="mj-column-23456 outlook-group-fix footerCol1" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;background-color:;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> <tr> <td class="nlColContainer nl-col-padding" align="left" style="font-size:0px;padding:0px;word-break:break-word;"> ### CONTENTBEREICH 1 ### </td> </tr> </table> </div> <style type="text/css"> @media only screen and (min-width:480px) { .mj-column-23456 { width: 250px !important; max-width: 250px; box-sizing: border-box; } } </style> <!--[if mso | IE]> </td> <td style="vertical-align:top;background-color:;" width="350"> <![endif]--> <div class="mj-column-34567 outlook-group-fix footerCol2" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;background-color:;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> <tr> <td class="nlColContainer nl-col-padding" align="left" style="font-size:0px;padding:0px;word-break:break-word;"> ### CONTENTBEREICH 2 ### </td> </tr> </table> </div> <style type="text/css"> @media only screen and (min-width:480px) { .mj-column-34567 { width: 350px !important; max-width: 350px; box-sizing: border-box; } } </style> <!--[if mso | IE]> </td> </tr> </table> <![endif]--> </td> </tr> </tbody> </table> <style type="text/css"> @media only screen and (max-width:480px) { table.mj-row-12345 { width: 100% !important; } } </style> </div>