analysebenutzerverwaltungdateieigenschaftenereignissepanelprojekteinstellungenprojektkonfigurationreportstandard-dateieinstellungenstatistikstruktureditorsystemeinstellungenverzeichniseinstellungenwerkzeug
INFO: Version en.xAdditional module up to Core Prof. 3 projects

Newsletter layout - customize display

Weblication® CMS newsletters are created using the same techniques that are used for websites. There is a separate HTML page template and embedded CSS definitions for the newsletter presentation.

The presentation of the Weblication® CMS newsletter can therefore be customized using templates, elements and CSS.

The newsletter HTML page template

BASE and the Weblic® newsletter form deliver the files required for the newsletter module with a predefined page template and embedded CSS as standard. An excerpt from this page template can be found below in relation to the BASE (Mobile First) and BASE Classic project basis. Please always refer to the currently available project base for the current source.

BASE (Mobile First)
BASE Classic
BASE (Mobile First)

Auszug aus dem Newsletter Seiten-Template /[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/newsletter/standard.wDocument.php

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xslIfIsInEditor="http://www.w3.org/1999/XSL/TransformIfIsInEditor" xmlns:wslPre="http://weblication.de/5.0/wsl" xmlns:wslPost="http://weblication.de/5.0/wsl" xmlns:wslEditorPre="http://weblication.de/5.0/wsl" xmlns:wsl="http://weblication.de/5.0/wsl" xmlns:wd="http://weblication.de/5.0/wd" xmlns:php="http://php.net/xsl" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" exclude-result-prefixes="xslIfIsInEditor wd wslPre wsl php" version="1.0">

<!-- Source: base.standard, 002.002.132.000 (2015-11-18 16:14:05)-->
  <xsl:output method="xml" indent="yes" omit-xml-declaration="no" encoding="UTF-8"/>

  <!-- System-Parameter einbinden -->
  <xsl:include href="$XSLTPRE[wDocumentRoot]/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/misc/standard.wParams.php" wd:pathTemplate="misc/includes.global.php"/>

  <!-- Global-Templates dynamisch einbinden -->
  <wslPre:includeXsltGlobals project="/[IHR-GLOBALES-PROJEKT]"/>

  <!-- Objekte-Templates dynamisch einbinden - Eine Seite ist von einem bestimmten Objekttyp -->
  <wslPre:includeXsltObject project="/[IHR-GLOBALES-PROJEKT]" _object="onlinedocu"/>

  <!-- Elemente-Templates dynamisch einbinden - Eine Seite beinhaltet beliebig viele, vom Redakteur eingefügte, Elemente -->
  <wslPre:includeXsltItems path="/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/items/newsletter" useIndex="1"/>

  <!-- Meta-Maske einbinden - Falls die Seite im Editor aufgerufen wird -->
  <xslIfIsInEditor:include href="$XSLTPRE[wDocumentRoot]/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/editmasks/standard.metadata.php" wd:pathTemplate="editmasks/standard.metadata.php"/>

  <!-- Definition der Darstellung -->
  <xsl:template match="/wd:document" wChecksum="c4222750eca4307c0031582e7cf599a9">
  
    <!-- Breite des Inhaltsbereichs -->
    <xsl:variable name="blockMainWidth">920</xsl:variable>  
    
    <!-- Setzt den Ansichtsmodus auf Newsletter-->
    <wslPre:php>wEnv::setGlobalValue('wViewMode', 'newsletter');</wslPre:php>
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="de">
      <head>             
        <title>Newsletter</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="Generator" content="Weblication CMS"/>
        <meta name="Keywords" content="{wd:extension/wd:meta/wd:keywords/text()}"/>
        <meta name="Description" content="{wd:extension/wd:meta/wd:description/text()}"/>
        <meta name="Robots" content="{/wd:document/wd:extension/wd:meta/wd:robots/@value}"/>  
        
        <xsl:if test="$wIsLoggedIn">
          <link rel="stylesheet" href="/weblication/grid5/gui/styles/wgl.css"/>
        </xsl:if>
        
        <xsl:if test="$wIsInEditor">
          <link rel="stylesheet" href="/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/styles/editor.css"/>
        </xsl:if>   
                 
        <!-- Setzt die Breite des Inhaltsbereichs (blockMainWidth - seitliches Padding) -->
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'innerWidthCurrentElement', format-number(number($blockMainWidth) - 40, '####'))"/>                
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'colsSpace', number(12))"/>                

        <!-- Definiert die auswählbaren Levels für Überschriften -->
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableHeadlineLevelValues', 'h1|h2|h3')"/>     
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableHeadlineLevelTexts', 'Überschrift 1|Überschrift 2|Überschrift 3')"/>                   
        
        <!-- Definiert die auswählbaren Linktypen -->
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableLinkClassValues', '|button|ghostbutton')"/>     
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableLinkClassTexts', 'Textlink|Schaltfläche|Transparente Schaltfläche')"/>                   

        <!-- Definiert die auswählbaren Inhaltsboxen-->
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableBoxVariantValues', '0|10')"/>     
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableBoxVariantTexts', 'Neutral|Farbig hinterlegt')"/>                   
        
        <!-- Definiert die auswählbaren Spalten z.B. '2' für nur zweispaltig, '2|3' für zwei- und dreispaltig, '2|3|4' für zwei-, drei- und vierspaltig -->        
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableColumnValues', '2')"/>

        <style>
          body                   {background-color:#f0f0f0;margin:0;}
          body, tr, td           {font-size:13px;font-family:Verdana, Arial, sans-serif;font-weight:normal;color:#666666;line-height:19px;}
          td                     {vertical-align:top}
          
          /* ... */

                   
                             
        </style>               
        <wsl:includeJsRessources/>
        <xsl:comment>[if gte mso 9]<![CDATA[><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><!]]>[endif]</xsl:comment>        
      </head> 
      <body>


        <!--
          ... Hier wird der HTML-Body des Newsletters definiert (siehe Standard-Auslieferung) ...
        -->


      </body>
    </html>
  </xsl:template>
  
  <!-- Hier werden die Inhaltselemente eingebunden -->
  <xsl:template match="wd:group[@id='content1']" wChecksum="e55897c556b81d11920f89a99545b88d">
    <!-- web:group:start name="newsletter" caption="" display="user" itemsExclude="" itemsInclude=""-->
    <xsl:apply-templates select="wd:item[php:functionString('wOutput::isViewableItem', ., $wViewMode)]"/>
    <!-- web:group:stop -->
  </xsl:template>   
  
</xsl:stylesheet>

You can make individual adjustments directly in this newsletter HTML page template.

For the newsletter HTML e-mail, the template uses an HTML table within the body by default. The logo is read into this in the first row of the table and the elements defined for the newsletter (text, image, etc.) below it.

BASE Classic

Auszug aus dem Newsletter Seiten-Template /[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/newsletter/standard.wDocument.php

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xslIfIsInEditor="http://www.w3.org/1999/XSL/TransformIfIsInEditor" xmlns:wslPre="http://weblication.de/5.0/wsl" xmlns:wslPost="http://weblication.de/5.0/wsl" xmlns:wslEditorPre="http://weblication.de/5.0/wsl" xmlns:wsl="http://weblication.de/5.0/wsl" xmlns:wd="http://weblication.de/5.0/wd" xmlns:php="http://php.net/xsl" exclude-result-prefixes="xslIfIsInEditor wd wslPre wsl php" version="1.0">
<!-- Source: base.standard, 002.003.137.000 (2019-12-02 09:49:39)-->
  <xsl:output method="xml" indent="yes" omit-xml-declaration="no" encoding="UTF-8"/>

  <!-- System-Parameter einbinden -->
  <xsl:include href="$XSLTPRE[wDocumentRoot]/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/misc/standard.wParams.php" wd:pathTemplate="misc/includes.global.php"/>

  <!-- Zentrale Funktionen, Templates und Skripte einbinden - -->
  <xsl:include href="$XSLTPRE[wDocumentRoot]/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/misc/includes.global.php" wd:pathTemplate="misc/includes.global.php"/>

  <!-- Objekte-Templates dynamisch einbinden - Eine Seite ist von einem bestimmten Objekttyp -->
  <wslPre:includeXsltObjectsProject project="/[IHR-GLOBALES-PROJEKT]" useIndex="0"/>

  <!-- Elemente-Templates dynamisch einbinden - Eine Seite beinhaltet beliebig viele, vom Redakteur eingefügte, Elemente -->
  <wslPre:includeXsltItemsProject project="/[IHR-GLOBALES-PROJEKT]" useIndex="0"/>

  <!-- Meta-Maske einbinden - Falls die Seite im Editor aufgerufen wird -->
  <xslIfIsInEditor:include href="$XSLTPRE[wDocumentRoot]/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/editmasks/standard.metadata.php" wd:pathTemplate="editmasks/standard.metadata.php"/>

  <!-- Definition der Darstellung -->
  <xsl:template match="/wd:document" wChecksum="8e95a013f1811f039735c5261133f7a4">
  
    <!-- Breite des Inhaltsbereichs -->
    <xsl:variable name="blockMainWidth">520</xsl:variable>  
    
    <!-- Setzt den Ansichtsmodus auf Newsletter-->
    <wslPre:php>wEnv::setGlobalValue('wViewMode', 'newsletter');</wslPre:php>
    
    <!-- Setzt die Breite des Inhaltsbereichs (blockMainWidth - seitliches Padding) -->
    <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'innerWidthCurrentElement', format-number(number($blockMainWidth) - 40, '####'))"/>    
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="de">
      <head>             
        <title>Newsletter</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="Generator" content="Weblication CMS"/>
        <meta name="Keywords" content="{wd:extension/wd:meta/wd:keywords/text()}"/>
        <meta name="Description" content="{wd:extension/wd:meta/wd:description/text()}"/>
        <meta name="Robots" content="{/wd:document/wd:extension/wd:meta/wd:robots/@value}"/>  
        
        <xsl:if test="$wIsLoggedIn">
          <link rel="stylesheet" href="/weblication/grid5/gui/styles/wgl.css"/>
        </xsl:if>
        
        <xsl:if test="$wIsInEditor">
          <link rel="stylesheet" href="/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/styles/editor.css"/>
        </xsl:if>

        <style>
          body                  {background-color:#f0f0f0;}
          /* ... Hier werden die CSS-Definitionen für den Newsletter angegeben ... */
                             
        </style>
        <xsl:if test="$wIsInEditor">
          <wsl:includeJsRessources/>
        </xsl:if>

        <xsl:comment>[if gte mso 9]<![CDATA[><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><!]]>[endif]</xsl:comment>
      </head> 
      <body>                   
        <!--
          ... Hier wird der HTML-Body des Newsletters definiert (siehe Standard-Auslieferung) ...
        -->
      </body>
    </html>
  </xsl:template>
  
  <!-- Hier werden die Inhaltselemente eingebunden -->
  <xsl:template match="wd:group[@id='content1']" wChecksum="e55897c556b81d11920f89a99545b88d">
    <!-- web:group:start name="newsletter" caption="" display="user" itemsExclude="" itemsInclude=""-->
    <xsl:apply-templates select="wd:item[php:functionString('wOutput::isViewableItem', ., $wViewMode)]"/>
    <!-- web:group:stop -->
  </xsl:template>   
  
</xsl:stylesheet>

You can make individual adjustments directly in this newsletter HTML page template.

For the newsletter HTML e-mail, the template uses an HTML table within the body by default. The logo is read into this in the first row of the table and the elements defined for the newsletter (text, image, etc.) below it.

Defining the selection of structural elements for newsletters

The structural elements available for newsletter processing are defined in the project basis.

BASE (Mobile First)
BASE Classic
BASE (Mobile First)

In Mobile First, the availability of the structure elements is determined by the storage of the master template elements in the subdirectory for the newsletter and the contentGroup specification in the respective master template elements.

As an example, an excerpt from the master template element of the Bild-Weblics®/element is shown below, in which the group for the newsletter ("newsletter") is set (path of the master template element: /[YOUR-GLOBAL PROJECT]/wGlobal/mastertemplates/items/picture.standard.wItemMastertemplate.php).

Auszug aus dem Mastertemplate-Element "Bild"

...
    
                    <wd:mastertemplate hasToAddElement="0">
                    <wd:contentGroup name="content1"/>
                    <wd:contentGroup name="content2"/>
                    <wd:contentGroup name="content3"/>
                    <wd:contentGroup name="content4"/>
                    <wd:contentGroup name="content5"/>
                    <wd:contentGroup name="content6"/>
                    <wd:contentGroup name="content7"/>
                    <wd:contentGroup name="container"/>
                    <wd:contentGroup name="formContainer"/>
                    <wd:contentGroup name="newsletter"/>
                  </wd:mastertemplate>
...

Expand the structural elements available for the newsletter carefully! The different mail programs sometimes define HTML emails very differently (see also the article in the further information "Tips for sending ..."). It is therefore always best to test a newsletter HTML e-mail in advance using a test recipient list and different e-mail clients before sending it correctly to the desired recipients!

BASE Classic

In BASE Classic, the availability of the structure elements is determined by the contentGroup specification in the respective master template elements.

As an example, an excerpt from the master template element of the Bild-Weblics®/element is given below, in which the group for thenewsletter is set (path of the master template element: /[YOUR-GLOBAL PROJECT]/wGlobal/mastertemplates/items/picture.standard.wItemMastertemplate.php).

Auszug aus dem Mastertemplate-Element "Bild"

...
    
                    <wd:mastertemplate>
                    <wd:contentGroup name="content1"/>
                    <wd:contentGroup name="content2"/>
                    <wd:contentGroup name="content3"/>
                    <wd:contentGroup name="content4"/>
                    <wd:contentGroup name="content5"/>
                    <wd:contentGroup name="content6"/>
                    <wd:contentGroup name="content7"/>
                    <wd:contentGroup name="container"/>
                    <wd:contentGroup name="formContainer"/>
                    <wd:contentGroup name="newsletter"/>
                  </wd:mastertemplate>
...

Expand the structural elements available for the newsletter carefully! The different mail programs sometimes define HTML emails very differently (see also the article in the further information "Tips for sending ..."). It is therefore always best to test a newsletter HTML e-mail in advance using a test recipient list and different e-mail clients before sending it correctly to the desired recipients!

Influencing the HTML structure of a newsletter e-mail

You can directly influence the HTML structure of the newsletter HTML e-mail to be sent. To do this, you adapt the HTML for the output within the newsletter HTML page template mentioned above. By default, we deliver this as an HTML table, as various mail programs currently work best with tables.

Influencing the CSS of a newsletter e-mail

You can directly influence the formatting of the newsletter HTML e-mail to be sent. To do this, adjust the CSS definitions for the output within the newsletter HTML page template mentioned above. By default, we deliver these predefined for the most important structural elements. You can adapt and extend these as you wish.

In the current implementation of the newsletter module, we set a maximum width of 520 pixels in the HTML page template for the newsletter HTML email. The max-width specification means that the newsletter is also implemented according to Responsive Web Design (RWD) aspects. Make sure that the structural elements (e.g. image, container, etc.) are also installed in the latest Weblic® version.

Dev article: Tips for sending HTML newsletters