Changeset 62669 in spip-zone


Ignore:
Timestamp:
Jun 18, 2012, 2:27:22 PM (7 years ago)
Author:
cedric@…
Message:

Amelioration du template : plus de contraste pour le texte, et des styles qui s'adaptent dans une fenetre etroite ou sur un device de type phone

Location:
_plugins_/facteur/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/facteur/trunk/emails/texte.html

    r59368 r62669  
    55        <!-- Facebook sharing information tags -->
    66        <meta property="og:title" content="[(#ENV{sujet}|attribut_html)]">
     7        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    78        <style type="text/css">
    8                 #outlook a {
    9                         padding: 0;
     9                #outlook a {padding: 0;}
     10                body {width: 100% !important;}
     11                body {margin: 0;padding: 0;}
     12                img {border: none;font-size: 16px;font-weight: bold;height: auto;line-height: 100%;outline: none;text-decoration: none;text-transform: capitalize;}
     13                #backgroundTable {height: 100% !important;margin: 0;padding: 0;width: 100% !important;}
     14                body, .backgroundTable {background-color: #FAFAFA;}
     15                #templateContainer {border: 1px solid #DDDDDD;}
     16                h1,.h1,h2,.h2,h3,.h3,h4,.h4 {color: #202020;display: block;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 22px;font-weight: bold;line-height: 100%;margin-bottom: 10px;text-align: left;}
     17                h1, .h1 {font-size: 34px;}
     18                h2, .h2 {font-size: 30px;}
     19                h3, .h3 {font-size: 26px;}
     20                #templatePreheader {background-color: #FAFAFA;}
     21                .preheaderContent div {color: #303030;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 12px;line-height: 100%;text-align: left;}
     22                .preheaderContent div a:link, .preheaderContent div a:visited {color: #336699;font-weight: normal;text-decoration: underline;}
     23                .preheaderContent div img {height: auto;max-width: 600px;}
     24                #templateHeader {background-color: #FFFFFF;border-bottom: 0;}
     25                .headerContent {color: #202020;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 34px;font-weight: bold;line-height: 100%;padding: 0;text-align: center;vertical-align: middle;}
     26                .headerContent a:link, .headerContent a:visited {color: #336699;font-weight: normal;text-decoration: underline;}
     27                #headerImage {height: auto;max-width: 600px !important;}
     28                #templateContainer, .bodyContent {background-color: #FDFDFD;}
     29                .bodyContent div {color: #303030;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 16px;line-height: 150%;text-align: left;}
     30                .bodyContent div a:link, .bodyContent div a:visited {color: #336699;font-weight: normal;text-decoration: underline;}
     31                .bodyContent img {display: inline;margin-bottom: 10px;}
     32                #templateFooter {background-color: #FDFDFD;border-top: 0;}
     33                .footerContent div {color: #707070;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 14px;line-height: 125%;text-align: left;}
     34                .footerContent div a:link, .footerContent div a:visited {color: #336699;font-weight: normal;text-decoration: underline;}
     35                .footerContent img {display: inline;}
     36                #social {background-color: #FAFAFA;border: 1px solid #F5F5F5;}
     37                #social div {text-align: center;}
     38                #utility {background-color: #FDFDFD;border-top: 1px solid #F5F5F5;}
     39                #utility div {text-align: center;}
     40                @media only screen and (max-width: 640px) {
     41                        html,body {width: 100% !important;}
     42                        #templatePreheader {width: 100% !important;}
     43                        .preheaderContent,.bodyContent,.footerContent {padding: 0 !important;}
     44                        #templateContainer {width: 100% !important;border: 0 !important;}
     45                        #templateBody {width: 100% !important;}
     46                        #templateFooter {width: 100% !important;}
     47                        #canspamBar {width: auto !important;}
     48                        .padding {padding-left:0 !important;padding-right:0 !important;}
     49                        .text {font-size: 16px !important;color: #101010 !important;}
    1050                }
    11                 body {
    12                         width: 100% !important;
    13                 }
    14                 body {
    15                         margin: 0;
    16                         padding: 0;
    17                 }
    18                 img {
    19                         border: none;
    20                         font-size: 16px;
    21                         font-weight: bold;
    22                         height: auto;
    23                         line-height: 100%;
    24                         outline: none;
    25                         text-decoration: none;
    26                         text-transform: capitalize;
    27                 }
    28                 #backgroundTable {
    29                         height: 100% !important;
    30                         margin: 0;
    31                         padding: 0;
    32                         width: 100% !important;
    33                 }
    34                 body, .backgroundTable {
    35                         background-color: #FAFAFA;
    36                 }
    37                 #templateContainer {
    38                         border: 1px solid #DDDDDD;
    39                 }
    40                 h1, .h1 {
    41                         color: #202020;
    42                         display: block;
    43                         font-family: 'Helvetica Neue',Helvetica,Arial;
    44                         font-size: 34px;
    45                         font-weight: bold;
    46                         line-height: 100%;
    47                         margin-bottom: 10px;
    48                         text-align: left;
    49                 }
    50                 h2, .h2 {
    51                         color: #202020;
    52                         display: block;
    53                         font-family: 'Helvetica Neue',Helvetica,Arial;
    54                         font-size: 30px;
    55                         font-weight: bold;
    56                         line-height: 100%;
    57                         margin-bottom: 10px;
    58                         text-align: left;
    59                 }
    60                 h3, .h3 {
    61                         color: #202020;
    62                         display: block;
    63                         font-family: 'Helvetica Neue',Helvetica,Arial;
    64                         font-size: 26px;
    65                         font-weight: bold;
    66                         line-height: 100%;
    67                         margin-bottom: 10px;
    68                         text-align: left;
    69                 }
    70                 h4, .h4 {
    71                         color: #202020;
    72                         display: block;
    73                         font-family: 'Helvetica Neue',Helvetica,Arial;
    74                         font-size: 22px;
    75                         font-weight: bold;
    76                         line-height: 100%;
    77                         margin-bottom: 10px;
    78                         text-align: left;
    79                 }
    80                 #templatePreheader {
    81                         background-color: #FAFAFA;
    82                 }
    83                 .preheaderContent div {
    84                         color: #505050;
    85                         font-family: 'Helvetica Neue',Helvetica,Arial;
    86                         font-size: 12px;
    87                         line-height: 100%;
    88                         text-align: left;
    89                 }
    90                 .preheaderContent div a:link, .preheaderContent div a:visited {
    91                         color: #336699;
    92                         font-weight: normal;
    93                         text-decoration: underline;
    94                 }
    95                 .preheaderContent div img {
    96                         height: auto;
    97                         max-width: 600px;
    98                 }
    99                 #templateHeader {
    100                         background-color: #FFFFFF;
    101                         border-bottom: 0;
    102                 }
    103                 .headerContent {
    104                         color: #202020;
    105                         font-family: 'Helvetica Neue',Helvetica,Arial;
    106                         font-size: 34px;
    107                         font-weight: bold;
    108                         line-height: 100%;
    109                         padding: 0;
    110                         text-align: center;
    111                         vertical-align: middle;
    112                 }
    113                 .headerContent a:link, .headerContent a:visited {
    114                         color: #336699;
    115                         font-weight: normal;
    116                         text-decoration: underline;
    117                 }
    118                 #headerImage {
    119                         height: auto;
    120                         max-width: 600px !important;
    121                 }
    122                 #templateContainer, .bodyContent {
    123                         background-color: #FDFDFD;
    124                 }
    125                 .bodyContent div {
    126                         color: #505050;
    127                         font-family: 'Helvetica Neue',Helvetica,Arial;
    128                         font-size: 16px;
    129                         line-height: 150%;
    130                         text-align: left;
    131                 }
    132                 .bodyContent div a:link, .bodyContent div a:visited {
    133                         color: #336699;
    134                         font-weight: normal;
    135                         text-decoration: underline;
    136                 }
    137                 .bodyContent img {
    138                         display: inline;
    139                         margin-bottom: 10px;
    140                 }
    141                 #templateFooter {
    142                         background-color: #FDFDFD;
    143                         border-top: 0;
    144                 }
    145                 .footerContent div {
    146                         color: #707070;
    147                         font-family: 'Helvetica Neue',Helvetica,Arial;
    148                         font-size: 14px;
    149                         line-height: 125%;
    150                         text-align: left;
    151                 }
    152                 .footerContent div a:link, .footerContent div a:visited {
    153                         color: #336699;
    154                         font-weight: normal;
    155                         text-decoration: underline;
    156                 }
    157                 .footerContent img {
    158                         display: inline;
    159                 }
    160                 #social {
    161                         background-color: #FAFAFA;
    162                         border: 1px solid #F5F5F5;
    163                 }
    164                 #social div {
    165                         text-align: center;
    166                 }
    167                 #utility {
    168                         background-color: #FDFDFD;
    169                         border-top: 1px solid #F5F5F5;
    170                 }
    171                 #utility div {
    172                         text-align: center;
     51                @media only screen and (max-device-width: 480px) {
     52                        html,body {width: 320px !important;}
     53                        #templatePreheader {width: 320px !important;display: none;}
     54                        .preheaderContent,.bodyContent,.footerContent {padding: 0 !important;}
     55                        #templateContainer {width: 320px !important;border: 0 !important;}
     56                        #templateBody {width: 320px !important;}
     57                        #templateFooter {width: 320px !important;}
     58                        #canspamBar {width: auto !important;}
     59                        .padding {padding-left:0 !important;padding-right:0 !important;}
     60                        .text {font-size: 16px !important;color: #101010 !important;}
    17361                }
    17462        </style>
    17563</head>
    17664<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0"
    177                         style="-webkit-text-size-adjust: 100%;margin: 0;padding: 0;background-color: #FAFAFA;width: 100% !important;">
     65                        style="margin: 0;padding: 0;width: 100% !important;">
    17866<center>
    17967        <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable"
     
    18270                        <td align="center" valign="top">
    18371                                <!-- // Begin Template Preheader \\ -->
    184                                 <table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader"
     72                                <table border="0" cellpadding="0" cellspacing="0" width="600" id="templatePreheader"
    18573                                                         style="background-color: #FAFAFA;">
    18674                                        <tr>
    187                                                 <td valign="top" class="preheaderContent">
     75                                                <td valign="top" class="preheaderContent" style="padding:10px;">
    18876
    18977                                                        <!-- // Begin Module: Standard Preheader \\ -->
     
    19179                                                                <tr>
    19280                                                                        <td valign="top">
    193                                                                                 <div style="color: #505050;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 12px;line-height: 100%;text-align: left;">
     81                                                                                <div style="color: #303030;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 12px;line-height: 100%;text-align: left;">
    19482                                                                                        <br>
    19583                                                                                </div>
     
    20997                                                <td align="center" valign="top">
    21098                                                        <!-- // Begin Template Body \\ -->
    211                                                         <table border="0" cellpadding="10" cellspacing="0" width="600" id="templateBody">
     99                                                        <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
    212100                                                                <tr>
    213                                                                         <td valign="top" class="bodyContent" style="background-color: #FDFDFD;">
     101                                                                        <td valign="top" class="bodyContent" style="background-color: #FDFDFD;padding:10px;">
    214102
    215103                                                                                <!-- // Begin Module: Standard Content \\ -->
     
    217105                                                                                        <tr>
    218106                                                                                                <td valign="top">
    219                                                                                                         <div style="color: #505050;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 16px;line-height: 150%;text-align: left;">
     107                                                                                                        <div class='text' style="color: #303030;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 16px;line-height: 150%;text-align: left;">
    220108                                                                                                                [(#ENV*{html}|propre|replace{'<br />\s*<br />(\s*<br />)+?','<br /> <br />'})]
    221109                                                                                                                <br>
     
    232120                                                </td>
    233121                                        </tr>
    234                                         <tr>
    235                                                 <td align="center" valign="top">
    236                                                         <!-- // Begin Template Footer \\ -->
    237                                                         <table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter"
    238                                                                                  style="background-color: #FDFDFD;border-top: 0;">
    239                                                                 <tr>
    240                                                                         <td valign="top" class="footerContent">
    241 
    242                                                                                 <!-- // Begin Module: Standard Footer \\ -->
    243                                                                                 <table border="0" cellpadding="10" cellspacing="0" width="100%">
    244                                                                                         <tr>
    245                                                                                                 <td valign="top" width="370">
    246                                                                                                         <br>
    247 
    248                                                                                                         <div style="color: #707070;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 14px;line-height: 125%;text-align: left;">
    249                                                                                                                 <br>
    250                                                                                                         </div>
    251                                                                                                         <br>
    252                                                                                                 </td>
    253                                                                                                 <td valign="top" width="170" id="Rewards">
    254                                                                                                         <br>
    255 
    256                                                                                                         <div style="color: #707070;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 14px;line-height: 125%;text-align: left;">
    257                                                                                                                 <br>
    258                                                                                                         </div>
    259                                                                                                         <br>
    260                                                                                                 </td>
    261                                                                                         </tr>
    262                                                                                         <tr>
    263                                                                                                 <td colspan="2" valign="middle" id="utility"
    264                                                                                                                 style="background-color: #FDFDFD;border-top: 1px solid #F5F5F5;">
    265                                                                                                         <div style="color: #707070;font-family: 'Helvetica Neue',Helvetica,Arial;font-size: 14px;line-height: 125%;text-align: center;">
    266                                                                                                                 &nbsp;<br>
    267                                                                                                         </div>
    268                                                                                                 </td>
    269                                                                                         </tr>
    270                                                                                 </table>
    271                                                                                 <!-- // End Module: Standard Footer \\ -->
    272                                                                         </td>
    273                                                                 </tr>
    274                                                         </table>
    275                                                         <!-- // End Template Footer \\ -->
    276                                                 </td>
    277                                         </tr>
    278122                                </table>
    279123                                <br>
     
    286130        <br/>
    287131        <br/>
    288         <br/>
    289         <br/>
    290         <br/>
    291         <table border="0" cellpadding="20" cellspacing="0" width="100%"
     132        <table border="0" cellpadding="0" cellspacing="0" width="100%"
    292133                                 style="background:#EEEEEE  !important; border-top:1px solid #DDDDDD; clear:both;" id="canspamBarWrapper">
    293134                <tr>
    294                         <td align="center" valign="top" style="padding-bottom:0;">
     135                        <td align="center" valign="top" style="padding:20px;padding-bottom: 0;" class="padding">
    295136                                <table border="0" cellpadding="0" cellspacing="0" width="600" id="canspamBar">
    296137                                        <tr>
    297138                                                <td align="left" valign="top"
    298                                                                 style="color:#505050 !important;font-family:Verdana,Arial,Sans !important;font-size:13px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:top !important;text-align:left !important;">
     139                                                                style="color:#303030 !important;font-family:Verdana,Arial,Sans !important;font-size:13px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:top !important;text-align:left !important;">
    299140                                                        <a href="#URL_SITE_SPIP/">#NOM_SITE_SPIP</a>
    300141                                                        <br/>
    301142                                                        <br/>
    302                                                 </td>
    303                                                 <td align="left" valign="top">
    304                                                        
    305143                                                </td>
    306144                                        </tr>
  • _plugins_/facteur/trunk/paquet.xml

    r60364 r62669  
    22        prefix="facteur"
    33        categorie="communication"
    4         version="2.1.6"
     4        version="2.1.7"
    55        etat="stable"
    6         compatibilite="[3.0.0-dev;3.0.*]"
     6        compatibilite="[3.0.0;3.0.*]"
    77        logo="prive/themes/spip/images/facteur-32.png"
    88        schema="1.1"
Note: See TracChangeset for help on using the changeset viewer.