Work Text:
Table of contents
Example work
Tales of Our Own beta
Hi, cookie_monster! Post Log Out
And They Were Roommates
the_grouch
Summary:
Everyone else already sees it but them. They finally see it too.
Chapter 2: Paperclips, Please
Notes:
Remember this is REAL MUPPET FICTION! Don't like, don't read.
Bert was upset.
"Bert," Ernie said. "I didn't mean it when I said I thought your paperclip collection was silly."
But Bert didn't believe him.
He was right not to believe Ernie. Paperclips are silly. Collecting is also silly, because people always make sure their collections are in perfect condition. Wrapped up in plastic so they can't get dirty. Why wouldn't you want your things to get dirty! Dirt is great.
Ernie didn't think dirt was great, though. Ernie just thought the paperclips were silly.
Bert looked at him angrily. Ernie was sad he made Bert mad. "Let me make it up to you," he said. "Oh, I know! How about we give your paperclip collection a play date with my rubber duckie?"
"That doesn't even make sense," Bert said.
"Well, sure it does! You bring your collection, and I bring my rubber duckie, and they hang out!"
"Ernie, wouldn't that just be us hanging out?"
"Oh, Bert, are you asking me to hang out with you? Why didn't you say so? Yes, of course I'll hang out with you!"
Bert sighed. Secretly, he was looking forward to hanging out with Ernie.
|
|
small_bird, slimeeeyyy, count1234, MrSnuffle, and cadabby, as well as 3 guests left kudos on this work! |
Step 1: CSS - Creating the work skin
Using this guide to creating and using custom work skins, create a new workskin and paste the following CSS code into it.
CSS code
#workskin .note {
content: "***************TOP BAR***************";
}#workskin .note {
content: "***************TOP BAR: To3 Logo***************";
}#workskin .fakeheader-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: -1em;
}#workskin .fakeheader {
display: flex;
flex: 1 1 320px;
align-items: center;
color: #0a989a;
font-size: 1.75em;
margin: 0;
}#workskin .fakeheader .logo {
margin-right: 5px;
}#workskin .fakeheader sup {
font-size: 0.6em;
position: relative;
top: -0.5em;
}#workskin .note {
content: "***************TOP BAR: User Nav***************";
}#workskin .fakeheader-user {
display: flex;
flex: 1 1 320px;
justify-content: flex-end;
align-items: center;
}#workskin .fakeheader-user img {
height: 30px;
margin-right: 5px;
}#workskin .fakeheader-user p {
margin: 0;
}#workskin .fakeuser-text {
margin: 0 3px;
padding: 5px 10px;
font-size: 0.95em;
}#workskin .fakeuser-text:hover {
background-color: #dddddd;
color: #0a989a;
border-radius: 5px;
}#workskin .note {
content: "***************TOP BAR: General Nav***************";
}#workskin .fakedivider {
position: relative;
height: 30px;
width: 100%;
margin-bottom: .5em;
}#workskin .fakedivider-bg {
height: 30px;
width: 100%;
background-image: url('https://i.ibb.co/YBDDz6gB/to3dividercenter.png');
background-repeat: repeat-x;
background-position: center;
background-size: auto;
}#workskin .fakenav-container {
position: absolute;
top: 50%;
left: 10px;
right: 10px;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
align-items: center;
}#workskin .fakenav {
display: flex;
margin: 0 20px;
font-size: 0.95em;
}#workskin .fakenav-text a {
border-bottom: none;
color: white;
padding: 7px 10px;
}#workskin .fakenav-text a:hover {
background-color: #dddddd;
color: #111111;
}#workskin .fakesearch {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
align-items: center;
}#workskin .fakesearchbox {
width: 150px;
height: 23px;
border-radius: 15px;
background-color: #ffffff;
margin-right: 10px;
}#workskin .fakesearchbox:hover {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}#workskin .fakesearchbutton {
height: 23px;
border-radius: 4px;
padding: 2px 10px 1px 10px;
background-color: #ffffff;
margin-right: 5px;
font-size: 0.95em;
}#workskin .fakesearchbutton:hover {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
color: #0a989a;
}#workskin .note {
content: "***************TOP ACTIONS***************";
}#workskin .actionbar {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
margin-bottom: -1.3em;
}#workskin .actionbar p {
text-align: right;
}#workskin .actionbar .actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
padding: 0;
margin: 0;
}#workskin .actionbar .actions a {
font-size: 0.93em;
display: inline-block;
margin-left: 0.2em;
margin-bottom: 0.4em;
}#workskin .actions a:hover {
color: #0a989a;
}#workskin .note {
content: "***************METADATA BOX***************";
}#workskin .wrapper {
font-size: 0.91em;
padding: 15px 10px;
}#workskin dl {
display: block;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-top: 0;
padding-bottom: 0;
}#workskin .meta dt {
min-width: 10.5em;
width: 25%;
float: left;
clear: left;
font-weight: normal;
}#workskin .meta dd {
min-width: 72.5%;
float: left;
margin: 0 0 0.643em;
}#workskin .faketaglist {
display: inline;
padding: 0;
margin: 0;
}#workskin .faketaglist li {
display: inline;
padding: 0 0.4em 0 0;
margin: 0;
}#workskin .faketaglist li:after {
content: ", ";
}#workskin a.tag:hover {
background-color: #0a989a;
}#workskin .note {
content: "***************FIC***************";
}#workskin .fakefic-header h2 {
margin-top: 0.75em;
}#workskin .fakefic-header h3.summary-title {
border-bottom: 1px solid;
font-family: Georgia, serif;
font-weight: 400;
margin: 0 0 .537em 0;
font-size: 1.35em;
}#workskin .fakefic-header .summary {
margin: .64em;
}#workskin .fakefic-header .summary p {
line-height: 1.5;
padding: 0;
}#workskin .fakefic-header .byline {
margin-top: -1.5em;
}#workskin a.chapter-title {
border-bottom: 1px solid;
}#workskin .fakefic p {
font-size: 1em;
}#workskin .note {
content: "***************KUDOS***************";
}#workskin p.kudos {
background: url("/images/imageset.png") no-repeat -111px -580px;
padding: 0.5em 0.5em 0.5em 20px;
margin: 1em 0;
min-height: 50px;
}#workskin p.kudoslist {
line-height: 1.4em;
font-size: 0.92em;
}#workskin p.kudos.fakekudos {
background: url("https://i.ibb.co/sp8h40pk/to3images.png") no-repeat -111px -580px;
}#workskin .note {
content: "***************COMMENTS***************";
}#workskin .commentactions {
padding-right: 0.3em;
margin: 1.125em auto 0.25em;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}#workskin .commentactions a {
font-size: 0.93em;
display: inline-block;
margin-left: 0.4em;
}#workskin li.fakecomment {
position: relative;
border: 1px solid #ddd;
overflow: visible;
text-align: start;
list-style-type: none;
margin-block-start: 0;
margin-inline-end: 0;
margin-block-end: 0;
margin-inline-start: 0;
}#workskin .fakecomment p {
font-size: 0.93em;
padding: 0 8px;
margin: 1.286em auto 1em;
}#workskin .fakecomment ol {
margin: 0;
padding: 0;
}#workskin a.fakeguestcomment {
border-bottom: none;
}#workskin a.fakeguestcomment:hover {
color: inherit;
}#workskin .fakecomment:after,
#workskin .fakecomment h4.byline:after {
content: " ";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}#workskin .fakecomment li {
display: list-item;
list-style-type: none;
}#workskin p.icon {
display: block;
margin: -1.7em 0.5625em 0.5625em 0;
padding: 0;
float: left;
border-bottom: 5px solid #ddd;
}#workskin .fakecomment-header {
display: flex;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
vertical-align: baseline;
list-style: none;
padding: 0.25em 0.25em 0.25em 108px;
margin: 0 auto -0.25em;
font-weight: normal;
justify-content: space-between;
flex-wrap: wrap;
}#workskin .even .fakecomment-header {
background: rgba(0, 0, 0, 0.065);
}#workskin .odd .fakecomment-header {
background: rgba(0, 0, 0, 0.125);
}#workskin .fakecomment .datetime {
float: right;
font-family: monospace;
padding-top: 2px;
font-size: 0.93em;
}#workskin .fakecomment .edited-datetime {
font-family: monospace;
padding-top: 2px;
font-size: 0.93em;
margin-bottom: -0.5em;
}#workskin .fakecomment .role {
font-weight: bold;
}#workskin .thread .thread {
margin-left: 3%;
margin-right: 0;
}#workskin .thread .even {
background: rgba(0, 0, 0, 0.08);
margin: 0;
}#workskin fieldset.comments,
#workskin .fakecomment .commenttext {
background: transparent;
border: none;
box-shadow: none;
}#workskin .fakecomment .commenttext {
margin-bottom: 1em;
margin-top: 1em;
min-height: 4.5em;
}#workskin li.commentbreak {
margin-block-start: -1.5em;
}
Save it, and now you'll be able to select it as a work skin for any new works you post!
Step 2: HTML - Creating the work!
Now, copy and paste the below HTML into whatever word processor you're using.
- I strongly, strongly suggest using a code editor like VSCode, or an online editor like HTMLCodeEditor, because lots of word processors will automatically make your straight quotes ("") into curly quotes (“”) which will mess up your code. They're also just nicer to work in since they're often color-coded and highlight errors!
- Or you can edit directly in the AO3 HTML editor if you're a freak like that.
If the full code looks daunting, I'll also be pasting each subsection of the code again as I go through piece by piece, with explanations along the way!
Also, the customizable parts of the code will be in brackets [like this] for ease of ctrl+F-ing, just to make sure you don't miss anything.
Full HTML code
<div class="fakeheader-wrapper">
<h1 class="fakeheader"><img class="logo" src="https://i.ibb.co/RkYxbPrj/to3logo.png" alt="Tales of Our Own" /> Tales of Our Own<sup><em> alpha</em></sup></h1>
<div class="fakeheader-user"><p>
<img class="fakeheader-user" src="https://i.ibb.co/Myy6CM49/to3anon.png" alt="[<- change this link to change the user image]" />
</p><p><span class="fakeuser-text">Hi, [username]!</span> <span class="fakeuser-text">Post</span> <span class="fakeuser-text">Log Out</span></p></div>
</div><div class="fakedivider">
<div class="fakedivider-bg"><p> </p></div>
<div class="fakenav-container">
<div class="fakenav"><p><span class="fakenav-text"> <a rel="nofollow">Fandoms</a> </span> <span class="fakenav-text"> <a rel="nofollow">Browse</a> </span> <span class="fakenav-text"> <a rel="nofollow">Search</a> </span> <span class="fakenav-text"> <a rel="nofollow">About</a> </span></p></div>
<div class="fakesearch">
<div class="fakesearchbox"><p> </p></div>
<p class="fakesearchbutton">Search</p></div>
</div>
</div><div class="actionbar">
<div class="actions"><p><a rel="nofollow">Chapter by Chapter</a>
<a rel="nofollow">Entire Work</a>
<a rel="nofollow">← Previous Chapter</a>
<a rel="nofollow">Next Chapter →</a>
<a rel="nofollow">Chapter Index ↓</a>
<a rel="nofollow">Bookmark</a>
<a rel="nofollow">Mark for Later</a>
<a rel="nofollow">Comments</a>
<a rel="nofollow">Share</a>
<a rel="nofollow">Subscribe</a>
<a rel="nofollow">Download ↓</a></p></div>
</div><div class="wrapper">
<dl class="work meta group">
<dt class="rating tags">Rating:</dt>
<dd class="rating tags"><a class="tag" rel="nofollow">[Rating]</a></dd>
<dt class="warning tags"><b><a rel="nofollow">Tales Warning</a>:</b></dt>
<dd class="warning tags"><b><a class="tag" rel="nofollow">[Warning]</a></b></dd>
<dt class="category tags">Category:</dt>
<dd class="category tags"><a class="tag" rel="nofollow">[Category]</a></dd>
<dt class="fandom tags">Fandom:</dt>
<dd class="fandom tags"><a class="tag" rel="nofollow">[Fandom]</a></dd>
<dt class="relationship tags">Relationship:</dt>
<dd class="relationship tags"><a class="tag" rel="nofollow">[Ship]</a></dd>
<dt class="character tags">Characters:</dt>
<dd class="character tags">
<ul class="faketaglist">
<li><a class="tag" rel="nofollow">[character 1]</a></li>
<li><a class="tag" rel="nofollow">[character 2]</a></li>
</ul>
<a class="tag" rel="nofollow">[character 3]</a></dd>
<dt class="freeform tags">Additional Tags:</dt>
<dd class="freeform tags">
<ul class="faketaglist">
<li><a class="tag" rel="nofollow">[tag 1]</a></li>
<li><a class="tag" rel="nofollow">[tag 2]</a></li>
<li><a class="tag" rel="nofollow">[tag 3]</a></li>
<li><a class="tag" rel="nofollow">[tag 4]</a></li>
<li><a class="tag" rel="nofollow">[tag 5]</a></li>
<li><a class="tag" rel="nofollow">[tag 6]</a></li>
<li><a class="tag" rel="nofollow">[tag 7]</a></li>
<li><a class="tag" rel="nofollow">[tag 8]</a></li>
<li><a class="tag" rel="nofollow">[tag 9]</a></li>
</ul>
<a class="tag" rel="nofollow">[tag 10]</a>
</dd>
<dt class="language">Language:</dt>
<dd class="language">[Language]</dd>
<dt class="series">Series:</dt>
<dd class="series"><a class="tag" rel="nofollow">← Previous Work</a> • Part [2] of <a class="tag" rel="nofollow">[Series Name]</a> • <a class="tag" rel="nofollow">Next Work →</a></dd>
<dt class="series">Collections:</dt>
<dd class="series"><a class="tag" rel="nofollow">[Collection Name]</a></dd>
<dt class="stats">Stats:</dt>
<dd class="stats">Published: [YYYY-MM-DD] Updated: [YYYY-MM-DD] Words: [9999] Chapters: [optional chapter count] Comments: [5] Kudos: [8] Bookmarks: <a class="tag" rel="nofollow">[1]</a> Hits: [100]</dd>
</dl>
</div><div class="fakefic-header">
<div class="preface group">
<h2 class="title">[Title]</h2>
<h3 class="byline">
<a rel="nofollow">[Author]</a>
</h3>
<h3 class="summary-title">Summary:</h3>
<div class="summary"><p>[Summary goes here!]</p></div>
</div>
<div class="chapter preface group">
<h3 class="title">
<a class="chapter-title" rel="nofollow">[Optional: Chapter number]</a>: [And optional chapter title!]
</h3>
<div class="notes module">
<h3 class="summary-title">Notes:</h3>
<div class="summary"><p>[Optional: Author's notes would go here.]</p></div>
</div>
</div>
</div><div class="fakefic"><p>[fic goes here!]</p>
</div>
<div class="actionbar">
<div class="actions"><p><a rel="nofollow">↑ Top</a>
<a rel="nofollow">← Previous Chapter</a>
<a rel="nofollow"> Next Chapter →</a>
<a rel="nofollow">Kudos ♥</a>
<a rel="nofollow">Bookmark</a>
<a rel="nofollow">Comments ([5])</a></p></div>
</div><table class="work meta group">
<tbody>
<tr>
<td width="50px;"><p class="kudos fakekudos"> </p></td>
<td><p class="kudoslist"><a rel="nofollow">[username 1]</a>, <a rel="nofollow">[username 2]</a>, <a rel="nofollow">[username 2]</a>, <a rel="nofollow">[username 4]</a>, and <a rel="nofollow">[username 5]</a>, as well as 3 guests left kudos on this work!</p></td>
</tr>
</tbody>
</table><div class="fakecomment">
<ol class="thread">
<li class="odd fakecomment group">
<h4 class="fakecomment-header"><a rel="nofollow">[username]</a> <span class="datetime"> <abbr title="X">[Wed]</abbr> [1] <abbr title="X">[Jan]</abbr> [2025 12:00AM] <abbr title="X">[EDT]</abbr></span></h4><p class="icon"><img src="https://i.ibb.co/Myy6CM49/to3anon.png" alt="[user image]" /></p>
<p class="commenttext">[This is a first top-level comment. Note that the li class is "odd."]</p><div class="actions commentactions"><a rel="nofollow">Reply</a> <a rel="nofollow">Thread</a> <a rel="nofollow">Parent Thread</a></div>
</li>
</ol>
<ol class="thread">
<li class="commentbreak"> </li>
<li class="even fakecomment group">
<h4 class="fakecomment-header"><a rel="nofollow">[username]</a> <span class="datetime"> <abbr title="X">[Wed]</abbr> [1] <abbr title="X">[Jan]</abbr> [2025 12:01AM] <abbr title="X">[EDT]</abbr></span></h4><p class="icon"><img src="https://i.ibb.co/Myy6CM49/to3anon.png" alt="[user image]" /></p>
<p class="commenttext">[This is a second top-level comment. Note that the li class is "even."]<br />
<br />
[By the way, if you want a multi-paragraph comment, I recommend using br tags ("break") instead of new paragraphs. I don't know why, but it messes up the formatting sometimes to add new paragraphs.]</p><div class="actions commentactions"><a rel="nofollow">Reply</a> <a rel="nofollow">Thread</a> <a rel="nofollow">Parent Thread</a></div>
</li>
</ol>
<ol class="thread">
<li class="commentbreak"> </li>
<li class="odd fakecomment group">
<h4 class="fakecomment-header"><a rel="nofollow">[username]</a> <span class="datetime"> <abbr title="X">[Wed]</abbr> [1] <abbr title="X">[Jan]</abbr> [2025 12:02AM] <abbr title="X">[EDT]</abbr></span></h4><p class="icon"><img src="https://i.ibb.co/Myy6CM49/to3anon.png" alt="[user image]" /></p>
<p class="commenttext">[This is a third top-level comment. Note that the li class is "odd."]</p><div class="actions commentactions"><a rel="nofollow">Reply</a> <a rel="nofollow">Thread</a> <a rel="nofollow">Parent Thread</a></div>
</li>
<ol class="thread">
<li class="commentbreak"> </li>
<li class="even fakecomment group">
<h4 class="fakecomment-header"><a rel="nofollow">[username]</a> <span class="datetime"> <abbr title="X">[Wed]</abbr> [1] <abbr title="X">[Jan]</abbr> [2025 12:03AM] <abbr title="X">[EDT]</abbr></span></h4><p class="icon"><img src="https://i.ibb.co/Myy6CM49/to3anon.png" alt="[user image]" /></p>
<p class="commenttext">[This is a reply to the third comment. Note that the li class is "even," and the ol tag from the first reply is NOT closed yet.]</p><div class="actions commentactions"><a rel="nofollow">Reply</a> <a rel="nofollow">Thread</a> <a rel="nofollow">Parent Thread</a></div>
</li>
<ol class="thread">
<li class="commentbreak"> </li>
<li class="odd fakecomment group">
<h4 class="fakecomment-header"><a rel="nofollow">[username]</a> <span class="datetime"> <abbr title="X">[Wed]</abbr> [1] <abbr title="X">[Jan]</abbr> [2025 12:04AM] <abbr title="X">[EDT]</abbr></span></h4><p class="icon"><img src="https://i.ibb.co/Myy6CM49/to3anon.png" alt="[user image]" /></p>
<p class="commenttext">[This is a reply to the reply. Note that the li class is "odd," and once again, we add a new ol tag without closing the first two. Note that all 3 are then closed at the end of this HTML!]</p><div class="actions commentactions"><a rel="nofollow">Reply</a> <a rel="nofollow">Thread</a> <a rel="nofollow">Parent Thread</a></div>
</li>
</ol>
</ol>
</ol>
</div>
2a: Top bar & Navigation
Top bar & Navigation HTML
<div class="fakeheader-wrapper">
<h1 class="fakeheader"><img class="logo" src="https://i.ibb.co/RkYxbPrj/to3logo.png" alt="Tales of Our Own" /> Tales of Our Own<sup><em> alpha</em></sup></h1>
<div class="fakeheader-user"><p>
<img class="fakeheader-user" src="https://i.ibb.co/Myy6CM49/to3anon.png" alt="[<- change this link to change the user image]" />
</p><p><span class="fakeuser-text">Hi, [username]!</span> <span class="fakeuser-text">Post</span> <span class="fakeuser-text">Log Out</span></p></div>
</div><div class="fakedivider">
<div class="fakedivider-bg"><p> </p></div>
<div class="fakenav-container">
<div class="fakenav"><p><span class="fakenav-text"> <a rel="nofollow">Fandoms</a> </span> <span class="fakenav-text"> <a rel="nofollow">Browse</a> </span> <span class="fakenav-text"> <a rel="nofollow">Search</a> </span> <span class="fakenav-text"> <a rel="nofollow">About</a> </span></p></div>
<div class="fakesearch">
<div class="fakesearchbox"><p> </p></div>
<p class="fakesearchbutton">Search</p></div>
</div>
</div>
This part's quick—the only things to customize here are the [user image] and [username]. Note that you need to change the image link after src=. You can delete or update the alt text after that.
🎨 Customization tip: Delete the username and post <span>s and change "Log Out" to "Log In" to make it look like you're browsing as a guest!
2b: Top action bar
Top action bar HTML
<div class="actionbar">
<div class="actions"><p><a rel="nofollow">Chapter by Chapter</a>
<a rel="nofollow">Entire Work</a>
<a rel="nofollow">← Previous Chapter</a>
<a rel="nofollow">Next Chapter →</a>
<a rel="nofollow">Chapter Index ↓</a>
<a rel="nofollow">Bookmark</a>
<a rel="nofollow">Mark for Later</a>
<a rel="nofollow">Comments</a>
<a rel="nofollow">Share</a>
<a rel="nofollow">Subscribe</a>
<a rel="nofollow">Download ↓</a></p></div>
</div>
This part's highly customizable. I've included a bunch of possible buttons that can go in this top bar, so just delete what's not relevant to your fic. Or add new ones!
🎨 Customization tip: You can also make it seem like the user has already taken an action by changing the text (e.g. "Bookmark" to "Edit Bookmark" or "Subscribe" to "Unsubscribe"). Or sneakily imply the reader is the author by adding "Edit Work" to the top...
2c: Metadata & tags
Metadata & tags HTML
<div class="wrapper">
<dl class="work meta group">
<dt class="rating tags">Rating:</dt>
<dd class="rating tags"><a class="tag" rel="nofollow">[Rating]</a></dd>
<dt class="warning tags"><b><a rel="nofollow">Tales Warning</a>:</b></dt>
<dd class="warning tags"><b><a class="tag" rel="nofollow">[Warning]</a></b></dd>
<dt class="category tags">Category:</dt>
<dd class="category tags"><a class="tag" rel="nofollow">[Category]</a></dd>
<dt class="fandom tags">Fandom:</dt>
<dd class="fandom tags"><a class="tag" rel="nofollow">[Fandom]</a></dd>
<dt class="relationship tags">Relationship:</dt>
<dd class="relationship tags"><a class="tag" rel="nofollow">[Ship]</a></dd>
<dt class="character tags">Characters:</dt>
<dd class="character tags">
<ul class="faketaglist">
<li><a class="tag" rel="nofollow">[character 1]</a></li>
<li><a class="tag" rel="nofollow">[character 2]</a></li>
</ul>
<a class="tag" rel="nofollow">[character 3]</a></dd>
<dt class="freeform tags">Additional Tags:</dt>
<dd class="freeform tags">
<ul class="faketaglist">
<li><a class="tag" rel="nofollow">[tag 1]</a></li>
<li><a class="tag" rel="nofollow">[tag 2]</a></li>
<li><a class="tag" rel="nofollow">[tag 3]</a></li>
<li><a class="tag" rel="nofollow">[tag 4]</a></li>
<li><a class="tag" rel="nofollow">[tag 5]</a></li>
<li><a class="tag" rel="nofollow">[tag 6]</a></li>
<li><a class="tag" rel="nofollow">[tag 7]</a></li>
<li><a class="tag" rel="nofollow">[tag 8]</a></li>
<li><a class="tag" rel="nofollow">[tag 9]</a></li>
</ul>
<a class="tag" rel="nofollow">[tag 10]</a>
</dd>
<dt class="language">Language:</dt>
<dd class="language">[Language]</dd>
<dt class="series">Series:</dt>
<dd class="series"><a class="tag" rel="nofollow">← Previous Work</a> • Part [2] of <a class="tag" rel="nofollow">[Series Name]</a> • <a class="tag" rel="nofollow">Next Work →</a></dd>
<dt class="series">Collections:</dt>
<dd class="series"><a class="tag" rel="nofollow">[Collection Name]</a></dd>
<dt class="stats">Stats:</dt>
<dd class="stats">Published: [YYYY-MM-DD] Updated: [YYYY-MM-DD] Words: [9999] Chapters: [optional chapter count] Comments: [5] Kudos: [8] Bookmarks: <a class="tag" rel="nofollow">[1]</a> Hits: [100]</dd>
</dl>
</div>
I've also included every possible categorization here. The only mandatory ones (that AO3 won't let you post without) are Rating, Archive Warning, Fandom[s], Language, and Stats. Everything else is optional, so feel free to delete what you don't need. This is all of them:
- Rating
- Archive Warning[s]
- Category[/ies]
- Fandom[s]
- Relationship[s]
- Character[s]
- Additional Tag[s]
- Language
- Series
- Collections
- Stats
For this example, I've set up Categories, Fandoms, and Relationships to display a single tag, and Characters and Additional Tags to show multiple. But you can have as many tags in each of these categories as you wish (Just remember to change the title between plural/singular!)
However, formatting single vs. multiple tags is a little bit tricky, since the code is set up to automatically add commas between tags.
Tutorial: How to format one vs. multiple tags
If you only require a single tag, the code is simple:
<a class="tag" rel="nofollow">Bert/Ernie</a>
When you have more than one, however, the code changes a bit to properly add the commas in between tags. The basic structure is:
<ul class="faketaglist">
<li><a class="tag" rel="nofollow">Fluff</a></li>
<li><a class="tag" rel="nofollow">Angst</a></li>
</ul>
<a class="tag" rel="nofollow">Humor</a>
- You'll notice that the whole thing gets wrapped in <ul class="faketaglist"></ul>, which tells AO3: hey, this is gonna be a list of things.
- Within this, every tag is also wrapped in a <li></li>, which tells AO3: hey, this is an item on the list!
- ...That is, every tag except for the last one—since we don't want a comma after that one, it goes after the list has ended.
2d: Title, author, summary, and notes
Title, author, summary, and notes HTML
<div class="fakefic-header">
<div class="preface group">
<h2 class="title">[Title]</h2>
<h3 class="byline">
<a rel="nofollow">[Author]</a>
</h3>
<h3 class="summary-title">Summary:</h3>
<div class="summary"><p>[Summary goes here!]</p></div>
</div>
<div class="chapter preface group">
<h3 class="title">
<a class="chapter-title" rel="nofollow">[Optional: Chapter number]</a>: [And optional chapter title!]
</h3>
<div class="notes module">
<h3 class="summary-title">Notes:</h3>
<div class="summary"><p>[Optional: Author's notes would go here.]</p></div>
</div>
</div>
</div>
Lots to edit here, but thankfully not wrapped in a bajillion HTML tags this time. Title and Author are the only things strictly necessary here, so feel free to delete the Summary, Chapter Title, and Notes if you'd like.
🎨 Customization tutorial: Adding an end notes section
It's basically the same as the top! After your fic, add:
<div class="preface group">
<div class="notes module">
<h3 class="summary-title">Notes:</h3>
<div class="summary"><p>[Notes here!]</p></div>
</div>
And remember to add the blurb at the top:
(See the end of the work for <a rel="nofollow">more notes</a>.)
And you're done!
2e: The fic!
Fic HTML
<div class="fakefic">
<p>[fic goes here!]</p>
</div>
Since this will just be formatted like a regular fic, you don't need any special formatting here. That said, you can't just copy and paste your fic straight into the HTML, since you will need paragraph tags (<p>) around each paragraph, and if you have any bolding or italics, that needs code, too.
⚠️ You CAN try to switch to the Rich Text editor, paste it there, and go back to the HTML editor on AO3 proper, but that runs the risk of AO3's Rich Text editor sometimes adding random extra formatting to all of the very finicky code.
My recommendation is to create a fresh new draft, paste your fic into the Rich Text editor there, swap that to HTML, and then copy that into the HTML of your final fic.
2f: Bottom actions and Kudos
Bottom action bar & Kudos HTML
<div class="actionbar">
<div class="actions"><p><a rel="nofollow">↑ Top</a>
<a rel="nofollow">← Previous Chapter</a>
<a rel="nofollow"> Next Chapter →</a>
<a rel="nofollow">Kudos ♥</a>
<a rel="nofollow">Bookmark</a>
<a rel="nofollow">Comments ([5])</a></p></div>
</div><table class="work meta group">
<tbody>
<tr>
<td width="50px;"><p class="kudos fakekudos"> </p></td>
<td><p class="kudoslist"><a rel="nofollow">[username 1]</a>, <a rel="nofollow">[username 2]</a>, <a rel="nofollow">[username 2]</a>, <a rel="nofollow">[username 4]</a>, and <a rel="nofollow">[username 5]</a>, as well as 3 guests left kudos on this work!</p></td>
</tr>
</tbody>
</table>
This action bar, like the top bar, is also customizable for what you need.
The kudos list is easier to edit than the Tags, thankfully, since the commas are hard-coded in. For every logged-in username you want to add, just paste:
<a rel="nofollow">[username]</a>,
⭐️ Remember to change the comment count! For chaptered fics, it will only show the count for the current chapter.
⭐️ Also, note that the: "and X more users" message appears after 50 username kudos.
2g: Comments
Comments HTML
<div class="fakecomment">
<ol class="thread">
<li class="odd fakecomment group">
<h4 class="fakecomment-header"><a rel="nofollow">[username]</a> <span class="datetime"> <abbr title="X">[Wed]</abbr> [1] <abbr title="X">[Jan]</abbr> [2025 12:00AM] <abbr title="X">[EDT]</abbr></span></h4><p class="icon"><img src="https://i.ibb.co/Myy6CM49/to3anon.png" alt="[user image]" /></p>
<p class="commenttext">[This is a first top-level comment. Note that the li class is "odd."]</p><div class="actions commentactions"><a rel="nofollow">Reply</a> <a rel="nofollow">Thread</a> <a rel="nofollow">Parent Thread</a></div>
</li>
</ol>
<ol class="thread">
<li class="commentbreak"> </li>
<li class="even fakecomment group">
<h4 class="fakecomment-header"><a rel="nofollow">[username]</a> <span class="datetime"> <abbr title="X">[Wed]</abbr> [1] <abbr title="X">[Jan]</abbr> [2025 12:01AM] <abbr title="X">[EDT]</abbr></span></h4><p class="icon"><img src="https://i.ibb.co/Myy6CM49/to3anon.png" alt="[user image]" /></p>
<p class="commenttext">[This is a second top-level comment. Note that the li class is "even."]<br />
<br />
[By the way, if you want a multi-paragraph comment, I recommend using br tags ("break") instead of new paragraphs. I don't know why, but it messes up the formatting sometimes to add new paragraphs.]</p><div class="actions commentactions"><a rel="nofollow">Reply</a> <a rel="nofollow">Thread</a> <a rel="nofollow">Parent Thread</a></div>
</li>
</ol>
<ol class="thread">
<li class="commentbreak"> </li>
<li class="odd fakecomment group">
<h4 class="fakecomment-header"><a rel="nofollow">[username]</a> <span class="datetime"> <abbr title="X">[Wed]</abbr> [1] <abbr title="X">[Jan]</abbr> [2025 12:02AM] <abbr title="X">[EDT]</abbr></span></h4><p class="icon"><img src="https://i.ibb.co/Myy6CM49/to3anon.png" alt="[user image]" /></p>
<p class="commenttext">[This is a third top-level comment. Note that the li class is "odd."]</p><div class="actions commentactions"><a rel="nofollow">Reply</a> <a rel="nofollow">Thread</a> <a rel="nofollow">Parent Thread</a></div>
</li>
<ol class="thread">
<li class="commentbreak"> </li>
<li class="even fakecomment group">
<h4 class="fakecomment-header"><a rel="nofollow">[username]</a> <span class="datetime"> <abbr title="X">[Wed]</abbr> [1] <abbr title="X">[Jan]</abbr> [2025 12:03AM] <abbr title="X">[EDT]</abbr></span></h4><p class="icon"><img src="https://i.ibb.co/Myy6CM49/to3anon.png" alt="[user image]" /></p>
<p class="commenttext">[This is a reply to the third comment. Note that the li class is "even," and the ol tag from the first reply is NOT closed yet.]</p><div class="actions commentactions"><a rel="nofollow">Reply</a> <a rel="nofollow">Thread</a> <a rel="nofollow">Parent Thread</a></div>
</li>
<ol class="thread">
<li class="commentbreak"> </li>
<li class="odd fakecomment group">
<h4 class="fakecomment-header"><a rel="nofollow">[username]</a> <span class="datetime"> <abbr title="X">[Wed]</abbr> [1] <abbr title="X">[Jan]</abbr> [2025 12:04AM] <abbr title="X">[EDT]</abbr></span></h4><p class="icon"><img src="https://i.ibb.co/Myy6CM49/to3anon.png" alt="[user image]" /></p>
<p class="commenttext">[This is a reply to the reply. Note that the li class is "odd," and once again, we add a new ol tag without closing the first two. Note that all 3 are then closed at the end of this HTML!]</p><div class="actions commentactions"><a rel="nofollow">Reply</a> <a rel="nofollow">Thread</a> <a rel="nofollow">Parent Thread</a></div>
</li>
</ol>
</ol>
</ol>
</div>
Comments can be a little tricky since there are a ton of moving parts, especially with comment threads.
The code starts you off with five example comments. Below is a walkthrough of the basic structure of one, with the main customizable parts underlined: username, user image, and comment text, along with the date and time the comment was posted. (Remember to change the link after src= to change the image!)
<ol class="thread">
<li class="commentbreak"> </li>
<li class="odd fakecomment group">
<h4 class="fakecomment-header"><a rel="nofollow">[username]</a> <span class="datetime"> <abbr title="X">[Wed]</abbr> [1] <abbr title="X">[Jan]</abbr> [2025 12:00AM] <abbr title="X">[EDT]</abbr></span></h4><p class="icon"><img src="https://i.ibb.co/Myy6CM49/to3anon.png" alt="[user image]" /></p>
<p class="commenttext">[This is a top-level comment!]</p><div class="actions commentactions"><a rel="nofollow">Reply</a> <a rel="nofollow">Thread</a> <a rel="nofollow">Parent Thread</a></div>
</li>
</ol>
You'll also see that odd is underlined. For every other comment, you want to switch that to even. This is what adds the slightly darker background to differentiate between comments.
I've laid out one comment thread with replies in the example code, but if you want to add more, here's how:
Tutorial: Threaded comments + Replies
The way you create threaded comments is with the <ol class="thread"> tag. You'll notice that it wraps around every comment, like so:
<ol class="thread">
[comment goes here]
</ol>
Think of every <ol> as a box you put a comment in. For single comments, you open the box and then close it when the comment is done.
But for comment threads, you open the box, and then don't close it until the end of the thread. You just go straight to opening a new box! Only once you reach the end of the thread do you need to close all the boxes you've opened. So, for a comment with one reply, the simplified code should look like this:
<ol class="thread">
[comment goes here]
<ol class="thread">
[comment goes here]
</ol></ol>
You can do this as many times as you want, though it starts to look a little funky after ~4 comments deep on smaller screens. And remember to keep swapping between odd and even in the replies!
So to recap, a "map" of the code as I've laid it out in the example:
- Comment <ol></ol> <odd> — A first comment.
- Comment <ol></ol> <even> — A second comment.
- Comment <ol> <odd> — A third comment, and the beginning of a thread.
- Comment <ol> <even> — A reply to the third comment.
- Comment <ol> <odd> — A reply to the reply!
- </ol></ol></ol> — Close all your boxes!
- Comment <ol> <even> — A reply to the third comment.
⭐️ Try to use 100x100 icons for user images, or else they might display weirdly.
🎨 You can also right click > Copy Image Address to a real AO3 user's icon to get a link to theirs! Maybe get permission first, though.
🎨 Lastly, the TO3-branded guest/default icon is here if you want to add it to other comments: https://i.ibb.co/Myy6CM49/to3anon.png
FAQ
What's abbr title="X"? Do I need to update that to something? (The short answer is no, but in case you're curious:)
<abbr title="Wednesday">Wed</abbr>
These only get shown on hover—i.e, if you hover over "Wed" then it'll show "Wednesday." But you need to hover for one full second, and since you probably are going to get very few people doing that on the date and time that a comment was posted, you don't actually need to update this unless you are insane like me.
So why keep it there with an "X" placeholder at all? Because it makes the cursor change to the little "?" and gives the text that dotted underline :)
My spacing in the Stats section doesn't look right :(
Ugh, yeah, AO3 loves to randomly add and delete spaces.
- Add this in the html in between sections:  
- It stands for "em space," as in the amount of space an em-dash takes. It'll show up as an extra-long space!
- There should be no other spacing, so: Published: [2025-01-01] Updated: [2025-01-02]
...And that's it!! If anything's confusing, please feel free to reach out to me in the comments or on discord @cheju_ and I'll do my best to answer.
(And for folks familiar with HTML and CSS, I'm also happy to take suggestions for how to make this code nicer-looking and easier to use! I'll admit that my method to code this was "copy/paste AO3's code, then just play around until it looks right," so I know it's definitely not the cleanest 😅)
Lastly, if you use this code, please feel free to share the final product with me in the comments! I'd love to see what y'all make :) Happy creating, everyone!!
MrSnuffle Wed 23 Apr 2025 12:04PM EDT
Fantastic! I can't wait for the next update.
Guest Wed 23 Apr 2025 12:54PM EDT
All I have to say is you have no idea what you're talking about. Paperclip collecting is a proud and noble tradition and it would be perfectly reasonable if someone had a negative reaction to that tradition being denigrated.
slimeeeyyy Wed 23 Apr 2025 6:30PM EDT
wigglewigglewigglewiggle :) wigglewiggle
the_grouch Wed 23 Apr 2025 6:34PM EDT
Thank you.
L_mo Thurs 24 Apr 2025 11:16AM EDT
wo w! how caan u read that? can u teach elmo how to speak worm?