jockles.com

Thanks to DemigodOfAgni and La_Temperanza, whose How to insert Gmail emails in your fic and How to Mimic Email Windows this module is built on. Copied and adapted from them: the Gmail layout, headers and Reply buttons, and the generic email window's title bar, header lines, scrolling body, attachments and button bar.

14.1 Chapter Contents

• 14.2 Gmail emails
  • 14.2.1 A Gmail Thread
  • 14.2.2 Email Container
  • 14.2.3 Subject Line
  • 14.2.4 Sender Header
  • 14.2.5 Message Body
  • 14.2.6 Reply Buttons
• 14.3 Generic emails
  • 14.3.1 A Work Email
  • 14.3.2 Email Window
  • 14.3.3 Title Bar
  • 14.3.4 Header Lines
  • 14.3.5 Attachments
  • 14.3.6 The Message
  • 14.3.7 Signature
  • 14.3.8 Button Bar

14.2 Gmail emails

This is for emails in the style of the Gmail app: a subject line, then each email in the thread with the sender, the date, who it was sent to and the message, with Reply buttons at the bottom. The email headers are made with <table> tags, because tables keep everything lined up neatly on AO3.

Before we begin, here's a whole thread. The full HTML is underneath, which you can copy and modify yourself. The rest of this section takes the HTML apart so that you can modify all the individual parts to say exactly what you want.

14.2.1 A Gmail Thread

Sunday dinner Inbox

☆

	Yuna Hollander <YunaHollander@gmail.com>	Jan 25, 5:38 AM
	to me, Ilya ▾	↩ ⋯

Hi both,

Dinner is at 6 on Sunday. Ilya, please don't bring dessert again. We still have half of the last one.

Love, Mom

	Ilya Rozanov <ilya@example.com>	Jan 25, 9:12 AM
	to Yuna, me ▾	↩ ⋯

Yuna, the cake was a gift.

I will bring a smaller one.

SH	Shane Hollander <shane@example.com>	Jan 25, 9:20 AM
	to Mom, Ilya ▾	↩ ⋯

Please do not bring a cake.

We'll see you at 6. I'm bringing the salad.

↩ Reply

↩↩ Reply all

↪ Forward

<div class="mob gm theme-auto">
  <table class="gm-subject">
    <tbody>
      <tr>
        <td class="gm-title">Sunday dinner <span class="gm-label">Inbox</span></td>
        <td class="gm-star">&#9734;</td>
      </tr>
    </tbody>
  </table>
  <div class="gm-msg">
    <table class="gm-head">
      <tbody>
        <tr>
          <td rowspan="2" class="gm-pfp-cell"><span class="gm-pfp"><span class="pfp pfp-yuna"></span></span></td>
          <td class="gm-from">Yuna Hollander <span class="gm-address">&lt;<span class="email pfp-yuna"><span class="hide">YunaHollander@gmail.com</span></span>&gt;</span></td>
          <td class="gm-date">Jan 25, 5:38 AM</td>
        </tr>
        <tr>
          <td class="gm-to">to me, Ilya &#9662;</td>
          <td class="gm-tools">&#8617; &#8943;</td>
        </tr>
      </tbody>
    </table>
    <div class="gm-body">
      <p>Hi both,</p>
      <p>Dinner is at 6 on Sunday. Ilya, please don't bring dessert again. We still have <i>half</i> of the last one.</p>
      <p>Love, Mom</p>
    </div>
  </div>
  <div class="gm-msg">
    <table class="gm-head">
      <tbody>
        <tr>
          <td rowspan="2" class="gm-pfp-cell"><span class="gm-pfp"><span class="pfp"><img src="https://64.media.tumblr.com/2f5204e07f5dc3467a42508584f56c7d/188bbfab996df056-77/s400x600/e139f3e69f9be02470797bbd3505a69cc26def70.pnj" alt="Profile picture of Ilya Rozanov"></span></span></td>
          <td class="gm-from">Ilya Rozanov <span class="gm-address">&lt;ilya@example.com&gt;</span></td>
          <td class="gm-date">Jan 25, 9:12 AM</td>
        </tr>
        <tr>
          <td class="gm-to">to Yuna, me &#9662;</td>
          <td class="gm-tools">&#8617; &#8943;</td>
        </tr>
      </tbody>
    </table>
    <div class="gm-body">
      <p>Yuna, the cake was a gift.</p>
      <p>I will bring a smaller one.</p>
    </div>
  </div>
  <div class="gm-msg">
    <table class="gm-head">
      <tbody>
        <tr>
          <td rowspan="2" class="gm-pfp-cell"><span class="gm-pfp colour5">SH</span></td>
          <td class="gm-from">Shane Hollander <span class="gm-address">&lt;shane@example.com&gt;</span></td>
          <td class="gm-date">Jan 25, 9:20 AM</td>
        </tr>
        <tr>
          <td class="gm-to">to Mom, Ilya &#9662;</td>
          <td class="gm-tools">&#8617; &#8943;</td>
        </tr>
      </tbody>
    </table>
    <div class="gm-body">
      <p>Please do not bring a cake.</p>
      <p>We'll see you at 6. I'm bringing the <b>salad</b>.</p>
    </div>
  </div>
  <div class="gm-footer">
    <table class="gm-actions">
      <tbody>
        <tr>
          <td>&#8617; Reply</td>
          <td>&#8617;&#8617; Reply all</td>
          <td>&#8618; Forward</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

14.2.2 Email Container

An email thread is a container with the module class gm. The subject line, the emails and the buttons all go inside it:

<div class="mob gm theme-auto">
  <p>[the subject line, emails and buttons go here]</p>
</div>

14.2.3 Subject Line

The subject line at the top is a table with a gm-title cell for the subject and a gm-star cell for the star. A gm-label span after the subject adds the little grey label, like "Inbox" - you can leave it out if you like:

<table class="gm-subject">
  <tbody>
    <tr>
      <td class="gm-title">Sunday dinner <span class="gm-label">Inbox</span></td>
      <td class="gm-star">&#9734;</td>
    </tr>
  </tbody>
</table>

If you're only showing the replies further down a thread, you can leave the subject line out completely.

14.2.4 Sender Header

Each email starts with a header, which has two rows. The first row has the sender and the date, and the second row has the "to" line and the little reply and menu symbols. The round picture on the left stretches down across both rows with rowspan="2":

<table class="gm-head">
  <tbody>
    <tr>
      <td rowspan="2" class="gm-pfp-cell"><span class="gm-pfp colour5">SH</span></td>
      <td class="gm-from">Shane Hollander <span class="gm-address">&lt;shane@example.com&gt;</span></td>
      <td class="gm-date">Jan 25, 9:20 AM</td>
    </tr>
    <tr>
      <td class="gm-to">to Mom, Ilya &#9662;</td>
      <td class="gm-tools">&#8617; &#8943;</td>
    </tr>
  </tbody>
</table>

• gm-pfp is the round picture. Without an image it shows initials, and colour1 to colour10 give it a colour. Give each person the same colour every time.
• gm-from is the sender's name, in bold. The gm-address span after it adds their email address in smaller grey text.
• gm-date is the date and time, on the right.
• gm-to is the "to Mom, Ilya" line. Write the names of everyone it went to, with "me" for your point-of-view character - Shane sent this one, so he isn't in it.
• gm-tools holds the reply arrow and the three dots on the right.

For a real picture, put the picture tag inside a pfp span inside the gm-pfp:

	Ilya Rozanov <ilya@example.com>	Jan 25, 9:12 AM
	to Yuna, me ▾	↩ ⋯

<table class="gm-head">
  <tbody>
    <tr>
      <td rowspan="2" class="gm-pfp-cell"><span class="gm-pfp"><span class="pfp"><img src="https://64.media.tumblr.com/2f5204e07f5dc3467a42508584f56c7d/188bbfab996df056-77/s400x600/e139f3e69f9be02470797bbd3505a69cc26def70.pnj" alt="Profile picture of Ilya Rozanov"></span></span></td>
      <td class="gm-from">Ilya Rozanov <span class="gm-address">&lt;ilya@example.com&gt;</span></td>
      <td class="gm-date">Jan 25, 9:12 AM</td>
    </tr>
    <tr>
      <td class="gm-to">to Yuna, me &#9662;</td>
      <td class="gm-tools">&#8617; &#8943;</td>
    </tr>
  </tbody>
</table>

Or use a profile, so the same person has the same picture everywhere, like Yuna's. The email address can come from her profile too, with the address typed inside in a hide span for readers with the workskin off (see Profile Pictures and Character Profiles, in the Core, Themes, and Extras chapter):

<table class="gm-head">
  <tbody>
    <tr>
      <td rowspan="2" class="gm-pfp-cell"><span class="gm-pfp"><span class="pfp pfp-yuna"></span></span></td>
      <td class="gm-from">Yuna Hollander <span class="gm-address">&lt;<span class="email pfp-yuna"><span class="hide">YunaHollander@gmail.com</span></span>&gt;</span></td>
      <td class="gm-date">Jan 25, 5:38 AM</td>
    </tr>
    <tr>
      <td class="gm-to">to me, Ilya &#9662;</td>
      <td class="gm-tools">&#8617; &#8943;</td>
    </tr>
  </tbody>
</table>

The colours for colour1 to colour10 are set in the core CSS and shared with every app, so you can change them there.

14.2.5 Message Body

The text of the email goes in a gm-body, as ordinary paragraphs, and you can use bold, italics, links and line breaks as normal. The header and the body together make one email, wrapped in gm-msg, which also draws the thin line between one email and the next:

<div class="gm-msg">
  <table class="gm-head">
    <tbody>
      <tr>
        <td rowspan="2" class="gm-pfp-cell"><span class="gm-pfp colour5">SH</span></td>
        <td class="gm-from">Shane Hollander <span class="gm-address">&lt;shane@example.com&gt;</span></td>
        <td class="gm-date">Jan 25, 9:20 AM</td>
      </tr>
      <tr>
        <td class="gm-to">to Mom, Ilya &#9662;</td>
        <td class="gm-tools">&#8617; &#8943;</td>
      </tr>
    </tbody>
  </table>
  <div class="gm-body">
    <p>Please do not bring a cake.</p>
    <p>We'll see you at 6. I'm bringing the <b>salad</b>.</p>
  </div>
</div>

14.2.6 Reply Buttons

For the Reply, Reply all and Forward buttons, use a gm-footer around a table with the class gm-actions. If the email only went to one person, leave out the "Reply all" button in the middle:

<div class="gm-footer">
  <table class="gm-actions">
    <tbody>
      <tr>
        <td>&#8617; Reply</td>
        <td>&#8617;&#8617; Reply all</td>
        <td>&#8618; Forward</td>
      </tr>
    </tbody>
  </table>
</div>

The buttons go at the very end, after the last email in the thread.

14.3 Generic emails

For emails that aren't from Gmail - a work account, a school inbox, or just a plain email program - there's a simple email window. It has a dark title bar, the From, To and Subject lines, the message, and a Reply, Forward and Delete bar at the bottom. It's a good one to use if you don't want it to look like any particular brand. Here's one with everything in it:

14.3.1 A Work Email

<div class="mob mail theme-auto">
  <p class="mail-titlebar"><span>_ X</span><span class="hide"> - </span>Charity gala - forms to sign</p>
  <p class="mail-field"><b>From:</b> <span class="email pfp-yuna"><span class="hide">Yuna@HollanderHockey.com</span></span></p>
  <p class="mail-field"><b>Subject:</b> Charity gala - forms to sign</p>
  <p class="mail-field"><b>To:</b> shane@example.com<br><b>Cc:</b> ilya@example.com</p>
  <p class="mail-field"><b>Attached:</b> <span class="mail-attachment doc">gala-forms.doc (9 KB)</span> <span class="mail-attachment img">headshot.gif (70 KB)</span> <span class="mail-attachment">last-year.zip (5 MB)</span></p>
  <div class="mail-body">
    <p>Hi Shane,</p>
    <p>Please sign the forms before Friday, and send me a headshot that isn't the one where you're asleep on the plane.</p>
    <p class="mail-signature">Yuna Hollander<br>Hollander Hockey Management</p>
  </div>
  <p class="mail-buttons"><span>Reply</span><span class="hide"> - </span><span>Forward</span><span class="hide"> - </span><span>Delete</span></p>
</div>

14.3.2 Email Window

The window is a container with the module class mail. The title bar, the header lines, the body and the button bar all go inside it:

<div class="mob mail theme-auto">
  [title bar, header lines, body and button bar go here]
</div>

14.3.3 Title Bar

The dark title bar is a paragraph with mail-titlebar. The little minimise and close marks go in a span first, so they sit on the right, and then the title:

<p class="mail-titlebar"><span>_ X</span><span class="hide"> - </span>Charity gala - forms to sign</p>

You can change the title to anything, like the subject line. If it's too long for the window, it gets cut off rather than wrapping onto a second line.

14.3.4 Header Lines

For the From, To, Cc and Subject lines, use a paragraph for each one with mail-field, and put the label in <b> so all the labels line up. The From address here comes from Yuna's profile, with the address typed inside in a hide span for readers with the workskin off - or just type the address in:

<p class="mail-field"><b>From:</b> <span class="email pfp-yuna"><span class="hide">Yuna@HollanderHockey.com</span></span></p>
<p class="mail-field"><b>Subject:</b> Charity gala - forms to sign</p>

To put To and Cc in the same box, separate them with a line break:

<p class="mail-field"><b>To:</b> shane@example.com<br><b>Cc:</b> ilya@example.com</p>

14.3.5 Attachments

Attachments go in a header line, as spans with mail-attachment. Add doc for a document icon or img for a picture icon - with neither, you get a paperclip:

<p class="mail-field"><b>Attached:</b> <span class="mail-attachment doc">gala-forms.doc (9 KB)</span> <span class="mail-attachment img">headshot.gif (70 KB)</span> <span class="mail-attachment">last-year.zip (5 MB)</span></p>

14.3.6 The Message

The message itself is your paragraphs inside a div with mail-body:

<div class="mail-body">
  <p>Hi Shane,</p>
  <p>Please sign the forms before Friday, and send me a headshot that isn't the one where you're asleep on the plane.</p>
  <p class="mail-signature">Yuna Hollander<br>Hollander Hockey Management</p>
</div>

If the email is really long, the body stops growing and scrolls, so the window stays about the height of a phone.

14.3.7 Signature

For a signature under the message, use mail-signature as the last paragraph in the body. It's smaller and grey, with a thin line above it:

<p class="mail-signature">Yuna Hollander<br>Hollander Hockey Management</p>

14.3.8 Button Bar

To finish off the window, add the bar of buttons with mail-buttons. Each button is a span:

<p class="mail-buttons"><span>Reply</span><span class="hide"> - </span><span>Forward</span><span class="hide"> - </span><span>Delete</span></p>