Archive of Our Own ^beta

It's simple, but I wanted to put it out there for those who might want to use it but don't have the time or ability to create this skin. I haven't worked with CSS in years so there might be much simpler ways to do some of the things I did, but I got to the point that I wanted to get to.

The image header and the "View this email in your browser" are only really for promotional emails, but since that's what I created it for, I wanted to leave them in the tutorial. They're easy enough to remove. To remove them, remove from the code:

<p></p><center>
<p><br />
<span class="arrowdown"><u>View this email in your browser</u></span></p></center>
<p><img class="imgheader" !-- Edit banner image here, replace url with your own -- src="https://previews.123rf.com/images/maxborovkov/maxborovkov1809/maxborovkov180900100/107813015-big-sale-banner-promotion-banner-with-colorful-maple-leaves-for-shopping-vector-background-.jpg" /></p>

I haven't created it, but if anyone wants a version with attachments or a "sent" version let me know. It'll be easy enough to add just a lil bit more to this to get those done, but if no one is going to use them, I'm not going to bother. I can also try my hand at creating a replica of the emailing feature in Gmail—the little black box that pops up in the bottom right hand corner—if anyone is interested.

<div class="headerbox">
<p><span class="emailsubject">Email Subject Goes Here</span>

<span class="inbox">Inbox ☓</span>
<img class="iconstop" src="https://i.imgur.com/fuzsLiq.png" /><br />

<br />
</p>
<p>
<img class="emailicon" !-- Edit icon image here, replace url with your own -- src="https://ssl.gstatic.com/ui/v1/icons/mail/profile_mask_2x.png" height="40px" width="40px" />
  </p>
<p><span class="name">Email Sender</span> <span class="mail">˂[email protected]˃</span>
<img class="iconsbot" src="https://i.imgur.com/DrDPOxp.jpg" /><span class="emailtime">11:42 AM (3 hours ago)</span><br />
<span class="mail">to me</span><span class="arrowdown">▼</span></p>

<p></p><center>
<p><br />
<span class="arrowdown"><u>View this email in your browser</u></span></p></center>
<p><img class="imgheader" !-- Edit banner image here, replace url with your own -- src="https://previews.123rf.com/images/maxborovkov/maxborovkov1809/maxborovkov180900100/107813015-big-sale-banner-promotion-banner-with-colorful-maple-leaves-for-shopping-vector-background-.jpg" /></p>

<p><span class="emailbody"><b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
</span></p></div> 

#workskin .headerbox {
  width: 84%;
  padding: 2px;
  background-color: #FFFFFF;
  text-align: left;
  margin: auto;
}

#workskin .emailsubject {
  color: #202124;
  font-family: 'Google Sans',helvetica;
  font-size: 22px;
  margin-left: 50px;
}

#workskin .inbox {
  margin: 0 0 8px;
  border-radius: 4px 4px 4px 4px;
  padding: 0 2.6666656px 0 4px;
  background: #cccccc;
  color: #666666;
  position: relative;
  cursor: pointer;
}

#workskin .emailicon {
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 5px;
}

#workskin .name {
  color: #000000;
  font-family: arial;
  font-weight: bold;
}

#workskin .mail {
  color: #5f6368;
  font-family: arial;
}

#workskin .emailtime {
  color: #5f6368;
  font-family: arial;
  float: right;
  margin-right: auto;
}

#workskin .tome {
  color: #5f6368;
  font-family: arial;
}

#workskin .arrowdown {
  color: #5f6368;
  font-size: 12px;
  font-family: arial;
  cursor: pointer;
}

#workskin .iconstop {
  float: right;
  margin-right: auto;
  max-width: 75px;
  cursor: pointer;
}

#workskin .iconsbot {
  float: right;
  max-width: 135px;
  cursor: pointer;
}

#workskin .imgheader {
  width: 841px;
  max-width: 100%;
  margin-left: 50px;
}

#workskin .emailbody {
  display: block;
  font-family: arial;
  width: 841px;
  max-width: 100%;
  margin-left: 50px;
}