bricky
8/29/2017 - 11:38 PM

banner-changes.md

banner-changes.md
content_copyfile_download
  • Rendered
  • Source

Autopilot Email Changes:

CSS

Add this code to the CSS, right after <style>

span.preheader {display: none !important; }

Body Changes

Change the background color of the body to 'Space' as the fallback:

<body class="body" style="padding:0 !important; margin:0 !important; display:block !important; min-width:100% !important; width:100% !important; background:#141E23; -webkit-text-size-adjust:none">

Immediately after the opening <body ....> tag, add a new <span> element, this is the preheader text.
<span class="preheader">PREHEADER TEXT GOES HERE</span>

Next, add a new <div> element, this is what will hold the background image, and falls back to 'Space' if it can't.
<div style="background-color:#141E23;">
NOTE: You need to add a closing div tag, </div> that matches this, and encloses the entire email.

  1. Scroll to the bottom of the HTML
  2. Find the closing body tag: </body>
  3. On the line above the closing body tag, add: </div>

On an empty line after the new <div> from the previous step, add the following code:
NOTE: You need to change the src, located in the middle of the snippet. It should link to the URL of the space image.
I made an image here: http://i.imgur.com/KQ4mzuV.png but should probably get a better version from Ray and upload it into the .zip file. If you do this, the URL will be "images/FILE_NAME_OF_PICTURE"

<!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="URL TO THE IMAGE" color="#141E23"/>
  </v:background>
  <![endif]-->

Find the first <table> tag under the code you just pasted and change the bgcolor from #ffffff to #000000

Two lines down from the first <table>, find the first <td...>.
It should already have align="center" valign="top". Change it to add the background image's URL:
<td align="center" valign="top" background="URL TO THE IMAGE">