morepork Posted June 4, 2014 Share Posted June 4, 2014 Hi there, I was wondering if there is a global setting/css value for the font family and the text size used by all the mail templates, rather than changing mail templates one by one? I know how to change the 'colour' in the back office, which affects the coloured bar at the top of the mails and certain text - however, I am specifically looking to specify a sans serif for the email body and specify a different text colour. Prestashop 1.6.0.6 Link to comment Share on other sites More sharing options...
PSfever.com Posted June 4, 2014 Share Posted June 4, 2014 Hi, I personally don't know of a possibility of setting a font globally, as the font is right in the HTML for in the body of the email.. It looks like you will need to go through every .html file and change the fonts accordingly. Link to comment Share on other sites More sharing options...
morepork Posted June 5, 2014 Author Share Posted June 5, 2014 Ok thanks. When I check my mail, Outlook is displaying the resulting email in a serif face, despite making a change to use a sans serif in the html. What am I doing wrong? (<body style="width:100%!important;margin:0;padding:0;color:#333333;font:75%/150% Tahoma,sans-serif,Arial;" bgcolor="#ffffff">) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd"> <html> <head> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Message from {shop_name}</title> <style type="text/css"> body{width:100%;height:100%;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} html{width: 100%;font-size:100%;} table {border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;margin:0;padding:0;} table td {border-collapse:collapse;} table[class="mobile_tb_border"]{border: 1px solid #dddddd;border-left:0;border-top:0;border-collapse: collapse!important;} table[class="tb_border"] tr,table[class="mobile_tb_border"] tr{background: none!important;border:none!important;} table[class="tb_border"] td,table[class="mobile_tb_border"] td,table[class="mobile_tb_border"] th{border:1px solid #dddddd;border-right: none;border-bottom:none;} @media only screen and (max-width: 640px) { table[class="st_e_wrap"]{width:460px!important;} table[class="st_e_con"],td[class="st_e_con"],.col_span{width:440px!important;} .col_3_left,.col_3_right{width:140px!important;} .col_3_center{width:160px!important;} .col_3_padding{width:10px!important;} .col_5_2{width:172px!important;} .col_5_3{width:258px!important;} .col_2_1{width:215px!important;} .mob_center{text-align:center!important;} a[class="link_to_btn"]{display: block;background-color: #f2f2f2!important;text-align:center;padding: 6px; margin:6px auto!important;font-size: 12px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .mob_hide{display:none!important;} table[class="mobile_tb_border"] tr{border-bottom:3px solid #dddddd!important;} table[class="mobile_tb_border"] th,table[class="mobile_tb_border"] td{display:block;width:auto!important;} } @media only screen and (max-width: 479px) { table[class="st_e_wrap"]{width:300px!important;} table[class="st_e_con"],td[class="st_e_con"],.col_span{width:280px!important;} .col_3_padding{display:none;} .col_3_left,.col_3_right, .col_3_center, .col_5_2, .col_5_3, .col_2_1{width:280px!important;} } </style> </head> <body style="width:100%!important;margin:0;padding:0;color:#333333;font:75%/150% Tahoma,sans-serif,Arial;" bgcolor="#ffffff"> <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td style="background-color: {color};" align="center" valign="top" width="100%"> <table class="st_e_con" style="width: 580px;" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td style="color: #fff; line-height: 38px;" height="38"> </td> <td style="line-height: 38px;" align="right" width="80" height="38"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <div style="height: 28px;"> </div> <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td align="center" valign="top" width="100%"> <table border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td class="st_e_con" valign="top" width="580"> <table class="col_span" style="table-layout: fixed; word-break: break-all; width: 224px;" border="0" cellspacing="0" cellpadding="0" align="left"> <tbody> <tr> <td class="mob_center"><a title="{shop_name}" href="{shop_url}"><img style="max-width: 100%; height: auto; border: none;" src="{shop_logo}" alt="{shop_name}" /></a></td> </tr> </tbody> </table> <table class="col_span" style="width: 336px;" border="0" cellspacing="0" cellpadding="0" align="right"> <tbody> <tr> <td class="mob_center" style="padding-top: 12px;" align="right"><a class="link_to_btn" style="color: #333333; font-size: 14px; text-decoration: none;" href="{shop_url}">HOME</a> <span class="mob_hide" style="color: #999999;"> | </span> <a class="link_to_btn" style="color: #333333; font-size: 14px; text-decoration: none;" href="{my_account_url}">MY ACCOUNT</a> <span class="mob_hide" style="color: #999999;"> | </span> <a class="link_to_btn" style="color: #333333; font-size: 14px; text-decoration: none;" href="{shop_url}?controller=new-products">NEW PRODUCTS</a></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <div style="height: 28px;"> </div> <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td align="center" valign="middel" bgcolor="fafafa" width="100%"> <div style="height: 28px;"> </div> <table class="st_e_con" style="width: 580px;" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td style="color: {color}; font-size: 22px; line-height: 44px;" height="44">Hi, {firstname} {lastname},</td> </tr> <tr> <td style="font-size: 16px; line-height: 26px; color: #666666;">Order {order_name} - Shipped</td> </tr> </tbody> </table> <div style="height: 28px;"> </div> </td> </tr> </tbody> </table> <div style="height: 28px;"> </div> <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td align="center" valign="top" width="100%"> <table class="st_e_con" style="width: 580px;" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td style="font-size: 12px; line-height: 20px; color: #999966;">Thank you for shopping with {shop_name}!</td> </tr> <tr> <td style="font-size: 16px; line-height: 28px; color: #339900;">Your order with the reference {order_name} has been shipped.</td> </tr> <tr> <td style="font-size: 12px; line-height: 20px; color: #999999;">You will soon receive a URL to track the delivery progress of your package.</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <div style="height: 28px;"> </div> <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td align="center" valign="top" width="100%"> <table class="st_e_con" style="width: 580px;" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td style="font-size: 12px; line-height: 20px; color: #999999;">You can review your order and download your invoice from the <a style="color: #333333; text-decoration: none;" href="{history_url}">"Order history"</a> section of your customer account by clicking <a style="color: #333333; text-decoration: none;" href="{my_account_url}">"My account"</a> on our shop.</td> </tr> <tr> <td height="28"> </td> </tr> <tr> <td style="font-size: 12px; line-height: 20px; color: #999999;">If you have a guest account, you can follow your order via the <a style="color: #333333; text-decoration: none;" href="{guest_tracking_url}">"Guest Tracking"</a> section on our shop.</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <div style="height: 28px;"> </div> <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td align="center" valign="top" bgcolor="fafafa" width="100%"> <div style="height: 28px;"> </div> <table border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td class="st_e_con" width="580"> <table class="col_3_left" style="width: 180px;" border="0" cellspacing="0" cellpadding="0" align="left"> <tbody> <tr> <td style="font-size: 16px; line-height: 28px; color: #333333;" height="28">Contact Us</td> </tr> <tr> <td style="font-size: 12px; line-height: 16px;" height="20"><a style="color: #999999; text-decoration: none;" href="mailto:[email protected]">[email protected]</a></td> </tr> <tr> <td style="font-size: 12px; line-height: 16px; color: #999999;" height="20">+64 09 8276970</td> </tr> <tr> <td style="font-size: 12px; line-height: 16px; color: #999999;"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <div style="height: 28px;"> </div> </td> </tr> </tbody> </table> <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td align="center" valign="top" bgcolor="666666" width="100%"> <table class="st_e_con" style="width: 580px;" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td style="color: #ffffff; line-height: 20px; font-size: 12px; padding: 10px 0;" align="center">© Copyright 2014 <a style="color: #ffffff; text-decoration: none;" href="{shop_url}">{shop_name}</a> - All Rights Reserved.</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p> </p> </body> </html> Link to comment Share on other sites More sharing options...
PSfever.com Posted June 5, 2014 Share Posted June 5, 2014 I am not familiar with Outlook, as I mostly use web clients for emails, but isn't there a way that Outlook overrides the font-family? Might sound silly... Also, try to change the font to this: body style="width:100%!important;margin:0;padding:0;color:#333333;font:75%/150% Tahoma,sans-serif,Arial !important;" Link to comment Share on other sites More sharing options...
morepork Posted June 6, 2014 Author Share Posted June 6, 2014 Thanks for the tip about Outlook. Doing a bit of Google research, indeed apparently Outlook doesn't obey the overall font spec, you have to add individual span styles and then it is supposed to work. Haven't tried this yet... Link to comment Share on other sites More sharing options...
Recommended Posts