Voir aussi : Le plugin newsletters_modeles propose des modèles de newsletter avec mise en page pleine largeur, en ligne ou en colonne.
Contrôler précisément l’ordre des articles joints
DD écrit : Pour l’ordre des articles, la seule solution que j’ai trouvée est d’utiliser Sélections éditoriales en adaptant un modèle de newsletter à mettre dans squelettes/newsletters/ :
<BOUCLE_rem(CONDITION){si #REM}>
<!-- titre=<multi>[fr]Simple (une colonne, responsive)[en]Simple (one column, responsive)</multi> -->
</BOUCLE_rem>
<BOUCLE_newsletter(NEWSLETTERS){id_newsletter}{statut?}{lang_select}>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>#TITRE</title>
<!-- Open Graph Protocol -->
[
<meta property="og:title" content="(#TITRE|attribut_html)" />]
<meta property="og:type" content="article" /> [
<meta property="og:image" content="(#LOGO_NEWSLETTER_NORMAL|sinon{#LOGO_SITE_SPIP}|extraire_attribut{src}|url_absolue)" />] [
<meta property="og:url" content="(#URL_NEWSLETTER|url_absolue)" />] [
<meta property="og:description" content="(#INTRODUCTION|supprimer_tags|entites_html)" />] [
<meta property="og:site_name" content="(#NOM_SITE_SPIP|attribut_html)" />]
<style type="text/css">
#outlook a {
padding: 0;
}
body {
width: 100% !important;
}
body {
margin: 0;
padding: 0;
}
img {
border: none;
font-size: 16px;
font-weight: bold;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
text-transform: capitalize;
-ms-interpolation-mode: bicubic;
}
img#headerImage {
font-size: 28px;
}
#backgroundTable {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
body,
.backgroundTable {
background-color: #fff;
}
#templateContainer {
border: 1px solid #DDDDDD;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
color: #E15718;
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial;
font-size: 22px;
font-weight: bold;
line-height: 100%;
margin-bottom: 10px;
text-align: left;
}
h1,
.h1 {
font-size: 24px;
}
h2,
.h2 {
font-size: 22px;
}
h3,
.h3 {
font-size: 16px;
}
h4,
.h4 {
font-size: 14px;
}
h5,
.h5 {
font-size: 18px;
}
h6,
.h6 {
font-size: 12px;
}
.chapo {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 2em 0;
}
#templatePreheader {
background-color: #fff;
}
.preheaderContent div {
color: #303030;
font-family: 'Helvetica Neue', Helvetica, Arial;
font-size: 12px;
line-height: 100%;
text-align: left;
}
.preheaderContent div a:link,
.preheaderContent div a:visited {
color: #58b2ca;
font-weight: normal;
text-decoration: underline;
}
.preheaderContent div img {
height: auto;
max-width: 600px;
}
#templateHeader {
background-color: #FFFFFF;
border-bottom: 0;
}
.headerContent {
color: #202020;
font-family: 'Helvetica Neue', Helvetica, Arial;
font-size: 16px;
font-weight: bold;
line-height: 120%;
padding: 0;
text-align: center;
vertical-align: middle;
}
.headerContent a:link,
.headerContent a:visited {
color: #58b2ca;
font-weight: normal;
text-decoration: underline;
}
#headerImage {
height: auto;
max-width: 600px !important;
}
#templateContainer,
.bodyContent {
background-color: #FDFDFD;
}
.bodyContent div {
color: #303030;
font-family: 'lato', Helvetica, Arial;
font-size: 16px;
line-height: 150%;
text-align: left;
}
.bodyContent a,
.bodyContent div a:link,
.bodyContent div a:visited,
.bodyContent div .descriptif a {
color: #58b2ca;
font-weight: normal;
text-decoration: underline;
}
.bodyContent div .spip_documents_center {
display: table;
clear: both;
margin: 1em auto;
}
.bodyContent div .spip_documents_left {
margin-right: 15px;
margin-bottom: 5px;
}
.bodyContent div .spip_documents_right {
margin-left: 15px;
margin-bottom: 5px;
}
.bodyContent img {
display: inline;
margin-bottom: 10px;
}
#templateFooter {
background-color: #FDFDFD;
border-top: 0;
}
.footerContent div {
color: #707070;
font-family: 'Helvetica Neue', Helvetica, Arial;
font-size: 14px;
line-height: 125%;
text-align: left;
}
.footerContent div a:link,
.footerContent div a:visited {
color: #336699;
font-weight: normal;
text-decoration: underline;
}
.footerContent img {
display: inline;
}
#social {
background-color: #eee;
border: 1px solid #F5F5F5;
}
#social div {
text-align: center;
}
#utility {
background-color: #FDFDFD;
border-top: 1px solid #F5F5F5;
}
#utility div {
text-align: center;
}
img.puce {
margin-bottom: 0
}
.spip_code,
.spip_cadre {
color: #606060;
font-family: Courier, "Courier New", monospace;
}
textarea.spip_cadre {
width: 100%;
}
.coloration_code ol {
list-style: none;
}
@media only screen and (max-width: 640px) {
html,
body {
width: 100% !important;
}
img {
max-width: 100% !important;
}
#templatePreheader {
width: 100% !important;
}
.preheaderContent,
.bodyContent,
.footerContent {
padding: 0 !important;
}
#templateContainer {
width: 100% !important;
border: 0 !important;
}
#templateHeader {
width: 100% !important;
border: 0 !important;
}
#templateBody {
width: 100% !important;
}
#templateFooter {
width: 100% !important;
}
#canspamBar {
width: auto !important;
}
.archive_link {
max-width: 50%
}
.padding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.text {
font-size: 16px !important;
color: #101010 !important;
}
blockquote.spip p {
border-left: 5px solid #eee;
padding-left: 10px;
}
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #fff;width: 100% !important;">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" style="margin: 0;padding: 0;background-color: #fff;height: 100% !important;width: 100% !important;">
<tr>
<td align="center" valign="top" style="border-collapse: collapse;">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="10" cellspacing="0" max-width="600" id="templatePreheader" style="background-color: #fff;">
<tr>
<td valign="top" class="preheaderContent" style="border-collapse: collapse;">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top" style="border-collapse: collapse;" class="archive_link">
<div style="color: #505050;font-family: Arial;font-size: 12px;line-height: 100%;text-align: left;">
<:newsletter:info_email_not_displaying:>
<a href="#URL_NEWSLETTER" target="_blank" style="color: #58b2ca;font-weight: normal;text-decoration: underline;">
<:newsletter:info_email_voir_en_ligne:>
</a>.
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" max-width="600" id="templateContainer" style="border: 1px solid #DDDDDD;background-color: #FFFFFF;">
<tr>
<td align="center" valign="top" style="border-collapse: collapse;">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" max-width="600" id="templateHeader" style="background-color: #FFFFFF;border-bottom: 0;">
<tr>
<td class="headerContent" style="border-collapse: collapse;color: #777;font-family: Arial;font-size: 14px;font-weight: bold;line-height: 120%;padding: 0;text-align: center;vertical-align: middle;">
<!-- // Begin Module: Standard Header Image \\ -->
[(#LOGO_NEWSLETTER|sinon{#LOGO_SITE_SPIP_SURVOL}
|image_passe_partout{600,250}
|image_recadre{600,250,center,transparent} |inserer_attribut{alt,
[(#LOGO_NEWSLETTER_NORMAL|non)#NOM_SITE_SPIP]
}
|inserer_attribut{style,'margin: 0;padding: 0;width: 100%;border: 0;height: auto;line-height: 100%;outline: none;font-size:18px;text-decoration: none;'}
|inserer_attribut{id,headerImage})]
<!-- // End Module: Standard Header Image \\ -->
</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top" style="border-collapse: collapse;">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" max-width="600" id="templateBody">
<table border="0" cellpadding="0" cellspacing="0" max-width="600" id="templateBody">
<tr>
<td valign="top" class="bodyContent" style="border-collapse: collapse;background-color: #FFFFFF;">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top" style="border-collapse: collapse;">
<div style="color: #505050;font-family: Arial;font-size: 14px;line-height: 150%;text-align: left;">
<h1 class="#EDIT{titre} h1" style="color: #202020;display: block;font-family: Arial;font-size: 28px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: center;">
#TITRE</h1>
<div class="h6" style="color:#777; text-align:center;">[(#DATE|AFFDATE)]</div>
</div>
</td>
</tr>
[
<tr>
<td valign="top" style="border-collapse: collapse;">
<div class="chapo" style="color: #505050;font-family: 'lato' Arial; font-size: 18px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding : 2em 0;">
(#CHAPO)</div>
</td>
</tr>]
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
<BOUCLE_actualites(SELECTIONS){identifiant=news}>
<BOUCLE_selectionarticles(SELECTIONS_CONTENUS){id_selection}{par rang}>
<tr>
<td valign="top" class="bodyContent" style="border-collapse: collapse;">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr style="background: [(#COMPTEUR_BOUCLE|alterner{white, #FAFAFA})];">
<td valign="top" style="border-collapse: collapse; padding-bottom:2em;">
<div style="color: #505050;font-family: 'lato', Arial;font-size: 16px;line-height: 150%;text-align: left;">
<div style="text-align: center;">
[<a href="#URL">(#LOGO_SELECTIONS_CONTENU
|inserer_attribut{alt,'#TITRE'}
|inserer_attribut{border,'0'}
|inserer_attribut{style,'margin: 0 auto;margin-bottom: 1em;padding: 0;max-width: 100%;border: 0;height: auto;max-height: 80%;line-height: 100%;outline: none;text-decoration: none;'}
|inserer_attribut{class,logo})</a>]
</div>
<h2 class="h2" style="display: block;">
<a href="#URL" style="color:#F86942; text-decoration:none; line-height: 120%;margin-top: 0;margin-right: 0;margin-bottom: 20px;margin-left: 0;text-align: left;font-size: 22px;">#TITRE</a></h2>
<div class="#EDIT{descriptif} descriptif">#DESCRIPTIF</div>
<!-- <span class="lire_en_ligne"><a href="#URL" style="color:#58b2ca">#TITRE</a></span>-->
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</BOUCLE_selectionarticles>
</BOUCLE_actualites>
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top" style="border-collapse: collapse;">
<div style="color: #505050;font-family: 'lato', Arial;font-size: 16px;line-height: 150%;text-align: left;">
[
<div class="#EDIT{texte}">(#TEXTE|image_reduire{560,0})</div>]
</div>
</td>
</tr>
</table>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top" style="border-collapse: collapse;">
<!-- // Begin Template Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" max-width="600" id="templateFooter" style="background-color: #FFFFFF;border-top: 0;">
<tr>
<td valign="top" class="footerContent" style="border-collapse: collapse;">
<!-- // Begin Module: Standard Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td colspan="2" valign="middle" id="social" style="border-collapse: collapse;background-color: #eee;border: 0;">
<div style="color: #707070;font-family: Arial;font-size: 12px;line-height: 140%;text-align: center;">
[(#REM) Liens sociaux ex :]
<a href="https://twitter.com/xx" style="color: #58b2ca;font-weight: normal;text-decoration: underline;">
Twitter</a> |
<a href="#URL_AUTEUR{1}" style="color: #58b2ca;font-weight: normal;text-decoration: underline;">
Contact</a>
</div>
</td>
</tr>
<tr>
<td valign="top" width="50%" style="border-collapse: collapse;">
<div style="color: #707070;font-family: Arial;font-size: 14px;line-height: 125%;text-align: left;">
<em><a href="#URL_SITE_SPIP">#NOM_SITE_SPIP</a> —[(#ENV{date}|affdate)]</em>
</div>
</td>
<td valign="top" width="50%" id="logo_site" style="border-collapse: collapse;">
<div style="color: #707070;font-family: Arial;font-size: 14px;line-height: 125%;text-align: right;">
[(#LOGO_NEWSLETTER_NORMAL|oui) [(#LOGO_SITE_SPIP|image_reduire{190,95} |inserer_attribut{alt,''} |inserer_attribut{border,'0'} |inserer_attribut{style,'margin: 0;padding: 0;max-width: 100%;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;'} )] ]
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" id="utility" style="border-collapse: collapse;background-color: #FFFFFF;border: 0;">
<div class="unsubscribe_link" style="color: #707070;font-family: Arial;font-size: 14px;line-height: 125%;text-align: center;">
<:newsletter:info_email_reception:> @email@<br />
<a href="@url_unsubscribe@" style="color: #336699;font-weight: normal;text-decoration: underline;">
<:newsletter:label_link_unsubscribe:>
</a>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Footer \\ -->
</td>
</tr>
</table>
<!-- // End Template Footer \\ -->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</center>
</body>
</html>
</BOUCLE_newsletter>
{{#FILTRE{newsletters_liens_absolus}}}