Default System Emails With CSS

John2360 · September 11, 2016

Hello,

I was wondering if there was a way I could change all the default emails to have a custom theme/template. I tried just copying and pasting the following code into the email that sends when a pilot joins but it removed all the css. Here is the code I am trying to use:

<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
 /* -------------------------------------
	 GLOBAL RESETS
 ------------------------------------- */
 img {
 border: none;
 -ms-interpolation-mode: bicubic;
 max-width: 100%; }
 body {
 background-color: #f6f6f6;
 font-family: sans-serif;
 -webkit-font-smoothing: antialiased;
 font-size: 14px;
 line-height: 1.4;
 margin: 0;
 padding: 0;
 -ms-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%; }
 table {
 border-collapse: separate;
 mso-table-lspace: 0pt;
 mso-table-rspace: 0pt;
 width: 100%; }
 table td {
	 font-family: sans-serif;
	 font-size: 14px;
	 vertical-align: top; }
 /* -------------------------------------
	 BODY & CONTAINER
 ------------------------------------- */
 .body {
 background-color: #f6f6f6;
 width: 100%; }
 /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
 .container {
 display: block;
 Margin: 0 auto !important;
 /* makes it centered */
 max-width: 580px;
 padding: 10px;
 width: auto !important;
 width: 580px; }
 /* This should also be a block element, so that it will fill 100% of the .container */
 .content {
 box-sizing: border-box;
 display: block;
 Margin: 0 auto;
 max-width: 580px;
 padding: 10px; }
 /* -------------------------------------
	 HEADER, FOOTER, MAIN
 ------------------------------------- */
 .main {
 background: #fff;
 border-radius: 3px;
 width: 100%; }
 .wrapper {
 box-sizing: border-box;
 padding: 20px; }
 .footer {
 clear: both;
 padding-top: 10px;
 text-align: center;
 width: 100%; }
 .footer td,
 .footer p,
 .footer span,
 .footer a {
	 color: #999999;
	 font-size: 12px;
	 text-align: center; }
 /* -------------------------------------
	 TYPOGRAPHY
 ------------------------------------- */
 h1,
 h2,
 h3,
 h4 {
 color: #000000;
 font-family: sans-serif;
 font-weight: 400;
 line-height: 1.4;
 margin: 0;
 Margin-bottom: 30px; }
 h1 {
 font-size: 35px;
 font-weight: 300;
 text-align: center;
 text-transform: capitalize; }
 p,
 ul,
 ol {
 font-family: sans-serif;
 font-size: 14px;
 font-weight: normal;
 margin: 0;
 Margin-bottom: 15px; }
 p li,
 ul li,
 ol li {
	 list-style-position: inside;
	 margin-left: 5px; }
 a {
 color: #3498db;
 text-decoration: underline; }
 /* -------------------------------------
	 BUTTONS
 ------------------------------------- */
 .btn {
 box-sizing: border-box;
 width: 100%; }
 .btn > tbody > tr > td {
	 padding-bottom: 15px; }
 .btn table {
	 width: auto; }
 .btn table td {
	 background-color: #ffffff;
	 border-radius: 5px;
	 text-align: center; }
 .btn a {
	 background-color: #ffffff;
	 border: solid 1px #3498db;
	 border-radius: 5px;
	 box-sizing: border-box;
	 color: #3498db;
	 cursor: pointer;
	 display: inline-block;
	 font-size: 14px;
	 font-weight: bold;
	 margin: 0;
	 padding: 12px 25px;
	 text-decoration: none;
	 text-transform: capitalize; }
 .btn-primary table td {
 background-color: #3498db; }
 .btn-primary a {
 background-color: #3498db;
 border-color: #3498db;
 color: #ffffff; }
 /* -------------------------------------
	 OTHER STYLES THAT MIGHT BE USEFUL
 ------------------------------------- */
 .last {
 margin-bottom: 0; }
 .first {
 margin-top: 0; }
 .align-center {
 text-align: center; }
 .align-right {
 text-align: right; }
 .align-left {
 text-align: left; }
 .clear {
 clear: both; }
 .mt0 {
 margin-top: 0; }
 .mb0 {
 margin-bottom: 0; }
 .preheader {
 color: transparent;
 display: none;
 height: 0;
 max-height: 0;
 max-width: 0;
 opacity: 0;
 overflow: hidden;
 mso-hide: all;
 visibility: hidden;
 width: 0; }
 .powered-by a {
 text-decoration: none; }
 hr {
 border: 0;
 border-bottom: 1px solid #f6f6f6;
 Margin: 20px 0; }
 /* -------------------------------------
	 RESPONSIVE AND MOBILE FRIENDLY STYLES
 ------------------------------------- */
 @media only screen and (max-width: 620px) {
 table[class=body] h1 {
	 font-size: 28px !important;
	 margin-bottom: 10px !important; }
 table[class=body] p,
 table[class=body] ul,
 table[class=body] ol,
 table[class=body] td,
 table[class=body] span,
 table[class=body] a {
	 font-size: 16px !important; }
 table[class=body] .wrapper,
 table[class=body] .article {
	 padding: 10px !important; }
 table[class=body] .content {
	 padding: 0 !important; }
 table[class=body] .container {
	 padding: 0 !important;
	 width: 100% !important; }
 table[class=body] .main {
	 border-left-width: 0 !important;
	 border-radius: 0 !important;
	 border-right-width: 0 !important; }
 table[class=body] .btn table {
	 width: 100% !important; }
 table[class=body] .btn a {
	 width: 100% !important; }
 table[class=body] .img-responsive {
	 height: auto !important;
	 max-width: 100% !important;
	 width: auto !important; }}
 /* -------------------------------------
	 PRESERVE THESE STYLES IN THE HEAD
 ------------------------------------- */
 @media all {
 .ExternalClass {
	 width: 100%; }
 .ExternalClass,
 .ExternalClass p,
 .ExternalClass span,
 .ExternalClass font,
 .ExternalClass td,
 .ExternalClass div {
	 line-height: 100%; }
 .apple-link a {
	 color: inherit !important;
	 font-family: inherit !important;
	 font-size: inherit !important;
	 font-weight: inherit !important;
	 line-height: inherit !important;
	 text-decoration: none !important; }
 .btn-primary table td:hover {
	 background-color: #34495e !important; }
 .btn-primary a:hover {
	 background-color: #34495e !important;
	 border-color: #34495e !important; } }
</style>
</head>
<body class="">
<table border="0" cellpadding="0" cellspacing="0" class="body">
 <tr>
 <td> </td>
 <td class="container">
	 <div class="content">
	 <!-- START CENTERED WHITE CONTAINER -->
	 <span class="preheader">Application Submitted</span>
	 <table class="main">
		 <!-- START MAIN CONTENT AREA -->
		 <tr>
		 <td class="wrapper">
			 <table border="0" cellpadding="0" cellspacing="0">
			 <tr>
				 <td>
				 <p>Dear <?php echo $pilot->firstname.' '.$pilot->lastname ?>,</p>
				 <p>Your application has been <span class="label label-info">submitted.</span> A staff member will be reviewing your application soon. If it meets our criterial it will be accept and you will be emailed with more information. If you have any questions or concerns please feel free to contact one of our staff member.</p>
				 <div class="row"><div class="col-lg-8"><p>Thank you very much,<br> The Admin Team</p></div><div class="col-lg-4"><div align="right"><img src="https://s5.postimg.org/afs0z99ef/star.png" width="50" height="53"/></div></div></div>
				 </td>
			 </tr>
			 </table>
		 </td>
		 </tr>
		 <!-- END MAIN CONTENT AREA -->
		 </table>
	 <!-- START FOOTER -->
	 <div class="footer">
		 <table border="0" cellpadding="0" cellspacing="0">
		 <tr>
			 <td class="content-block">
			 <span class="apple-link">Allowing you to fly where you want when you want how you want.</span>
			 </td>
		 </tr>
		 <tr>
			 <td class="content-block powered-by">
			 Star Alliance Virtual
			 </td>
		 </tr>
		 <tr>
			 <td class="content-block powered-by">
			 <a href="http://sta-va.com">sta-va.com</a>
			 </td>
		 </tr>
		 </table>
	 </div>
	 <!-- END FOOTER -->

<!-- END CENTERED WHITE CONTAINER --></div>
 </td>
 <td> </td>
 </tr>
</table>
</body>

Any ideas?

Thank you very much,

John

Edited September 11, 2016 by John2360

Sign In

Default System Emails With CSS

Recommended Posts

John2360

Link to comment

Share on other sites

Join the conversation