Need Style Element Not Stripped Out

Once you've installed phpList... ask questions here!
Forum rules
Please help the volunteers to help you by supplying the version of phpList you are using, browser & version and if possible, a link to your phpList installation.

Need Style Element Not Stripped Out

Postby sharingsunshine » 7:57pm, Wed 15 Apr, 2015

Hello,

I am new to phpList and it looks like a very powerful program that will help tremendously. I don't have a template just an email that I want to insert an image in.

I have the latest version 3.0.12, Looking at it on FireFox 37.0.1 I have many emails that are sent to me from our manufacturer that I need to resend out to our customer base. These emails use the <style> tag and it seems the default editor strips them out once I insert them.

How do I include style css like this in our email between the <head> </head> tags? Also, do I need to specify the doctype?

Code: Select all
<style type="text/css">

   /* email client specific css - taken from http://htmlemailboilerplate.com/ */
   body {width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
   .ExternalClass {width:100%;}
   .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
   /* end resets */
   
   img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
   a img {border:none;}
   .image_fix {display:block;}
   
   table td {border-collapse: collapse;}
   
   /* container */
   .containerBorder {
      border-top: 1px solid #d5d5d5;
      border-right: 1px solid #d5d5d5;
      border-left: 1px solid #d5d5d5;   
   }
   
   .container td {
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
      color: #6E6F74;
   }
   
   .container a {
      color: #5583C7;   
   }
   
   /* preheader */
   .preheader td {
      font-size: 10px;
      padding-top: 20px;
      padding-bottom: 12px;
      color: #6E6F74;
   }
   
   .preheader a {
      color: #6E6F74;
   }
   
   .preheaderCenter {
      text-align: center;
      font-size: 10px;
   }
      
   /* navigation */
   .navigation td {
      border-right: 1px solid #d5d5d5;
      padding-bottom: 3px;
      text-align: center;
   }
   
   .navigation a {
      text-decoration: none;
      color: #6E6F74;   
   }
   
   .navigation td.lastNav {
      border-right: 0;
   }
   
   /* banner
   .banner td {
      border: 1px solid #E4E6DC;
   } */
   
   .banner img {
      display: block;
      padding: 0;
      margin: 0;
   }
   
   /* content */
   .content {
      padding-bottom: 10px;
      background-color: #ffffff;
   }
      
   .content td.contentPadding {
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
   }
   
   /* footer */
   .footer td {
      font-size: 10px;
   }
   
   .footer td.footerNoReply {
      text-align: center;
   }
   
   /* heading classes */
   .header26px {
      font-size: 26px;
      font-weight: bold;
   }
   
   .header24px {
      font-size: 24px;
      font-weight: bold;
   }
   
   .header22px {
      font-size: 22px;
      font-weight: bold;
   }

   .header20px {
      font-size: 20px;
      font-weight: bold;
   }
   
   .header18px {
      font-size: 18px;
      font-weight: bold;
   }

   .header16px {
      font-size: 16px;
      font-weight: bold;
   }
   
   .headerSecondary26px {
      color: #F04B24;
      font-size: 26px;
      font-weight: bold;
   }
   
   .headerSecondary24px {
      color: #F04B24;
      font-size: 24px;
      font-weight: bold;
   }
   
   .headerSecondary22px {
      color: #F04B24;
      font-size: 22px;
      font-weight: bold;
   }

   .headerSecondary20px {
      color: #F04B24;
      font-size: 20px;
      font-weight: bold;
   }

   .headerSecondary18px {
      color: #F04B24;
      font-size: 18px;
      font-weight: bold;
   }

   .headerSecondary16px {
      color: #F04B24;
      font-size: 16px;
      font-weight: bold;
   }

   /* other */
   td.headerFormat {
      text-align: center;
      padding-bottom: 10px;
   }
   
   td.center {
      text-align: center;
   }
   
   td.disclaimer {
      font-size: 12px;
   }
   
   .greenHighlight {
      color: #54A51C;
      font-weight: bold;
   }
   
   .buttonCell {
      background: #FE714F;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      color: #ffffff;
      display: block;
      border-top: 2px solid #ffffff;
      border-right: 2px solid #ffffff;
      border-bottom: 2px solid #ffffff;
      border-left: 2px solid #ffffff;
   }

   .buttonLink {
      color: #ffffff;
      text-decoration: none;
      font-size:20px;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
      line-height:33px;
      width: 100%;
      text-align:center;
      display:inline-block;
   }
   
   
   @-ms-viewport {width: device-width;}
   
   @media screen and (min-width: 561px) {
      .containerTable {
         width: 560px !important;
      }
      
      .col310 {width: 310px !important;}
   }
   
   @media only screen and (min-device-width: 601px) {
      body[yahoo] .col310 {width: 310px !important;}
   }
   
   @media only screen and (max-width: 480px) {
   
      body[yahoo] .mob100pcwidth {width: 100% !important; height: auto !important;}
      body[yahoo] .mobileNoShow {display: none !important;}
      body[yahoo] .mobileColSplit {width:100% !important; float:left !important;}
      body[yahoo] .btnHeightCell {height: 44px !important;}
      body[yahoo] .btnHeightLink {height: 44px !important; line-height: 44px !important;}
      body[yahoo] .btnwidth100 {width: 100% !important;}
      body[yahoo] .col310 {display: block; width: 100% !important;}
      body[yahoo] .max-width {max-width: 100% !important;}
      /* body[yahoo] .mobileSocialCell {width:100% !important; float:left !important; border-top: 1px solid #ffffff; padding-top: 5px !important;}
      body[yahoo] .mobileSocialTable {width: 100% !important;}
      body[yahoo] .mobileSocialIcon {padding-left: 5px !important;}
   } */

   
</style>


Thanks,

Randal
sharingsunshine
phpList newbie
 
Posts: 2
Joined: 1:28pm, Wed 15 Apr, 2015

Re: Need Style Element Not Stripped Out

Postby duncanc » 9:51pm, Wed 15 Apr, 2015

It is probably simplest not to use the editor and edit the html directly. You can disable the editor on the Manage Plugins page.
duncanc
Moderator
 
Posts: 2440
Joined: 6:34am, Sat 08 May, 2010
Location: London

Re: Need Style Element Not Stripped Out

Postby NYChris » 11:08pm, Wed 15 Apr, 2015

Create a new template.
click the SOURCE button.
Enter your CSS styles.
Make sure you keep your content and tracking placeholders.
Code your html emails using the classes in the styles you just created.
Use the template when sending out your email.
Here's the source of one of my templates:
Code: Select all
<p><style type="text/css">
body { font-size : 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
a { font-size: 11px; color: #ff6600; font-style: normal; font-family: verdana, sans-serif; text-decoration: none; }
a:hover { text-decoration: underline; }
p {text-align: center; font-weight: normal; font-size: 11px; font-style: normal; font-family: 'Times New Roman', sans-serif; text-decoration: none; padding:0px 0px 10px 0px; }
hr {width : 100%; height: 1px; size:1px;}
.caption {font-weight: bold; font-size: 24px; vertical-align: center; text-align: center; color: #000000; font-style: italic; font-family: 'Times New Roman', sans-serif; text-decoration: none; margin:0px; padding:0px;}
.headline {font-weight: bold; font-size: 36px; vertical-align: top; text-align: center; color: #000000; font-family: 'Times New Roman', sans-serif; margin:0px; padding:0px;}
.makeres {vertical-align: bottom; font-size: 20px; text-align: center; color: #000000; font-family: 'Times New Roman', sans-serif; text-decoration: none; margin:0px 0px 0px 0px; padding:0px 0px 10px 0px;}
.makeres a {vertical-align: bottom; font-size: 20px; text-align: center; color: #115019; font-family: 'Times New Roman', sans-serif; text-decoration: underline; margin:0px 0px 0px 0px; padding:0px;}
.offer {font-size: 24px; vertical-align: center; text-align: center; color: #000000; font-family: 'Times New Roman', sans-serif; text-decoration: none; margin:0px; padding:0px 0px 10px 0px;}
.offer2 {font-size: 18px; vertical-align: center; text-align: center; color: #000000; font-family: 'Times New Roman', sans-serif; text-decoration: none; margin:0px; padding:0px 0px 10px 0px;}
.plaintxt {font-size: 20px; text-align: center; color: #000000; font-family: 'Times New Roman', sans-serif; text-decoration: none;}
.serving {vertical-align: top; font-size: 20px; text-align: center; color: #000000; font-style: italic; font-family: 'Times New Roman', sans-serif; text-decoration: none; margin:0px; padding:0px 0px 10px 0px;}
div.emailfooter { font-size : 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
div.emailfooter a { font-size: 11px; color: #ff6600; font-style: normal; font-family: verdana, sans-serif; text-decoration: none; }
</style></p>
<p>[CONTENT][USERTRACK]</p>
NYChris
PL Geek
 
Posts: 59
Joined: 4:55pm, Mon 29 Jun, 2009

Re: Need Style Element Not Stripped Out

Postby sharingsunshine » 12:43am, Thu 16 Apr, 2015

Both of your comments were extremely helpful and thanks for answering my question.
sharingsunshine
phpList newbie
 
Posts: 2
Joined: 1:28pm, Wed 15 Apr, 2015


Return to Questions and Problems after Installing

Who is online

Users browsing this forum: No registered users and 2 guests

cron