Archive of Our Own ^beta

Chapter Text

I'm really proud of this one! It took forever to make. I tried my best to make this work skin readable when a user has creator styles toggled off, but results may vary based on the sizes of your images. Try to keep them small for best results.

(And yes, I did make it for my own fics that have been WIPs for months. Stay tuned?!)

This code is open source on my GitLab. Please link back to this work if you use this work skin. I want to see what you create with it!

Demo (Default)

This version has both user icon images and a post image.

HTML Code


<div class="interknot-container">
<div class="interknot-header">
<img class="user-icon" src="https://images.squidge.org/images/2025/04/24/cat.png" alt="Icon">
<div class="title-container">
<h4>RandomUser</h4>
<span>27639</span>
</div>
</div>
<div class="interknot-main">
<div class="post-image">
<img src="https://images.squidge.org/images/2025/04/24/astranomical.webp" alt="Astranomical Moment">
</div>
<div class="interknot-post">
<h5>[Intel] OP's post title goes here</h5>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<p>Temporibus voluptatum voluptas veritatis ea accusamus ducimus doloribus ratione ullam asperiores, beatae quis aperiam, voluptates quidem laudantium porro neque accusantium architecto molestiae.</p>
<div class="comment-container">
<div class="user-comment">
<img class="user-icon" src="https://images.squidge.org/images/2025/04/24/mouse.png" alt="Mouse Icon">
<dl>
<dt>
Commenter
<span>3F</span>
</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam fuga labore at saepe impedit laudantium ratione eum, quis, eos iste ea error quam possimus necessitatibus itaque commodi libero odit deleniti.</dd>
<dd>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</dd>
</dl>
</div>
<div class="user-comment">
<img class="user-icon" src="https://images.squidge.org/images/2025/04/24/harumasa.png" alt="Harumasa Icon">
<dl>
<dt>
AnotherCommenter
<span>4F</span>
</dt>
<dd>Lorem ipsum dolor sit</dd>
</dl>
</div>
<div class="user-comment">
<img class="user-icon" src="https://images.squidge.org/images/2025/04/24/cat.png" alt="Cat Icon">
<dl>
<dt class="user">
RandomUser
<span>5F</span>
</dt>
<dd>Lorem ipsum!!</dd>
</dl>
</div>
<span class="comment-end">- No more comments -</span>
</div>
</div>
</div>
</div>


Demo (No Images)

If you want to hide the images, add no-images proceeded by a single space next to the HTML class interknot-container (the first line of code). It should look like this: <div class="interknot-container no-images">

Demo (No Post Image)

Change the first line of HTML code to <div class="interknot-container no-post-image"> if you would like to hide only the post image, but keep the user icons.