User Tools

Site Tools

You are here: Test Dokuwiki For ServiceCenter » promio.connect Wiki » How to develop e-mail templates for promio.connect?
Trace: • Was ist der Unterschied zwischen Öffnungen und Öffnungen unique? • Wie verwende ich eine Temporäre Sperrliste? • Wie können mit dem Zeitplaner regelmäßig Newsletter versendet werden? • Wie verwende ich KI zum Erstellen eines Bildes in meinem Mailing?
en:otml

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
en:otml [2023/03/17 17:03] – fwen:otml [2025/10/30 16:24] (current) – [Preheader] fw
Line 46: Line 46:
  
  
 +
 +==== Editable Title ====
 +
 +If you want the user to be able to edit the title of the mail, add the attribute ''editable="true"'' to your ''<title>'' tag. This has mostly only an effect if the E-Mail is opened in its stand-alone browser version.
 +
 +=== Example ===
 +
 +<code html>
 +<!DOCTYPE html>
 +<html>
 +  <head>
 +    <title editable="true">E-Mail Title</title>
 +  </head>
 +  <body>
 +    <div>
 +      <a href="http://system.promio-mail.com/view/" target="_blank">
 +        Please click here if you can't read this E-Mail.
 +      </a>
 +    </div>
 +  ...
 +</code>
  
  
Line 173: Line 194:
 <pme:preheader>This is the preheader text.</pme:preheader> <pme:preheader>This is the preheader text.</pme:preheader>
 </code> </code>
- 
  
  
Line 503: Line 523:
 ^ Attribute   ^ Required ^ Type    ^ Description                      ^ ^ Attribute   ^ Required ^ Type    ^ Description                      ^
 | name        | Yes      | string  | Unique name of the data source.  | | name        | Yes      | string  | Unique name of the data source.  |
-| refreshmode | Yes      | string  | Possible values: build / refresh |+| refreshmode | Yes      | string  | Possible values: build / delivery |
  
  
Line 510: Line 530:
 ^ Value   ^ Description                                      ^ ^ Value   ^ Description                                      ^
 | build   | Refresh data source on build of the e-mail.    |           | build   | Refresh data source on build of the e-mail.    |          
-| refresh | Refresh data source before sending the campaign. |+| delivery | Refresh data source before sending the campaign. |
  
  
Line 766: Line 786:
 ==== Automatic transformation from CSS to inline CSS ==== ==== Automatic transformation from CSS to inline CSS ====
  
-CSS from ''<style />'' blocks can only be transformed to inline CSS for isolated selectors. +CSS from a <​style> ​block can automatically ​be transformed to Inline ​CSS.  
-Also, the CSS inlining only works on HTML elements with one selector. +For more details on the matter refer to the **cssinline** and **cssinlinetype** options in [[en:otml#config_tags]]
- +
- +
-=== Example === +
- +
-<code html> +
-<head> +
-<style> +
- /******************* +
- * Working examples *  +
- *******************/ +
-  +
- .foo { +
- font-size: 12px; +
- line-height: 1.4; +
- } +
-  +
- .bar { +
- background-color: #fff; +
- } +
-  +
- img { +
- border: 0; +
- } +
-  +
-  +
- /*********************** +
- * Non-working examples *  +
- ************************/ +
-  +
- .baz, .boz { +
- font-size: 15px; +
- } +
-  +
- table td { +
- background-color: #ff0 +
- } +
-</style> +
-</head> +
-<body> +
- /******************* +
- * Working examples *  +
- *******************/ +
- <table> +
- <tr> +
- <td class="bar"> +
- <span class="foo">Lorem ipsum dolor sit amet</span> +
- </td> +
- </tr> +
- <tr> +
- <img alt="" src="image.jpg" width="200" /> +
- </tr> +
- </table> +
-  +
-  +
- /*********************** +
- * Non-working examples *  +
- ************************/ +
- <table> +
- <tr> +
- <td class="foo bar"> +
- Lorem ipsum dolor sit amet +
- </td> +
- </tr> +
- </table> +
-</body> +
-</code>  +
  
 ==== User editable CSS ==== ==== User editable CSS ====
Line 840: Line 793:
 To give users the freedom to edit the CSS, there are some prerequisites: To give users the freedom to edit the CSS, there are some prerequisites:
  
-* The style tag must use the id ''pn-js-css-editor''. Only one style tag with this id is allowed. +  * The style tag must use the id ''pn-js-css-editor''. Only one style tag with this id is allowed. 
-* Each selector must use a comment block with the descriptors ''@nav'', ''@navItem'' and ''@info''. +  * Each selector must use a comment block with the descriptors ''@nav'', ''@navItem'' and ''@info''. 
- * ''@nav'' represents the category inside the CSS editor and groups the different ''@navItem'' elements. +    * ''@nav'' represents the category inside the CSS editor and groups the different ''@navItem'' elements. 
- * ''@navItem'' represents the element inside the category. **This name must be unique for all CSS selectors within the same ''@nav'' category. +    * ''@navItem'' represents the element inside the category. This name must be unique for all CSS selectors within the same ''@nav'' category. 
- * ''@info'' serves as decription for the ''@navItem''element.+    * ''@info'' serves as decription for the ''@navItem''element.
  
 <code html> <code html>
Line 942: Line 895:
 ^ Attribute     ^ Type                    ^ Default ^ Description                          ^ ^ Attribute     ^ Type                    ^ Default ^ Description                          ^
 | cssinline     | boolean                 | true    | Inline CSS from the \<style\> block. | | cssinline     | boolean                 | true    | Inline CSS from the \<style\> block. |
-| cssinlinetype | string                  | legacy  | Set the type of the CSS inliner.     |+| cssinlinetype | string                  | default  | Set the type of the CSS inliner.     |
 | storage       | string (frame / shadow) | frame   | Possible values: frame / shadow      | | storage       | string (frame / shadow) | frame   | Possible values: frame / shadow      |
 | ignoreerror   | boolean                 | false   | Ignore errors on save.               | | ignoreerror   | boolean                 | false   | Ignore errors on save.               |
 +
 +=== Example ===
 +
 +<code html>
 +<pm:config>
 +    <pm:config-value name="cssinline" value="true"/>
 +    <pm:config-value name="cssinlinetype" value="ng"/>
 +    <pm:config-value name="storage" value="frame"/>
 +    <pm:config-value name="ignoreerror" value="true"/>
 +</pm:config>
 +</code>
  
  
Line 950: Line 914:
  
 ^ Value  ^ Description                 ^ ^ Value  ^ Description                 ^
-| legacy | Use the legacy CSS inliner. | +| default | Use the legacy CSS inliner. | 
-| ng     | Use the new CSS inliner.    |+| ng     | Use the new, improved CSS inliner.    |
  
 +
 +The **default** CSS Inliner can only transform CSS for single, non-comma-separated selectors.
 +The **ng** ("next generation") CSS Inliner does not underlie those restrictions and can inline CSS blocks with comma-separated selectors. 
 +
 +== Examples for the default CSS Inliner ==
 +
 +<code html>
 +<head>
 +<style>
 + /*******************
 + * Working examples * 
 + *******************/
 +
 + .foo {
 + font-size: 12px;
 + line-height: 1.4;
 + }
 +
 + .bar {
 + background-color: #fff;
 + }
 +
 + img {
 + border: 0;
 + }
 +
 +
 + /***********************
 + * Non-working examples * 
 + ************************/
 +
 + .baz, .boz {
 + font-size: 15px;
 + }
 +
 + table td {
 + background-color: #ff0
 + }
 +</style>
 +</head>
 +<body>
 + /*******************
 + * Working examples * 
 + *******************/
 + <table>
 + <tr>
 + <td class="bar">
 + <span class="foo">Lorem ipsum dolor sit amet</span>
 + </td>
 + </tr>
 + <tr>
 + <img alt="" src="image.jpg" width="200" />
 + </tr>
 + </table>
 +
 +
 + /***********************
 + * Non-working examples * 
 + ************************/
 + <table>
 + <tr>
 + <td class="foo bar">
 + Lorem ipsum dolor sit amet
 + </td>
 + </tr>
 + </table>
 +</body>
 +</code> 
  
 === Values for storage === === Values for storage ===
Line 961: Line 993:
  
  
-=== Example === 
  
-<code html> 
-<pm:config> 
-    <pm:config-value name="cssinline" value="true"/> 
-    <pm:config-value name="cssinlinetype" value="ng"/> 
-    <pm:config-value name="storage" value="frame"/> 
-    <pm:config-value name="ignoreerror" value="true"/> 
-</pm:config> 
-</code> 
  
 {{tag> OTML Templates }} {{tag> OTML Templates }}
 +
en/otml.1679069027.txt.gz · Last modified: 2023/03/17 17:03 by fw

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki