Input the names and corresponding usernames into the form below
Names are replaced by usernames in the final text!
Names are case in-sensitive ("steve", "Steve" and "StEvE" are all seen as the same character)!
A name of "Tony" and username of "TheRealTonyStark" will let you write Tony's messages as "Tony: message" instead of having to type "TheRealTonyStark: message" over and over and over again. The final text will still display all messages by Tony as being written by "TheRealTonyStark".
Current (user)names:
How to format messages
A single message is written in the format "name: message" (ie: "Steve: Hi").
A reply is written in the format "sender,receiver: message" (ie: "Steve, Tony: Hello!").
A blue message is written in the format "me: message", where "me" is a name you inputed into the form above. (ie: "me: This message will be blue")
If you want a typing indicator write "typing" into the message (ie: "Steve: typing"). Blue messages can have a typing indicator as well ("me: typing").
For time, read and delivered indicators, reffer to the explanations and examples below
Please separate individual messages by pressing enter (ie: one message on each line). If you don't do this, the output will be wrong.
More Explanations/Examples:
Let's say we have the name "Steve" with the username "CaptainAmerica" and the name "Tony" with the username "TheRealTonyStark".
The following text:
time: Today 14:30
Steve: hey there, I'm captain america
Tony: Yeah, we know Steve, you set it as your username.
Steve,Tony: Oh I see!
Tony: typing
Today 14:30
CaptainAmerica:
hey there, I'm captain america
TheRealTonyStark:
Yeah, we know Steve, you set it as your username.
CaptainAmerica replied to TheRealTonyStark:
Oh I see!
Tony: typing
If you want blue messages, you will have to create a name-username pair, where the name is "me" and the username is whatever you want that character's username to be.
Even though the username of the pov charcater is not displayed, you should still give them a representative username. The username is visible when AO3 workskins are hidden for a reader. (see: "Screen-reader compatibility")
For example, if we wanted to write messages from the point of view of Peter Parker, we would make a character with the name "me" and the username "Peter". Then we would write all of Peter's messages as "me:message"
So "me:Hey guys, I'm here too"Peter (You):
Hey guys, I'm here too
If you want to have one on one conversations, you don't want to see the other person's name after every message they type, of course. Similarly to the "me" message, you can therefore set up a character with the name "you" and the username of whatever you want the character to be named. This way, the name of any "you" message will not be visible with the workskins enabled, but will still be visible for anyone not using the worskins, so they know which character is typing!
While messages in the format "me,you:message" will look like regular messages with the workskin, without it, the text will still say that the "me" character replied to the "you" character!
So if I have a character with the name "me" and username "Peter" and another character with the name "you" and username "MJ", a one-on-one conversation between them
Peter (You):
so when should I pick you up?
MJ:
around 10?
You replied to MJ:
Great, I'll swing by
MJ replied to you:
I thought we were going by car?
You might notice that in the code you copy over to your AO3, there are spans with the "hide" class. These hide spans are a way to make chat-messages acessible for people with screen-readers, for people downloading your work to read offline and for anyone who has workskins disabled on their AO3 profile.
The workskin provided below automatically hides anything in the "hide" span when the workskin is working as intended. But if the worskin is not working, all text (even the one in hide spans) will be visible.
These hide spans contain clarifying information, such as usernames of the authors of blue messages, so that it is obvious who is typing.
It's incredibly neat, if I do say so myself, and all credit for this, and the workskin I am using must go to "CodenameCarrot" and "La_Temperanza" on AO3 who made it!
The skin provides three types of indicators. Time, Read and Delivered. The read and delivered will display on the right or left side depending on which side of the conversation performed that action.
Time:
Time indicators are written in the form "Time: text". These indicatros appear in the middle of the display, instead of on the left or right.
So "Time: 10:30" followed by "MJ: Hey Peter, are you on your way?"
10:30
MJ:
Hey Peter, are you on your way?
Gray Read/Delivered:
Read and Delivered indicators show if a message has been read or delivered. If you want the indicator to be under a grey message, you write them in the form "read: text" or "delievered: text"
MJ:
Hey Peter, are you on your way?
Read: Now
Blue Read/Delivered:
If you want the indicator to be under a blue message, you write them in the form "me, read: text" or "me, delievered: text"
Peter (You):
yeah sorry, I lost track of time
Read: 1 minute ago
messages- [name]:[message]
replies- [sender],[reciever]:[message]
blue messages- me:[message]
gray replies without names- you:[message]
typing indicator- [name]:typing (or you:typing)
blue typing indicator- me: typing
time indicator- time:[time]
gray read indicator- read:[message]
gray delivered indicator- delivered:[message]
blue read indicator- me,read:[time]
blue delivered indicator- me,delivered:[time]
Note: all "<" and ">" characters will be converted into a string of letters in the HTML text. This is to ensure they are displayed properly by the website/AO3 which would otherwise see them as valid HTML tags. So don't change them back.
Message Creator
Preview of your chat conversation:
This is what you copy over to AO3:
Workskin Information:
What's a workskin?
A workskin is AO3's way of implementing styles. It can be used to show text in different fonts, to change how your fic looks, and, in our case, it is used to make the messages we created earlier look like messages instead of raw code.
Below, you will find the code you have to paste into your AO3 workskin. To create a skin, you will go to your AO3 dashboard, click on the button "skins", then "my work skins" and "create work skin". There, you will copy all the code below. You can also add this code to an existing workskin by editing it!
When you want to apply the workskin to a particular work, you will select the workskin (the last field in the "Associations" part of the work creation) and then copy the HTML text message text from above into the "HTML" text editor.
I want my messages to be a different color!
While the buttons bellow only change the contents of the worksin (but not the website (curese you pseudo-classes in css)), with the color pickers, you can change the colors of your incoming (grey) and outgoing (blue) messages.
The example texts show how such a message would look, but the worskin itself only gets updated when you click the "Update workskin" button.
Please not that any time you change these settings, the text of the workskin below changes and needs to be updated on your AO3!
Example Text
Example Text
Contents of your chat workskin
#workskin .hide {
display: none;
}
#workskin .header {
min-width: 300px;
padding-left: .5em;
padding-right: .5em;
background-color: #f6f6f6;
border-bottom: 1px solid #b2b2b2;
color: #000000;
font-weight: bold;
padding-bottom: .5em;
padding-top: .5em;
margin-left: -.5em;
margin-right: -.5em;
text-align: center;
text-transform: capitalize;
display: table;
}
#workskin .phone {
max-width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: table;
}
#workskin .messagebody {
width: 300px;
background-color: #FFFFFF;
display: table;
padding-left: .5em;
padding-right: .5em;
}
#workskin .text {
float: left;
color: #000000;
margin: 0 0 0.5em;
border-radius: 1em;
padding: 0.5em 1em;
background: #e5e5ea;
max-width: 75%;
clear: both;
position: relative;
}
#workskin .text::after {
content: "";
position: absolute;
left: -.5em;
bottom: 0;
width: 0.5em;
height: 1em;
border-right: 0.5em solid #e5e5ea;
border-bottom-right-radius: 1em 0.5em;
}
#workskin .breply {
float: right;
color: #FFFFFF;
margin: 0 0 0.5em;
border-radius: 1em;
padding: 0.5em 1em;
background: #1289fe;
max-width: 75%;
clear: both;
position: relative;
}
#workskin .breply::after {
content: "";
position: absolute;
right: -0.5em;
bottom: 0;
width: 0.5em;
height: 1em;
border-left: 0.5em solid #1289fe;
border-bottom-left-radius: 1em 0.5em;
}
#workskin .greply {
float: right;
color: #FFFFFF;
margin: 0 0 0.5em;
border-radius: 1em;
padding: 0.5em 1em;
background: #35cb24;
max-width: 75%;
clear: both;
position: relative;
}
#workskin .greply::after {
content: "";
position: absolute;
right: -0.5em;
bottom: 0;
width: 0.5em;
height: 1em;
border-left: 0.5em solid #35cb24;
border-bottom-left-radius: 1em 0.5em;
}
#workskin .time {
min-width: 295px;
color: #7B7C80;
font-size: .75em;
padding-bottom: .5em;
padding-top: .5em;
margin-left: -.5em;
margin-right: -.5em;
margin-bottom: -.5em;
text-align: center;
display: table;
}
#workskin .typing-indicator {
background-color: #e6e7ed;
width: auto;
border-radius: 1em;
padding: .5em 1em;
display: table;
margin: 0 0 .5em;
position: relative;
overflow: hidden;
text-align: left;
clear: both;
}
#workskin .typing-indicator::before,
#workskin .typing-indicator::after {
content: '';
position: absolute;
bottom: -2px;
left: -2px;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #e6e7ed;
}
#workskin .typing-indicator::after {
height: 6px;
width: 6px;
left: -6px;
bottom: -6px;
}
#workskin .typing-indicator span {
height: 15px;
width: 15px;
float: left;
margin: 0 1px;
background-color: #9E9EA1;
display: block;
border-radius: 50%;
opacity: 0.4;
}
#workskin .typing-indicator span {
height: .65em;
width: .65em;
float: left;
margin: .425em 0 .425em .25em;
margin-left: 0.25em;
background-color: #9e9ea1;
display: inline-block;
border-radius: 50%;
opacity: .5;
}
#workskin .typing-indicator span:first-child {
margin-left: 0;
}
#workskin .typing-indicator span:nth-child(1) {
opacity: .85;
}
#workskin .typing-indicator span:nth-child(2) {
opacity: .65;
}
#workskin.names {
color: #7B7C80;
font-size: .75em;
padding-bottom: .5em;
padding-top: 0;
margin-left: .5em;
margin-bottom: -2.5em;
text-align: left;
display: table;
clear: both;
}
.me_typing-indicator {
background-color: #1289fe;
width: auto;
border-radius: 1em;
padding: .5em 1em;
display: table;
margin: 0 0 .5em;
position: relative;
overflow: hidden;
text-align: left;
clear: both;
float: right;
max-width: 75%;
}
.me_typing-indicator::before,
.me_typing-indicator::after {
content: '';
position: absolute;
bottom: -2px;
left: -2px;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #1289fe;
}
.me_typing-indicator::after {
height: 6px;
width: 6px;
left: -6px;
bottom: -6px;
}
.me_typing-indicator span {
height: 15px;
width: 15px;
float: left;
margin: 0 1px;
background-color: #9E9EA1;
display: block;
border-radius: 50%;
opacity: 0.4;
}
.me_typing-indicator span {
height: .65em;
width: .65em;
margin: .425em 0 .425em .25em;
margin-left: 0.25em;
background-color: #9e9ea1;
display: inline-block;
border-radius: 50%;
opacity: .5;
}
.me_typing-indicator span:first-child {
margin-left: 0;
}
.me_typing-indicator span:nth-child(1) {
opacity: .85;
}
.me_typing-indicator span:nth-child(2) {
opacity: .65;
}
.me_readreceipt {
color: #7B7C80;
font-size: .75em;
float: right;
position: relative;
clear: both;
margin: -.75em -1.25em 0.5em 0;
padding: 0 1em 0.5em;
}
.you_readreceipt {
color: #7B7C80;
font-size: .75em;
float: left;
position: relative;
clear: both;
margin: -.75em -1.25em 0.5em 0;
padding: 0 1em 0.5em;
}