How to insert html/css comments in your fic that still look good after you download them

Ok, so there are quite a few guides out there about how to make parts of your fic look like comments (lordvoldemortsskin for example does a very good job of it).

The problem with all of the ones that I've found? As soon as you download the fic (which you really should if you like a fic, because AO3 may just be down when you want to reread it or you lose the bookmark or the author takes it down) all the nice css (colors, formatting) will be stripped from it and the comments will not look like comments anymore. Heck, depending on how you coded it it may be really difficult to read the fic anymore, especially if the comments are a big part of it.

So that's pretty much what this workskin is addressing. It does not work quite as smooth as usual comment workskins but at the very least it will still work if you download it.

Anyway, so here's how my version of the comment box looks like:

...
	GoldenDragon54 on How to seduce the Ice Dragon	Tue 04.May 2019 11:16PM CEST
	Finally! Oh god above, finally, they talk! Yeah!
I really thought they'd never manage to get so far! Holy freaking fuck, but I can't tell you how I was sitting here, on the edge of my chair (ok, it was my couch but whatever), almost sure Blue would back out again, or Orange would run away or - well, I pretty much expected the world to go down the drain before they would finally, FINALLY manage to talk to each other .... The relief had me absolutely glide off teh couch, you won't believe it! Now I'm just hoping they'll manage to get the other "Talking" done as well XD Thank you so much for that rollercoaster! My heart can't take it, but I really hope for more lol

\|Reply\| \|Thread\| \|Delete\|

Now go up the side and toggle "Hide Creator's Style" and you'll see what it looks like without the css (and when downloaded).

It's, admittedly, not perfect but at least still recognizable as a comment.

Anyway, there are two versions of comments, one in your inbox:

...
	GoldenDragon54 on How to seduce the Ice Dragon	2 hours ago
	Finally! Oh god above, finally, they talk! Yeah!
I really thought they'd never manage to get so far! Holy freaking fuck, but I can't tell you how I was sitting here, on the edge of my chair (ok, it was my couch but whatever), almost sure Blue would back out again, or Orange would run away or - well, I pretty much expected the world to go down the drain before they would finally, FINALLY manage to talk to each other .... The relief had me absolutely glide off teh couch, you won't believe it! Now I'm just hoping they'll manage to get the other "Talking" done as well XD Thank you so much for that rollercoaster! My heart can't take it, but I really hope for more lol

\|□ Select\| \|Reply\| \|Unread\|

Or if your author has already read them:

...
	GoldenDragon54 on How to seduce the Ice Dragon	22 days ago
	Finally! Oh god above, finally, they talk! Yeah!
I really thought they'd never manage to get so far! Holy freaking fuck, but I can't tell you how I was sitting here, on the edge of my chair (ok, it was my couch but whatever), almost sure Blue would back out again, or Orange would run away or - well, I pretty much expected the world to go down the drain before they would finally, FINALLY manage to talk to each other .... The relief had me absolutely glide off teh couch, you won't believe it! Now I'm just hoping they'll manage to get the other "Talking" done as well XD Thank you so much for that rollercoaster! My heart can't take it, but I really hope for more lol

\|□ Select\| \|Reply\|

And then there's version 2, the comment under the fic itself:

...
	GoldenDragon54 on Chapter 102	Tue 04.May 2019 11:16PM CEST
	Finally! Oh god above, finally, they talk! Yeah!
I really thought they'd never manage to get so far! Holy freaking fuck, but I can't tell you how I was sitting here, on the edge of my chair (ok, it was my couch but whatever), almost sure Blue would back out again, or Orange would run away or - well, I pretty much expected the world to go down the drain before they would finally, FINALLY manage to talk to each other .... The relief had me absolutely glide off teh couch, you won't believe it! Now I'm just hoping they'll manage to get the other "Talking" done as well XD Thank you so much for that rollercoaster! My heart can't take it, but I really hope for more lol

\|Delete\| \|Spam\| \|Freeze Thread\| \|Thread\| \|Reply\|

...
	MeanAuthor on Chapter 102	Tue 04.May 2019 12:26PM CEST
	Well ... I wouldn't be that mean, now would I? 0:)

\|Delete\| \|Spam\| \|Freeze Thread\| \|Parent Thread\| \|Thread\| \|Reply\|

...
	Anon on Chapter 102	Tue 04.May 2019 11:20PM CEST
	<3

\|Delete\| \|Spam\| \|Freeze Thread\| \|Thread\| \|Reply\|

...
	MeanAuthor on on Chapter 102	Tue 04.May 2019 12:27PM CEST
	Thank you!

\|Delete\| \|Spam\| \|Freeze Thread\| \|Parent Thread\| \|Thread\| \|Reply\|

Okay, the next chapter is the css skin, and after that the html code

Chapter 2 Chapter Text

I'm going to assume you know how to write a new worksskin and add it to your work (otherwise you'll find a tutorial for this here), so this is just the css:

#workskin .button {
  border-radius: 4px;
  border: 1px solid #BBBBBB;
  margin: 0px 4px;
  background: linear-gradient(#FFFFFF, #dbdbdb);
  box-shadow: inset 0px -1px #c9c9c9;
  display: inline-block;
  padding: 3px 10px;
  font-size: .95em;
  position: relative;
  float: right;
}

#workskin .buttonunread {
  border-radius: 4px;
  border: 1px solid #BBBBBB;
  margin: 0px 4px;
  background: #D0D0D0;
  box-shadow: inset 0px -1px #c9c9c9;
  color: #A93333;
  display: inline-block;
  padding: 3px 10px;
  font-size: .95em;
  position: relative;
  float: right;
}

#workskin .transparent {
  opacity: 0;
}

#workskin .no_underline {
  text-decoration: none;
}

#workskin table {
  width: 93%;
  position: relative;
  left: 2%;
  border-collapse: collapse;
  border-right: 1px solid rgb(221, 221, 221);
}

#workskin tr + tr {
  font-size: 95%;
}

#workskin tr + tr td {
  vertical-align: top;
  padding-top: 10px;
  padding-left: 5px;
}

#workskin .thin {
  font-size: 75% !important;
  font-family: "DejaVu Sans Mono", "Arial" !important;
  font-weight: light !important;
  font-stretch: ultra-condensed !important;
}

#workskin .thin > u {
  text-decoration-style: dotted;
}

#workskin .inboxbody {
  background-color: #EEEEEE;
  position: relative;
}

#workskin .inboxbodywhite {
  background-color: rgb(250, 250, 250);
  position: relative;
}

#workskin .inboxhead {
  background-color: rgb(221, 221, 221);
  height: 30px;
  font-family: serif;
  margin-bottom: 10px;
}

#workskin col.inboxbody {
  border-bottom: 1px solid rgb(221, 221, 221);
  border-left: 1px solid rgb(221, 221, 221);
}

#workskin col.inboxbody + col {
  border-bottom: 1px solid rgb(221, 221, 221);
  border-left: none;
}

#workskin col.inboxbodywhite {
  border-bottom: 1px solid rgb(221, 221, 221);
  border-left: 1px solid rgb(221, 221, 221);
}

#workskin col.inboxbodywhite + col {
  border-bottom: 1px solid rgb(221, 221, 221);
  border-left: none;
}

#workskin .inboxhead + td {
  padding-left: 5px;
}

#workskin .imspace {
  width: 80px;
}

Chapter 3 Notes:

edited 4.9.23 to make it more easy to read

(See the end of the chapter for more notes.)

Chapter Text

And on to the html which is the finicky part:

Important point: make sure to keep the codebreaks where they are (though how/whether it is indented shouldn't make any difference) because otherwise the code may not work

There are some additional notes at the end. You may want to read them before implementing the code.

Lets start with the easy part: Inbox comments:

Unread comment (usually every comment that hasn't been replied to):

<table>
<caption class="transparent">...</caption>
<colgroup><col class="inboxbody"/><col class="inboxbody"/><col class="inboxbody"/></colgroup>
<tbody>
<tr>
<td class="inboxhead imspace" rowspan="2"><img src="[IMAGE_URL]" alt="[ALT_DESCRIPTION]" width="80" height="80" /></td>
<td class="inboxhead" align="left">[COMMENTER] on [FIC_NAME]</td>
<td class="inboxhead thin" align="right">[HOWEVER LONG] ago</td>
</tr>
<tr>
<td colspan="2">[FIRST PARAGRAPH]</td>
</tr>
<tr>
<td colspan="3">[REST OF THE COMMENT; SEPARATE ALL PARAGRAPHS BY USING 2x ]</td>
</tr>
<tr>
<td>&emsp;&emsp;</td>
<td>&emsp;&emsp;</td>
<td>&emsp;&emsp;</td>
</tr>
<tr>
<td colspan="3">
<div align="right">|□ Select||Reply||Unread|
</div>
</td>
</tr>
</tbody>
</table>

Read comment (usually every comment that has been replied to):

<table>
<caption class="transparent">...</caption>
<colgroup><col class="inboxbodywhite"/><col class="inboxbodywhite"/><col class="inboxbodywhite"/></colgroup>
<tbody>
<tr>
<td class="inboxhead imspace" rowspan="2"><img src="[IMAGE_URL]" alt="[ALT_DESCRIPTION]" width="80" height="80" /></td>
<td class="inboxhead" align="left">[COMMENTER] on [FIC_NAME]</td>
<td class="inboxhead thin" align="right">[HOWEVER LONG] ago</td>
</tr>
<tr>
<td colspan="2">[FIRST PARAGRAPH]</td>
</tr>
<tr>
<td colspan="3">[REST OF THE COMMENT; SEPARATE ALL PARAGRAPHS BY USING 2x ]</td>
</tr>
<tr>
<td>&emsp;&emsp;</td>
<td>&emsp;&emsp;</td>
<td>&emsp;&emsp;</td>
</tr>
<tr>
<td colspan="3">
<div align="right">|□ Select||Reply|<
</div>
</td>
</tr>
</tbody>
</table>

Now replace the red text.

On to the slightly more difficult comments under the fic itself. Since the buttons are differing between who left the comment and whether it is the first comment in a thread/ whether it has been replied to I'm going to add all the options for the buttons under the body of the comments.

Let's start with the first comment in a thread:

Then comes the second comment. You can add it right below the one above (you can also add a between them, or between comments that aren't in one thread). To better show the differences I'll only bold the parts that are different between the comment above and this one:

<table>
<caption class="transparent">...</caption>
<colgroup><col/><col class="inboxbodywhite" /><col class="inboxbodywhite" /><col class="inboxbodywhite" /></colgroup>
<tbody>
<tr>
<td>&emsp;&emsp;</td>
<td class="inboxhead imspace" rowspan="2"><img src="[IMAGE_URL]" alt="[ALT_DESCRIPTION]" width="80" height="80" /></td>
<td class="inboxhead" align="left">[COMMENTER] on Chapter [NUMBER]</td>
<td class="inboxhead thin" align="right">Tue 04.May 2019 11:20PM CEST</td>
</tr>
<tr>
<td>&emsp;&emsp;</td>
<td colspan="2">[FIRST PARAGRAPH]</td>
</tr>
<tr>
<td>&emsp;&emsp;</td>
<td colspan="3">[REST OF THE COMMENT; SEPARATE ALL PARAGRAPHS BY USING 2x ]</td>
</tr>
<tr>
<td>&emsp;&emsp;</td>
<td>&emsp;&emsp;</td>
<td>&emsp;&emsp;</td>
<td>&emsp;&emsp;</td>
</tr>
<tr>
<td>&emsp;&emsp;</td>
<td colspan="3">
[BUTTONS]
</td>
</tr>
</tbody>
</table>

This adds another column in front of the table, which means that when the css is stripped off, the table will still be indented slightly - meaning you can easily follow the threads even without css.

To add further comments in the thread just make sure to add more columns by

adding <td>&emsp;&emsp;</td> on the line after every <tr>
adding <col/> after every <colgroup>
alternating between "inboxbody" and "inboxbodywhite"

Buttons

So, as mentioned above, depending on who left the comment, which comment in a thread it is and who is seeing them (the author/a different user/an anon) the buttons differ slightly. The following are the options that the author will see - you might want to tweak them if you have a different person reading the comment. Be aware that you have to keep the buttons on one line (aside from the inevitable automatic linebreak AO3 adds) because otherwise the formatting will be off.
For everything to work correctly, simply replace [Buttons] with the code from below:

Anon Commenter First Comment
|Delete||Spam||Freeze Thread||Thread||Reply|

Anon Commenter NOT First Comment
|Delete||Spam||Freeze Thread||Parent Thread||Thread||Reply|

User Commenter First Comment
|Block||Delete||Freeze Thread||Thread||Reply|

User Commenter NOT First Comment
|Block||Delete||Freeze Thread||Parent Thread||Thread||Reply|

Author Reply NOT Replied To
|Delete||Edit||Freeze Thread||Parent Thread||Thread||Reply|

Author Reply Replied To
|Delete||Freeze Thread||Parent Thread||Thread||Reply|

Additional notes:

Timestamps
Obviously you can replace "Tue 04.May 2019 11:20PM CEST" with the time of your chosing.
Additionally, from what I've found the timezone should be the same as the one of the user seeing the comment, but apparently that isn't always working. So really, it doesn't actually matter what timezone you use.
Assessability
I don't use a screenreader so I don't know for sure, but from what I've read, not all screenreaders are able to properply convey html tables. Be aware of this and maybe add a warning in the author's notes.
alt="[ALT_DESCRIPTION]"
This adds an alternative description in case the picture you're using isn't available anymore. Also, if someone is using a screenreader (that can read the code) they always need ALT descriptions.
The First Paragraph
This is one part where this skin is having some trouble. If you have a long comment it will look better if you have one (or two short) sentence(s) in the beginning and then add a new paragraph because otherwise you'll have a darker grey area below the image that grows with the length of the paragraph
Short comments
probably don't have a second paragraph. Simply remove
<tr>
<td colspan="3">[REST OF THE COMMENT; SEPARATE ALL PARAGRAPHS BY USING 2x ]</td>
</tr>
from the code
Be aware that you cannot edit comments that have been replied to.
The actual size of the picture(s) you're chosing for the profile pic isn't relevant, but you want it to be mostly quadratic. Be also aware that large pictures will seem darker when they are resized, so maybe chose lighter ones or make them lighter before adding them.

Notes:

Now have fun adding comments to your story
If you have any questions just drop me a comment

Series this work belongs to:

Part 1 of Magnolia's adventures in CSS Next Work →

Actions

Kudos

RammBook, LaffingPenguin, Lifeispain, Lifaeen, RollingKing, Mayan_Ricomu, deniz_the_archivist, and FriedDeerInTheWoods left kudos on this work!

Comments

RammBook on Chapter 3 Tue 08 Apr 2025 12:50PM UTC

This is really cool and useful, thank you for sharing!!
I love making things more accessible and readable even without creators style turned on :)

Comment Actions
- Reply
- Thread
1. Magnolia_in_black_Velvet on Chapter 3 Tue 08 Apr 2025 06:21PM UTC
  
  Happy you like it!
  And yep, as someone who downloads all the fics I'm always disappointed when, once the css is stripped, the effect doesn't work anymore.
  
  Comment Actions

Archive of Our Own^beta

Actions

Work Header