Work Text:
» Preview
| Taking work break Inbox | ☆ | |
|---|---|---|
 |
John Smith <[email protected]> Jan 25, 5:38AM to me, Karen ▾ |
➦ ··· |
 |
Karen Lady <[email protected]> Jan 25, 7:00AM to me, John ▾ |
➦ ··· |
|---|
 |
me <[email protected]> Jan 25, 7:23AM to John, Karen ▾ |
➦ ··· |
|---|
Before you go on devouring everything I've written here, here's a quick refresher on how to make workskins: Go to your dashboard, and click on the button "Skins". Click "My Work Skin". Click "Create Work Skin". Additionally you can add any bits of code to an existing workskin if you wish :)
Unfortunately for us I was very specific for some values, particular things that are related to measurements. This was mostly trial and error on other coding sites and Ao3 itself to determine the best look. You can always adjust these values to however you see fit, as in you want to have smaller text or a larger background.
- x px - this is the number of pixels you want something to exactly be, no matter the size of the device's screen. Best for background images
- x % - this is how big the object is compared to the size of the screen. If it's 80%, the object is 80% of the total screen's width, or whatever container it's in
- x em - this is how big something is relative to the font size. If it's 1em, then it's the same size as the font, if it's 2em, then it's the twice the font size
Sometimes emails are the bane of our existence. Not for fic, though, no. They are a beautiful mechanism for storytelling. So I tried my best to make an email skin..
» CSS
#workskin .phone {
width: 300px;
margin: auto;
padding: 10px;
display: table;
background-color: white;
font-size: 0.75em;
color: black;
border: 10px solid #F2F2F2;
border-radius: 15px;
font-family: verdana;
}
#workskin .table {
width: 100%;
}
#workskin .grey {
text-align: right;
font-size: 0.7em;
color: grey;
}
#workskin .label {
border: 1px solid grey;
border-radius: 4px;
color: grey;
padding: 3px;
font-size: 0.5em;
}
#workskin .subject {
font-size: 1.5em;
text-align: left;
}
#workskin .icon {
border-radius: 50%;
width: 35px;
height: 35px;
overflow: hidden;
z-index: 1;
top: 8px;
margin-left: -5px;
display: block;
}
#workskin .message {
border-bottom: 1px solid grey;
margin-bottom: 6px;
}
#workskin .footer {
padding-top: 6px;
}
#workskin .buttons {
border: 1px solid grey;
border-radius: 4px;
color: grey;
padding: 3px;
text-align: center;
}
#workskin .flip {
display: inline-block;
transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
}
#workskin .offset {
letter-spacing: -0.8em;
}
» HTML
<div class="phone">
<div>
<table width="100%">
<tr>
<th colspan="2" class="subject">Email Title <span class="label">Label</span></th>
<th>☆</th>
</tr>
<tr>
<th width="15%"><img class="icon" src="https://i.pinimg.com/564x/ba/92/7f/ba927ff34cd961ce2c184d47e8ead9f6.jpg"/></th>
<th width="65%" align="left">John Smith <span class="grey"><\email address> Jan 25, 2024, 5:38AM <br />to me, Karen ▾</span></th>
<th width="20%"><span class="flip">➦</span> ···<br /> </th>
</tr>
</table>
</div>
<div class="message">
<p>Email content. Multi-lined<br />with breaks</p>
<p>yada yadda yadda</p>
</div>
<div class="footer">
<table width="100%">
<tr>
<td class="buttons" width="33%"><span class="flip">➦</span> Reply</td>
<td class="buttons" width="33%"><span class="offset">➦</span>➦ Reply to All</td>
<td class="buttons" width="33%">➦ Forward</td>
</tr>
</table>
</div>
</div>
» Tips and Tricks
Obviously you are free to change things however you see fit. You can change images by adding image addresses into the <img> tags, but MAKE SURE the image is roughly 1:1 ratio; it will get squashed, otherwise. You also have the option to include email addresses or dates* in the <span class="grey"> tags, that's entirely up to you.
To include the starting message, you have the option to include the email title or forego it entirely. This is what it that separate bit looks like on its own, so feel free to delete it if required:
<div class="phone">
<div>
<table width="100%">
<tr>
<th colspan="2" class="subject">Email Title <span class="label">Label</span></th>
<th>☆</th> </tr>
<tr>
<th width="15%"><img class="icon" src="https://i.pinimg.com/564x/ba/92/7f/ba927ff34cd961ce2c184d47e8ead9f6.jpg"/></th>
<th width="65%" align="left">John Smith <span class="grey"><\email address> Jan 25, 2024, 5:38AM <br />to me, Karen ▾</span></th>
<th width="20%"><span class="flip">➦</span> ···<br /> </th>
</tr>
</table>
</div>
</div>
Email Title Label ☆ John Smith <\email address> Jan 25, 2024, 5:38AM
to me, Karen ▾↩ ···
To add many many more messages, just copy this section and paste it in as many times as needed:
<div class="phone">
<div>
<table width="100%">
<tr>
<th width="15%"><img class="icon" src="https://i.pinimg.com/564x/ba/92/7f/ba927ff34cd961ce2c184d47e8ead9f6.jpg"/></th>
<th width="65%" align="left">John Smith <span class="grey"><\email address> Jan 25, 2024, 5:38AM <br />to me ▾</span></th>
<th width="20%"><span class="flip">➦</span> ···<br /> </th>
</tr>
</table>
</div>
<div class="message">
<p>Email content. Multi-lined<br />with breaks</p>
<p>and paragraphs.</p>
<p>Can also use <b>bold</b>, <i>italics</i>,</p>
<hr />
<p>line breaks</p>
<hr />
<p><a href="abc">links</a> (don't actually click this link), among others</p>
</div>
</div>
John Smith <\email address> Jan 25, 2024, 5:38AM
to me ▾↩ ···
Most emails have "Reply" and "Forward" buttons, but with emails addressed to larger groups of people you can add the extra "Reply to All" button by adding an extra cell to the table and changing the width of the cells (50% for two buttons, 33% for three buttons):
<div class="phone"> <div class="footer">
<table width="100%">
<tr>
<td width="33%" class="buttons"><span class="flip">➦</span> Reply</td>
<td width="33%" class="buttons"><span class="offset">➦</span>➦ Reply to All</td>
<td width="33%" class="buttons">➦ Forward</td>
</tr>
</table>
</div>
</div>
➦ Reply ➦➦ Reply to All ➦ Forward
<div class="phone"> <div class="footer">
<table width="100%">
<tr>
<td width="50%" class="buttons"><span class="flip">➦</span> Reply</td>
<td width="50%" class="buttons">➦ Forward</td>
</tr>
</table>
</div>
</div>
➦ Reply ➦ Forward
» Notes:
This is like. super complex and hard to follow, so I'm just hoping I've written everything out correctly so you can copy them over with little to no trouble.
Wishful thinking for 'Gmail Emails':
- Ideas for the future:
- I want to streamline the design. Right now it seems clunky and weird, but hopefully I can workshop it enough to make it look better.
- *I want to include hover textboxes; so if you were to hover/click on the name of the email sender/replier, you could see the email of that person. I'm not quite sure how to do that without using the <span title=hover text>normal text</span> method (this only works on desktop)
- I want to be able to integrate different site skins for this too (like adding dark mode, or making the whole thing easier to read for accessibility reasons) right now I don't have the energy (posting this at 1am lol)
- I want to know if the formatting remains the same if the fic is downloaded and read offline; while there aren't many online resources like links and images, I have a feeling that it'll take time to load or end up formatting weirdly. Do let me know though!
Anyway, if y'all have any requests, I'd love to hear them. If you also have any questions, comment them below or head over to @demigod-of-the-agni if you want to ask me directly :)