Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Stats:
Published:
2026-03-02
Words:
2,820
Chapters:
1/1
Comments:
5
Kudos:
44
Bookmarks:
9
Hits:
706

Plus Chat Work Skin

Summary:

An AO3 Work Skin for idol messaging system Plus Chat (adaptable for other messaging systems) using CSS and HTML.

Notes:

The HTML and CSS code are available here. If you are unfamiliar with coding/CSS/HTML, I highly recommend reading this and then the GitHub README.md in its entirety, so you have a better understand of what I'm talking about.

If you're familiar with any/all of these: go wild.

Please give credit when using in your works.

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

Work Text:

Rules for Usage

This work skin is free to use for everybody, and free to take and adjust as you please—in fact I encourage you to do so!

If you use it OR work off of it to make something on your own, I ask that you please credit me by either of these means:

1. Linking the GitHub or AO3 page for this workskin, with credit

2. Using the 'This work is a remix, a translation, a podfic, or was inspired by another work' option on AO3 with this work as the inspiration.

Thank you for your kindness and understanding!


'header'

The header section is (default) hidden when creator's workskin is off.
code

<dl class="pluschat">
<div class="header">

<span class="backarrow">
<img class="hidden backbutton" src="https://images.squidge.org/images/2026/02/28/backarrowone.png">
</span>

<div class="centered">
<span class="hidden title">idolname</span><img class="hidden downarrow" src="https://images.squidge.org/images/2026/02/28/SIX_844663D7-CC78-4ECB-95DA-71F0E55F9971.png">
<span class="hidden daystogether">00 day(s) together</span>
</div>

<span class="translate">
<img class="hidden translatebutton" src="https://images.squidge.org/images/2026/02/28/translateone.png">
</span>

</div>
<span class="hiddenwithskin">The header section is (default) hidden when creator's workskin is off.</span>
</dl>

'incoming'

We can put multiple types of messages in one 'incoming' section:

Weekday, Month DD, YYYY
idolname: 00:00 AM
message
 message 2
 message 3
 message 4
code

<dl class="pluschat">
<div class="messagesscreen">

<div class="floatingday"><span class="date">Weekday, Month DD, YYYY</span></div>

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">: </span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="datetime">00:00 AM</span>
</span><span class="hiddenwithskin"><br></span>

<span class="idolmessage">message</span><span class="hiddenwithskin"><br></span>

<span class="idolmessage">message 2</span><span class="hiddenwithskin"><br></span>

<span class="idolmessage">message 3</span><span class="hiddenwithskin"><br></span>

<span class="idolmessage">message 4</span><span class="hiddenwithskin"><br></span>

</div>
</div>

</div>

</dl>

Or use multiple 'incoming' sections:

Weekday, Month DD, YYYY
idolname: 00:00 AM
message
 message 2
idolname: 00:00 AM
message 3
 message 4
code

<dl class="pluschat">
<div class="messagesscreen">

<div class="floatingday"><span class="date">Weekday, Month DD, YYYY</span></div>

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">: </span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="datetime">00:00 AM</span>
</span><span class="hiddenwithskin"><br></span>

<span class="idolmessage">message</span><span class="hiddenwithskin"><br></span>

<span class="idolmessage">message 2</span>

</div>
</div>

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">: </span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="datetime">00:00 AM</span>
</span><span class="hiddenwithskin"><br></span>

<span class="idolmessage">message 3</span><span class="hiddenwithskin"><br></span>

<span class="idolmessage">message 4</span>

</div>
</div>

</div>

</dl>

As well as vary the types of messages in any order!

note: I am removing the 'date' section (looks like: Weekday, Month, DD, YYYY) going forward, since it is optional and I just want to show the sections I am talking about

Weekday, Month DD, YYYY
idolname:
Ended Live:
 LiveTitle
 message
 Ended Live:
 LiveTitle
code

<dl class="pluschat">
<div class="messagesscreen">

<div class="floatingday"><span class="date">Weekday, Month DD, YYYY</span></div>

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">: </span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="hidden datetime">00:00 AM</span><span class="hiddenwithskin"><br></span>
</span>

<span class="idolmessagephoto">
<img class="hidden photo" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/f4cbb2cd1c67a4c18cc29bfa572dd386.jpg">
</span>

<span class="idolmessagelive">
<img class="hidden live" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/SIX_BD1FBEEA-D0A1-407D-A528-1296AACA2B0F.png">
<span class="livetexts">
<span class="liveendtext">Ended Live</span><span class="hiddenwithskin">:<br></span>
<span class="livetitle">LiveTitle</span><span class="hiddenwithskin"><br></span>
</span>
</span>

<span class="idolmessage">message</span><span class="hiddenwithskin"><br></span>

<span class="idolmessagelive">
<img class="hidden live" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/SIX_BD1FBEEA-D0A1-407D-A528-1296AACA2B0F.png">
<span class="livetexts">
<span class="liveendtext">Ended Live</span><span class="hiddenwithskin">:<br></span>
<span class="livetitle">LiveTitle</span><span class="hiddenwithskin"><br></span>
</span>
</span>

</div>
</div>

</div>

</dl>


'idolmesssage'

This message is a plain text message, which can include emojis, and as much text content as you would like.

idolname: 00:00 AM
 message
code

<dl class="pluschat">
<div class="messagesscreen">

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">:</span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="datetime">00:00 AM</span><span class="hiddenwithskin"><br></span>
</span>

<span class="idolmessage">message</span>

</div>
</div>

</div>

</dl>

note: Sometimes the line breaks can look a little strange when the text wraps/can have lots of right side extraneous space, which has to do with how width is determined in CSS, and is not really preventable unfortunately. If you add a line break into your text message at the right location, sometimes it can look better! If you have no idea what I'm talking about, ignore this entire italics section, I guarantee you won't notice ;)

'idolmessagelive'

idolname: 00:00 AM
 Ended Live:
 LiveTitle
code

<dl class="pluschat">
<div class="messagesscreen">

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">:</span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="datetime">00:00 AM</span><span class="hiddenwithskin"><br></span>
</span>

<span class="idolmessagelive">
<img class="hidden live" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/SIX_BD1FBEEA-D0A1-407D-A528-1296AACA2B0F.png">
<span class="livetexts">
<span class="liveendtext">Ended Live</span><span class="hiddenwithskin">:<br></span>
<span class="livetitle">LiveTitle</span>
</span>
</span>

</div>
</div>

</div>

</dl>


note: here I am adding a colon with the class "hiddenwithskin" and a line break <br> so that it has a nice appearance when the creator's style is off.

'idolmessagevoicememo'


idolname:
 ▶ --------00:00
code

<dl class="pluschat">
<div class="messagesscreen">

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">:<br></span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="hidden datetime">00:00 AM</span>
</span>

<span class="totalmemo">

<span class="idolmessagevoicememo">
<img class="hidden memoplay" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/SIX_16461506-59FF-4A06-B87B-B4175755F125.png">
<img class="hidden memolength" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/SIX_544F93E5-BB1B-4462-81BE-A033AC96F19C4f591670d7d34691.png">
<span class="hiddenwithskin">▶ --------</span><span class="memotimestamp">00:00</span>
</span>

<span class="memoexpbox">
<img class="hidden memoexpand" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/expand-1-1.png">
</span>

</span>

</div>
</div>

</div>

</dl>


'idolmessagephoto'


idolname:
 [img_1029.jpeg]
code

<dl class="pluschat">
<div class="messagesscreen">

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">:<br></span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="hidden datetime">00:00 AM</span>
</span>

<span class="idolmessagephoto">
<img class="hidden photo" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/f4cbb2cd1c67a4c18cc29bfa572dd386.jpg">
</span>
<span class="hiddenwithskin">[img_1029.jpeg]</span>

</div>
</div>

</div>

</dl>


'idolmessagevideo'


idolname: 00:00 AM
 [img_1029.mov]
code

<dl class="pluschat">
<div class="messagesscreen">

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">:</span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="datetime">00:00 AM</span><span class="hiddenwithskin"><br></span>
</span>

<span class="idolmessagevideo">
<img class="hidden video" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/36ed7dfa328bb48a4286c6465cc5010d.jpg">
<span class="hidden videotimestamp">▶︎ 00:26</span>
</span>
<span class="hiddenwithskin">[img_1029.mov]</span>

</div>
</div>

</div>

</dl>


'idolmessagesticker'


idolname:
 [sticker]
code

<dl class="pluschat">
<div class="messagesscreen">

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">:<br></span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="hidden datetime">00:00 AM</span>
</span>

<span class="idolmessagesticker">
<img class="hidden sticker" src="https://images.squidge.org/images/2026/02/27/bininistickerr.png">
</span>
<span class="hiddenwithskin">[sticker]</span>

</div>
</div>

</div>

</dl>


'fan content'


Me: 00:00 AM
fanmessage
code

<dl class="pluschat">
<div class="fan">

<div class="sender">
<span class="mename">Me</span><span class="hiddenwithskin">:</span>
<span class="datetime">00:00 AM</span>
</div>

<div class="fanmessage">fanmessage</div>

</div>

</dl>


'footer'


The footer section is hidden when creator's workskin is off.
code

<dl class="pluschat">
<div class="fan">

<div class="sender">
<span class="mename">Me</span><span class="hiddenwithskin">:</span>
<span class="datetime">00:00 AM</span>
</div>

<div class="fanmessage">fanmessage</div>

</div>

</dl><details><summary>code</summary><blockquote>
code</blockquote></details>

<p><br />
</p><h4>'footer'</h4>

<p><br />
</p><dl class="pluschat">
<div class="footer">

<div class="sendmessageoval">
<span class="hidden messagesend">Send a message</span>

<span class="addemoji">
<img class="hidden buttons" src="https://images.squidge.org/images/2026/02/28/addemoji.png">
</span>
</div>

</div>
<span class="hiddenwithskin">The footer section is hidden when creator's workskin is off.</span>
</dl>



When it's put all together it can look even as long as this:

Plus Chat

Weekday, Month DD, YYYY
idolname: 00:00 AM
 message
 Ended Live: LiveTitle

idolname: 00:00 AM
 message
 ▶︎ ------- 00:00

idolname: 00:00 AM
 message
 message
 [IMG_1234.MOV]

Me: 00:00 AM
fanmessage
idolname: 00:00 AM
 message
 [img_0123.jpeg]
 message

Me: 00:00 AM
fanmessage
idolname: 00:00 AM
 message
 [sticker]

Me: 00:00 AM
fanmessage

note: this one is just the entirety of template.html :)

code

<dl class="pluschat">
<div class="header">

<span class="backarrow">
<img class="hidden backbutton" src="https://images.squidge.org/images/2026/02/28/backarrowone.png">
</span>

<div class="centered">
<span class="hidden title">idolname</span><img class="hidden downarrow" src="https://images.squidge.org/images/2026/02/28/SIX_844663D7-CC78-4ECB-95DA-71F0E55F9971.png">
<span class="hidden daystogether">00 day(s) together</span>
</div>
<span class="hiddenwithskin">Plus Chat</span>

<span class="translate">
<img class="hidden translatebutton" src="https://images.squidge.org/images/2026/02/28/translateone.png">
</span>

</div><span class="hiddenwithskin"><br></span>

<div class="messagesscreen">

<div class="floatingday"><span class="date">Weekday, Month DD, YYYY</span></div><span class="hiddenwithskin"><br></span>

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">: </span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="datetime">00:00 AM</span><span class="hiddenwithskin"><br></span>
</span>

<span class="idolmessage">message</span><span class="hiddenwithskin"><br></span>

<span class="idolmessagelive">
<img class="hidden live" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/SIX_BD1FBEEA-D0A1-407D-A528-1296AACA2B0F.png">
<span class="livetexts">
<span class="liveendtext">Ended Live</span><span class="hiddenwithskin">: </span>
<span class="livetitle">LiveTitle</span>
</span>
</span>

</div>
</div> <span class="hiddenwithskin"><br></span>

 

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">: </span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="datetime">00:00 AM</span><span class="hiddenwithskin"><br></span>
</span>

<span class="idolmessage">message</span><span class="hiddenwithskin"><br></span>

<span class="totalmemo">

<span class="idolmessagevoicememo">
<img class="hidden memoplay" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/SIX_16461506-59FF-4A06-B87B-B4175755F125.png">
<img class="hidden memolength" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/SIX_544F93E5-BB1B-4462-81BE-A033AC96F19C4f591670d7d34691.png">
<span class="hiddenwithskin">▶︎ ------- </span><span class="memotimestamp">00:00</span>
</span>

<span class="memoexpbox">
<img class="hidden memoexpand" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/expand-1-1.png">
</span>

</span>

</div>
</div> <span class="hiddenwithskin"><br></span>

 

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">: </span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="datetime">00:00 AM</span><span class="hiddenwithskin"><br></span>
</span>

<span class="idolmessage">message</span><span class="hiddenwithskin"><br></span>

<span class="idolmessage">message</span><span class="hiddenwithskin"><br></span>

<span class="idolmessagevideo">
<img class="hidden video" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/36ed7dfa328bb48a4286c6465cc5010d.jpg">
<span class="hidden videotimestamp">▶︎ 00:26</span>
</span>

<span class="hiddenwithskin">[IMG_1234.MOV]</span>

</div>
</div> <span class="hiddenwithskin"><br></span>

 

<div class="fan">

<div class="sender">
<span class="mename">Me</span><span class="hiddenwithskin">: </span>
<span class="datetime">00:00 AM</span>
</div>

<div class="fanmessage">fanmessage</div>

</div> <span class="hiddenwithskin"><br></span>

 

<div class="incoming">
<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">: </span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="datetime">00:00 AM</span><span class="hiddenwithskin"><br>></span>
</span>

<span class="idolmessage">message</span><span class="hiddenwithskin"><br></span>

<span class="idolmessagephoto">
<img class="hidden photo" src="https://squidgeimages.s3.us-west-002.backblazeb2.com/2026/03/02/f4cbb2cd1c67a4c18cc29bfa572dd386.jpg">
</span>
<span class="hiddenwithskin">[img_0123.jpeg]</span><span class="hiddenwithskin"><br></span>

<span class="idolmessage">message</span>

</div>
</div> <span class="hiddenwithskin"><br></span>

 

<div class="fan">

<div class="sender">
<span class="mename">Me</span><span class="hiddenwithskin">: </span>
<span class="datetime">00:00 AM</span><span class="hiddenwithskin"><br>></span>
</div>

<div class="fanmessage">fanmessage</div>

</div> <span class="hiddenwithskin"><br></span>

 

<div class="incoming">

<div class="profpicdiv">
<img class="hidden profpic" src="https://images.squidge.org/images/2026/02/27/hanbinprofpic.jpeg">
</div>

<div class="idolmessagesgroup">

<span class="idolname">idolname<span class="hiddenwithskin">: </span>
<img class="hidden verify" src="https://images.squidge.org/images/2026/02/27/verify.png">
<span class="datetime">00:00 AM</span><span class="hiddenwithskin"><br>></span>
</span>

<span class="idolmessage">message</span><span class="hiddenwithskin"><br></span>

<span class="idolmessagesticker">
<img class="hidden sticker" src="https://images.squidge.org/images/2026/02/27/bininistickerr.png">
</span>
<span class="hiddenwithskin">[sticker]</span>

</div>
</div> <span class="hiddenwithskin"><br></span>

 

<div class="fan">

<div class="sender">
<span class="mename">Me</span><span class="hiddenwithskin">: </span>
<span class="datetime">00:00 AM</span><span class="hiddenwithskin"><br>></span>
</div>

<div class="fanmessage">fanmessage</div>

</div><span class="hiddenwithskin"><br></span>

 

</div>

<div class="footer">

<div class="sendmessageoval">
<span class="hidden messagesend">Send a message</span>

<span class="addemoji">
<img class="hidden buttons" src="https://images.squidge.org/images/2026/02/28/addemoji.png">
</span>
</div>

</div>

</dl>

I am available to contact on [twitter](https://x.com/neulbubble), and will even turn on public dms for a week or two in case you want to ask me about something (scary) (anything for you guys). You can also reach me by commenting here!

Please do not hesitate to reach out with questions/concerns/bugs! I am not always immediately available but I will be sure to get back to everyone as soon as possible :D

Notes:

my twitter!

Edit (03/14/2026): Updated template code to reflect changes in css (including: 'hidden' and 'hiddenwithskin' classes, so that elements can be shown or hidden depending on whether the work skin is toggled on or off)