|
@@ -33,11 +33,11 @@ discard block |
|
|
block discarded – undo |
|
33
|
33
|
*/ |
|
34
|
34
|
protected function getMeta() |
|
35
|
35
|
{ |
|
36
|
|
- $html = ' <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />'.PHP_EOL; |
|
37
|
|
- $html .= ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">'.PHP_EOL; |
|
38
|
|
- $html .= ' <meta name="viewport" content="width=device-width, initial-scale=1.0">'.PHP_EOL; |
|
|
36
|
+ $html = ' <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' . PHP_EOL; |
|
|
37
|
+ $html .= ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">' . PHP_EOL; |
|
|
38
|
+ $html .= ' <meta name="viewport" content="width=device-width, initial-scale=1.0">' . PHP_EOL; |
|
39
|
39
|
$html .= $this->getHtmlComment('Disable auto telephone linking in iOS', ' '); |
|
40
|
|
- $html .= ' <meta name="format-detection" content="telephone=no" />'.PHP_EOL; |
|
|
40
|
+ $html .= ' <meta name="format-detection" content="telephone=no" />' . PHP_EOL; |
|
41
|
41
|
return $html; |
|
42
|
42
|
} |
|
43
|
43
|
|
|
@@ -51,7 +51,7 @@ discard block |
|
|
block discarded – undo |
|
51
|
51
|
*/ |
|
52
|
52
|
protected function getTitle(string $title) |
|
53
|
53
|
{ |
|
54
|
|
- return ' <title>' . $title . '</title>' . PHP_EOL; |
|
|
54
|
+ return ' <title>' . $title . '</title>' . PHP_EOL; |
|
55
|
55
|
} |
|
56
|
56
|
|
|
57
|
57
|
/** |
|
@@ -64,41 +64,41 @@ discard block |
|
|
block discarded – undo |
|
64
|
64
|
protected function getStyles() |
|
65
|
65
|
{ |
|
66
|
66
|
// start style tag |
|
67
|
|
- $html = ' <style type="text/css">'.PHP_EOL; |
|
|
67
|
+ $html = ' <style type="text/css">' . PHP_EOL; |
|
68
|
68
|
$html .= PHP_EOL; |
|
69
|
69
|
|
|
70
|
70
|
// -- reset styles ---------------------------------------- |
|
71
|
71
|
$html .= $this->getCssComment('--- RESET STYLES ---', ' '); |
|
72
|
|
- $html .= ' html { background-color:'. $this->backsideBackgroundColor . '; margin:0; padding:0; }'.PHP_EOL; |
|
|
72
|
+ $html .= ' html { background-color:' . $this->backsideBackgroundColor . '; margin:0; padding:0; }' . PHP_EOL; |
|
73
|
73
|
$html .= ' body, #bodyTable, #bodyCell, #bodyCell{height:100% !important; margin:0; padding:0;'; |
|
74
|
|
- $html .= ' width:100% !important; font-family:'. $this->emailBodyFont .';}'.PHP_EOL; |
|
75
|
|
- $html .= ' table{border-collapse:collapse;}'.PHP_EOL; |
|
76
|
|
- $html .= ' table[id=bodyTable] {width:100%!important;margin:auto;max-width:500px!important; color:'. $this->emailBodyColor . ';font-weight:normal;}'.PHP_EOL; |
|
77
|
|
- $html .= ' img, a img{border:0; outline:none; text-decoration:none;height:auto; line-height:100%;}'.PHP_EOL; |
|
78
|
|
- $html .= ' a {text-decoration:none !important;border-bottom: 1px solid;}'.PHP_EOL; |
|
|
74
|
+ $html .= ' width:100% !important; font-family:' . $this->emailBodyFont . ';}' . PHP_EOL; |
|
|
75
|
+ $html .= ' table{border-collapse:collapse;}' . PHP_EOL; |
|
|
76
|
+ $html .= ' table[id=bodyTable] {width:100%!important;margin:auto;max-width:500px!important; color:' . $this->emailBodyColor . ';font-weight:normal;}' . PHP_EOL; |
|
|
77
|
+ $html .= ' img, a img{border:0; outline:none; text-decoration:none;height:auto; line-height:100%;}' . PHP_EOL; |
|
|
78
|
+ $html .= ' a {text-decoration:none !important;border-bottom: 1px solid;}' . PHP_EOL; |
|
79
|
79
|
|
|
80
|
80
|
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
|
81
|
81
|
// todo custom COLOR !!!!!!!!!!!!!! font size ? line height ? margin ? see |
|
82
|
82
|
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
|
83
|
|
- $html .= ' h1, h2, h3, h4, h5, h6 {color:#5F5F5F; font-weight:normal; font-family:'. $this->emailBodyFont .';'.PHP_EOL; |
|
84
|
|
- $html .= ' font-size:20px; line-height:125%; text-align:Left; letter-spacing:normal;'.PHP_EOL; |
|
85
|
|
- $html .= ' margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;'.PHP_EOL; |
|
86
|
|
- $html .= ' padding-top:0;padding-bottom:10px;padding-left:0;padding-right:0;}'.PHP_EOL; |
|
|
83
|
+ $html .= ' h1, h2, h3, h4, h5, h6 {color:#5F5F5F; font-weight:normal; font-family:' . $this->emailBodyFont . ';' . PHP_EOL; |
|
|
84
|
+ $html .= ' font-size:20px; line-height:125%; text-align:Left; letter-spacing:normal;' . PHP_EOL; |
|
|
85
|
+ $html .= ' margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;' . PHP_EOL; |
|
|
86
|
+ $html .= ' padding-top:0;padding-bottom:10px;padding-left:0;padding-right:0;}' . PHP_EOL; |
|
87
|
87
|
// custom |
|
88
|
88
|
$html .= ' p {margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;'; |
|
89
|
|
- $html .= 'padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;}'.PHP_EOL; |
|
90
|
|
- $html .= ' p + p {padding-top:10px;}'.PHP_EOL; |
|
|
89
|
+ $html .= 'padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;}' . PHP_EOL; |
|
|
90
|
+ $html .= ' p + p {padding-top:10px;}' . PHP_EOL; |
|
91
|
91
|
$html .= PHP_EOL; |
|
92
|
92
|
|
|
93
|
93
|
// -- client specific styles ------------------------------------------- |
|
94
|
94
|
$html .= $this->getCssComment('--- CLIENT-SPECIFIC STYLES ---', ' '); |
|
95
|
|
- $html .= ' .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}'. $this->getCssComment(' Force Hotmail/Outlook.com to display emails at full width.'); |
|
|
95
|
+ $html .= ' .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}' . $this->getCssComment(' Force Hotmail/Outlook.com to display emails at full width.'); |
|
96
|
96
|
$html .= ' .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;}' . $this->getCssComment(' Force Hotmail/Outlook.com to display line heights normally.'); |
|
97
|
97
|
$html .= ' table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;}' . $this->getCssComment(' Remove spacing between tables in Outlook 2007 and up.'); |
|
98
|
|
- $html .= ' #outlook a{padding:0;}'. $this->getCssComment(' Force Outlook 2007 and up to provide a "view in browser" message.'); |
|
99
|
|
- $html .= ' img{-ms-interpolation-mode: bicubic;display:block;outline:none; text-decoration:none;}'. $this->getCssComment(' Force IE to smoothly render resized images.'); |
|
100
|
|
- $html .= ' body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; font-weight:normal!important;}'. $this->getCssComment(' Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. '); |
|
101
|
|
- $html .= ' .ExternalClass td[class="ecxflexibleContainerBox"] h3 {padding-top: 10px !important;} '. $this->getCssComment(' Force hotmail to push 2-grid sub headers down'); |
|
|
98
|
+ $html .= ' #outlook a{padding:0;}' . $this->getCssComment(' Force Outlook 2007 and up to provide a "view in browser" message.'); |
|
|
99
|
+ $html .= ' img{-ms-interpolation-mode: bicubic;display:block;outline:none; text-decoration:none;}' . $this->getCssComment(' Force IE to smoothly render resized images.'); |
|
|
100
|
+ $html .= ' body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; font-weight:normal!important;}' . $this->getCssComment(' Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. '); |
|
|
101
|
+ $html .= ' .ExternalClass td[class="ecxflexibleContainerBox"] h3 {padding-top: 10px !important;} ' . $this->getCssComment(' Force hotmail to push 2-grid sub headers down'); |
|
102
|
102
|
$html .= PHP_EOL; |
|
103
|
103
|
|
|
104
|
104
|
// -- our styles -------------------------------------------------------- |
|
@@ -107,24 +107,24 @@ discard block |
|
|
block discarded – undo |
|
107
|
107
|
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
|
108
|
108
|
// todo custom font size ? line height ? colors .. |
|
109
|
109
|
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!#3497D9!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
|
110
|
|
- $html .= ' h1{display:block;font-size:32px;font-style:normal;font-weight:200!important;line-height:100%;}'.PHP_EOL; |
|
111
|
|
- $html .= ' h2{display:block;font-size:27px;font-style:normal;font-weight:200!important;line-height:120%;}'.PHP_EOL; |
|
112
|
|
- $html .= ' h3{display:block;font-size:24px;font-style:normal;font-weight:200!important;line-height:110%;}'.PHP_EOL; |
|
113
|
|
- $html .= ' h4{display:block;font-size:22px;font-style:normal;font-weight:200!important;line-height:100%;}'.PHP_EOL; |
|
114
|
|
- $html .= ' h5{display:block;font-size:20px;font-style:normal;font-weight:200!important;line-height:110%;}'.PHP_EOL; |
|
115
|
|
- $html .= ' h6{display:block;font-size:18px;font-style:normal;font-weight:200!important;line-height:110%;}'.PHP_EOL; |
|
|
110
|
+ $html .= ' h1{display:block;font-size:32px;font-style:normal;font-weight:200!important;line-height:100%;}' . PHP_EOL; |
|
|
111
|
+ $html .= ' h2{display:block;font-size:27px;font-style:normal;font-weight:200!important;line-height:120%;}' . PHP_EOL; |
|
|
112
|
+ $html .= ' h3{display:block;font-size:24px;font-style:normal;font-weight:200!important;line-height:110%;}' . PHP_EOL; |
|
|
113
|
+ $html .= ' h4{display:block;font-size:22px;font-style:normal;font-weight:200!important;line-height:100%;}' . PHP_EOL; |
|
|
114
|
+ $html .= ' h5{display:block;font-size:20px;font-style:normal;font-weight:200!important;line-height:110%;}' . PHP_EOL; |
|
|
115
|
+ $html .= ' h6{display:block;font-size:18px;font-style:normal;font-weight:200!important;line-height:110%;}' . PHP_EOL; |
|
116
|
116
|
|
|
117
|
|
- $html .= ' .flexibleImage{height:auto;}'.PHP_EOL; |
|
118
|
|
- $html .= ' .linkRemoveBorder{border-bottom:0 !important;}'.PHP_EOL; |
|
119
|
|
- $html .= ' table[class=flexibleContainerCellDivider] {padding-bottom:0 !important;padding-top:0 !important;}'.PHP_EOL; |
|
120
|
|
- |
|
121
|
|
- $html .= ' body, #bodyTable{background-color:'. $this->backsideBackgroundColor . ';}'.PHP_EOL; |
|
122
|
|
- $html .= ' #emailHeader{background-color:' . $this->backsideBackgroundColor . ';}'.PHP_EOL; |
|
123
|
|
- $html .= ' #emailBody{background-color:' . $this->emailBodyBackgroundColor . ';}'.PHP_EOL; |
|
124
|
|
- $html .= ' #emailFooter{background-color:' . $this->backsideBackgroundColor . ';}'.PHP_EOL; |
|
125
|
|
- $html .= ' .emailButton{background-color:#3497D9; border-collapse:separate;}'.PHP_EOL; |
|
126
|
|
- $html .= ' .buttonContent{color:#FFFFFF; font-family:Helvetica; font-size:18px; font-weight:200; line-height:100%; padding:15px; text-align:center;}'.PHP_EOL; |
|
127
|
|
- $html .= ' .buttonContent a{color:#FFFFFF; display:block; text-decoration:none!important; border:0!important;}'.PHP_EOL; |
|
|
117
|
+ $html .= ' .flexibleImage{height:auto;}' . PHP_EOL; |
|
|
118
|
+ $html .= ' .linkRemoveBorder{border-bottom:0 !important;}' . PHP_EOL; |
|
|
119
|
+ $html .= ' table[class=flexibleContainerCellDivider] {padding-bottom:0 !important;padding-top:0 !important;}' . PHP_EOL; |
|
|
120
|
+ |
|
|
121
|
+ $html .= ' body, #bodyTable{background-color:' . $this->backsideBackgroundColor . ';}' . PHP_EOL; |
|
|
122
|
+ $html .= ' #emailHeader{background-color:' . $this->backsideBackgroundColor . ';}' . PHP_EOL; |
|
|
123
|
+ $html .= ' #emailBody{background-color:' . $this->emailBodyBackgroundColor . ';}' . PHP_EOL; |
|
|
124
|
+ $html .= ' #emailFooter{background-color:' . $this->backsideBackgroundColor . ';}' . PHP_EOL; |
|
|
125
|
+ $html .= ' .emailButton{background-color:#3497D9; border-collapse:separate;}' . PHP_EOL; |
|
|
126
|
+ $html .= ' .buttonContent{color:#FFFFFF; font-family:Helvetica; font-size:18px; font-weight:200; line-height:100%; padding:15px; text-align:center;}' . PHP_EOL; |
|
|
127
|
+ $html .= ' .buttonContent a{color:#FFFFFF; display:block; text-decoration:none!important; border:0!important;}' . PHP_EOL; |
|
128
|
128
|
$html .= PHP_EOL; |
|
129
|
129
|
|
|
130
|
130
|
|
|
@@ -132,49 +132,49 @@ discard block |
|
|
block discarded – undo |
|
132
|
132
|
// -- mobiles styles ------------------------------------------- |
|
133
|
133
|
// ------------------------------------------------------------- |
|
134
|
134
|
$html .= $this->getCssComment('--- MOBILE STYLES ---', ' '); |
|
135
|
|
- $html .= ' @media only screen and (max-width: '. strval($this->emailBodyWidth - 20) . 'px) {'.PHP_EOL; |
|
|
135
|
+ $html .= ' @media only screen and (max-width: ' . strval($this->emailBodyWidth - 20) . 'px) {' . PHP_EOL; |
|
136
|
136
|
$html .= PHP_EOL; |
|
137
|
137
|
|
|
138
|
138
|
// -- client specific styles ------------------------------------------- |
|
139
|
139
|
$html .= $this->getCssComment('--- CLIENT-SPECIFIC STYLES ---', ' '); |
|
140
|
|
- $html .= ' body{width:100% !important; min-width:100% !important;}'. $this->getCssComment(' Force iOS Mail to render the email at full width.'); |
|
|
140
|
+ $html .= ' body{width:100% !important; min-width:100% !important;}' . $this->getCssComment(' Force iOS Mail to render the email at full width.'); |
|
141
|
141
|
$html .= PHP_EOL; |
|
142
|
142
|
|
|
143
|
143
|
//todo |
|
144
|
144
|
$html .= $this->getCssComment('--- FRAMEWORK STYLES ---', ' '); |
|
145
|
|
- $html .= ' table[id="emailHeader"],'.PHP_EOL; |
|
146
|
|
- $html .= ' table[id="emailBody"],'.PHP_EOL; |
|
147
|
|
- $html .= ' table[id="emailFooter"],'.PHP_EOL; |
|
148
|
|
- $html .= ' table[class="flexibleContainer"],'.PHP_EOL; |
|
149
|
|
- $html .= ' td[class="flexibleContainerCell"] {width:100% !important;}'.PHP_EOL; |
|
150
|
|
- $html .= ' td[class="flexibleContainerBox"], '.PHP_EOL; |
|
151
|
|
- $html .= ' td[class="flexibleContainerBox"] table {display: block;width: 100%;text-align: left;}'.PHP_EOL; |
|
|
145
|
+ $html .= ' table[id="emailHeader"],' . PHP_EOL; |
|
|
146
|
+ $html .= ' table[id="emailBody"],' . PHP_EOL; |
|
|
147
|
+ $html .= ' table[id="emailFooter"],' . PHP_EOL; |
|
|
148
|
+ $html .= ' table[class="flexibleContainer"],' . PHP_EOL; |
|
|
149
|
+ $html .= ' td[class="flexibleContainerCell"] {width:100% !important;}' . PHP_EOL; |
|
|
150
|
+ $html .= ' td[class="flexibleContainerBox"], ' . PHP_EOL; |
|
|
151
|
+ $html .= ' td[class="flexibleContainerBox"] table {display: block;width: 100%;text-align: left;}' . PHP_EOL; |
|
152
|
152
|
|
|
153
|
153
|
//todo |
|
154
|
154
|
|
|
155
|
155
|
$html .= $this->getCssComment('The following style rule makes any image classed with \'flexibleImage\'fluid' . PHP_EOL |
|
156
|
|
- . ' when the query activates. Make sure you add an inline max-width to those '. PHP_EOL |
|
|
156
|
+ . ' when the query activates. Make sure you add an inline max-width to those ' . PHP_EOL |
|
157
|
157
|
. ' to prevent them from blowing out.', ' '); |
|
158
|
158
|
|
|
159
|
|
- $html .= ' td[class="imageContent"] img {height:auto !important; width:100% !important; max-width:100% !important; }'. PHP_EOL; |
|
160
|
|
- $html .= ' img[class="flexibleImage"]{height:auto !important; width:100% !important;max-width:100% !important;}'. PHP_EOL; |
|
161
|
|
- $html .= ' img[class="flexibleImageSmall"]{height:auto !important; width:auto !important;}'. PHP_EOL; |
|
|
159
|
+ $html .= ' td[class="imageContent"] img {height:auto !important; width:100% !important; max-width:100% !important; }' . PHP_EOL; |
|
|
160
|
+ $html .= ' img[class="flexibleImage"]{height:auto !important; width:100% !important;max-width:100% !important;}' . PHP_EOL; |
|
|
161
|
+ $html .= ' img[class="flexibleImageSmall"]{height:auto !important; width:auto !important;}' . PHP_EOL; |
|
162
|
162
|
|
|
163
|
163
|
$html .= $this->getCssComment('Create top space for every second element in a block', ' '); |
|
164
|
|
- $html .= ' table[class="flexibleContainerBoxNext"]{padding-top: 10px !important;}'. PHP_EOL; |
|
|
164
|
+ $html .= ' table[class="flexibleContainerBoxNext"]{padding-top: 10px !important;}' . PHP_EOL; |
|
165
|
165
|
|
|
166
|
166
|
$html .= $this->getCssComment('Make buttons in the email span the full width of their container, allowing' |
|
167
|
167
|
. 'for left- or right-handed ease of use.', ' '); |
|
168
|
168
|
|
|
169
|
|
- $html .= ' table[class="emailButton"]{width:100% !important;}'. PHP_EOL; |
|
170
|
|
- $html .= ' td[class="buttonContent"]{padding:0 !important;}'. PHP_EOL; |
|
171
|
|
- $html .= ' td[class="buttonContent"] a{padding:15px !important;}'. PHP_EOL; |
|
172
|
|
- $html .= ' }'.PHP_EOL; |
|
|
169
|
+ $html .= ' table[class="emailButton"]{width:100% !important;}' . PHP_EOL; |
|
|
170
|
+ $html .= ' td[class="buttonContent"]{padding:0 !important;}' . PHP_EOL; |
|
|
171
|
+ $html .= ' td[class="buttonContent"] a{padding:15px !important;}' . PHP_EOL; |
|
|
172
|
+ $html .= ' }' . PHP_EOL; |
|
173
|
173
|
|
|
174
|
174
|
//todo more ... |
|
175
|
175
|
|
|
176
|
176
|
// close style tag |
|
177
|
|
- $html .= ' </style>'.PHP_EOL; |
|
|
177
|
+ $html .= ' </style>' . PHP_EOL; |
|
178
|
178
|
|
|
179
|
179
|
// ------- conditional formatting for outlook -------------------- |
|
180
|
180
|
$html .= $this->getHtmlComment('Outlook Conditional CSS. ' . PHP_EOL |
|
@@ -182,18 +182,18 @@ discard block |
|
|
block discarded – undo |
|
182
|
182
|
. ' columns into a single vertical stack as on mobile clients. This is' . PHP_EOL |
|
183
|
183
|
. ' primarily done to avoid the \'page break bug\' and is optional.' . PHP_EOL |
|
184
|
184
|
. ' More information here: https://templates.mailchimp.com/development/css/outlook-conditional-css' . PHP_EOL |
|
185
|
|
- . ' ',' '); |
|
186
|
|
- |
|
187
|
|
- $html .= ' <!--[if mso 12]>'.PHP_EOL; |
|
188
|
|
- $html .= ' <style type="text/css">'.PHP_EOL; |
|
189
|
|
- $html .= ' .flexibleContainer{display:block !important; width:100% !important;}'.PHP_EOL; |
|
190
|
|
- $html .= ' </style>'.PHP_EOL; |
|
191
|
|
- $html .= ' <![endif]-->'.PHP_EOL; |
|
192
|
|
- $html .= ' <!--[if mso 14]>'.PHP_EOL; |
|
193
|
|
- $html .= ' <style type="text/css">'.PHP_EOL; |
|
194
|
|
- $html .= ' .flexibleContainer{display:block !important; width:100% !important;}'.PHP_EOL; |
|
195
|
|
- $html .= ' </style>'.PHP_EOL; |
|
196
|
|
- $html .= ' <![endif]-->'.PHP_EOL; |
|
|
185
|
+ . ' ', ' '); |
|
|
186
|
+ |
|
|
187
|
+ $html .= ' <!--[if mso 12]>' . PHP_EOL; |
|
|
188
|
+ $html .= ' <style type="text/css">' . PHP_EOL; |
|
|
189
|
+ $html .= ' .flexibleContainer{display:block !important; width:100% !important;}' . PHP_EOL; |
|
|
190
|
+ $html .= ' </style>' . PHP_EOL; |
|
|
191
|
+ $html .= ' <![endif]-->' . PHP_EOL; |
|
|
192
|
+ $html .= ' <!--[if mso 14]>' . PHP_EOL; |
|
|
193
|
+ $html .= ' <style type="text/css">' . PHP_EOL; |
|
|
194
|
+ $html .= ' .flexibleContainer{display:block !important; width:100% !important;}' . PHP_EOL; |
|
|
195
|
+ $html .= ' </style>' . PHP_EOL; |
|
|
196
|
+ $html .= ' <![endif]-->' . PHP_EOL; |
|
197
|
197
|
|
|
198
|
198
|
// done |
|
199
|
199
|
return $html; |
kristuff /
phtemail
