Chapter 1: Demo
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.
RandomUser
27639
[Intel] OP's post title goes here
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Temporibus voluptatum voluptas veritatis ea accusamus ducimus doloribus ratione ullam asperiores, beatae quis aperiam, voluptates quidem laudantium porro neque accusantium architecto molestiae.
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">
RandomUser
27639
[Intel] OP's post title goes here
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Temporibus voluptatum voluptas veritatis ea accusamus ducimus doloribus ratione ullam asperiores, beatae quis aperiam, voluptates quidem laudantium porro neque accusantium architecto molestiae.
- Commenter 3F
- 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.
- Lorem ipsum, dolor sit amet consectetur adipisicing elit.
- AnotherCommenter 4F
- Lorem ipsum dolor sit
- RandomUser 5F
- Lorem ipsum!!
- No more comments -
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.
RandomUser
27639
[Intel] OP's post title goes here
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Temporibus voluptatum voluptas veritatis ea accusamus ducimus doloribus ratione ullam asperiores, beatae quis aperiam, voluptates quidem laudantium porro neque accusantium architecto molestiae.
- Commenter 3F
- 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.
- Lorem ipsum, dolor sit amet consectetur adipisicing elit.
- AnotherCommenter 4F
- Lorem ipsum dolor sit
- RandomUser 5F
- Lorem ipsum!!
- No more comments -
Chapter 2: Work Skin CSS
Chapter Text
Updates
April 28, 2025
- Made Inter-Knot post images look good on mobile
- Added optional POV user color class to the
dtname tag in post comments (Thank you, imSwan!) - Fixed a bug in the header that caused it not to render properly on mobile
- A bunch of other tiny improvements and optimizations
Work Skin CSS Code
h4,h5,dd,dl {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.interknot-container p {
margin: 0;
padding: 0;
}
.interknot-container {
border: 4px solid #2e2e2e;
border-radius: 40px 0 40px 40px;
font-family: sans-serif;
overflow: hidden;
max-width: 900px;
margin: 20px auto;
}
.interknot-header {
background-color: #121212;
background-image: url(https://images.squidge.org/images/2025/04/24/interknot-header-bg.png);
background-repeat: repeat;
overflow: hidden;
padding: 20px 0;
}
.interknot-header .user-icon {
float: left;
}
.user-icon {
max-width: 50px;
min-width: 50px;
max-height: 50px;
min-height: 50px;
border: 4px solid #2e2e2e;
border-radius: 50%;
margin: 0 15px;
}
.title-container {
float: left;
}
.title-container h4 {
color:#606060;
font-size: 1.3em;
margin-bottom: 3px;
}
.title-container span {
display: inline-block;
}
.title-container span,
.user-comment dt > span {
background: #606060;
padding: 0 12px;
color: black;
width: fit-content;
border: 1px solid #606060;
border-radius: 20px;
font-weight: bold;
font-size: 0.8em;
}
.title-container span::before {
content: "♥ ";
}
.interknot-main {
clear: both;
display: flex;
flex-flow: row-reverse wrap;
justify-content: center;
background-color: #252525;
box-shadow:
inset 0 -250px 250px -120px #000000,
inset 0 50px 100px -50px #3d3d3d,
inset 0 0 50px #1a1a1a;
padding: 10px 20px;
}
.post-image {
flex: 1 1 100px;
order: 2;
min-width: 120px;
margin: 10px 10px 10px 0;
}
.post-image img {
border: 3px solid #2e2e2e;
border-radius: 15px;
width: 100%;
}
.interknot-post {
flex: 1 1 500px;
order: 1;
min-width: 300px;
background: rgba(0, 0, 0, 0.4);
border: 3px solid #1b1b1b;
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
color: #d4d4d4;
padding: 10px 10px 0 10px;
margin: 10px 0 10px 10px;
}
.comment-container {
display: flex;
flex-direction: column;
padding: 0 0 10px 0;
}
.user-comment {
display: flex;
align-items: flex-start;
border-bottom: 3px solid #2e2e2e;
padding: 10px 0;
}
.user-comment:first-of-type {
margin-top: 10px;
}
.user-comment:last-of-type {
margin-bottom: 10px;
}
.user-comment .user-icon {
margin: 0 10px 0 0;
align-self: flex-start;
}
.interknot-post h5 {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 10px;
}
.interknot-post p,.user-comment dd {
font-size: 0.9em;
margin: 4px 0;
}
.comment-end {
display: block;
text-align: center;
align-self: center;
color: #2e2e2e;
font-weight: bold;
}
.user-comment dt {
font-size: 1.08em;
font-weight: bold;
display: flex;
justify-content: space-between;
}
.user-comment dl {
flex: 1;
}
.user-comment dt.user {
color: #ffbc2e;
}
.user-comment dt.user > span {
background: #ffbc2e;
color: black;
border: 1px solid #ffbc2e;
}
.user-comment dt > span {
align-items: baseline;
border-radius: 0px 20px 20px 20px;
margin-left: 10px;
}
.interknot-container.no-post-image .post-image {
display: none;
}
.interknot-container.no-post-image .interknot-post {
margin-left: 0;
width: 100%;
}
.interknot-container.no-images img {
visibility: hidden;
position: absolute;
}
.interknot-container.no-images .user-icon {
width: 0;
height: 0;
margin: 0;
border: none;
}
.interknot-container.no-images .user-comment {
padding-left: 10px;
}
.interknot-container.no-images .post-image {
display: none;
}
.interknot-container.no-images .interknot-post {
margin-left: 0;
width: 100%;
}
.interknot-container.no-images .title-container {
padding-left: 30px;
}
.png)
.gif)
- No more comments -