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:
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").
If you want to add a time indicator, write "time" where you would usually wite a person's name (ie: "time: Today 2:30 PM").
Please separate individual messages by pressing enter (ie: one message on each line). If you don't do this, the output will be wrong.
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
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: "Why is there a "hide" span in the raw HTML?")
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"
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.
It's incredibly neat, if I do say so myself, and all credit for this, and the entire workskin I am using must go to "CodenameCarrot" and "La_Temperanza" on AO3 who made it!
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:message
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.
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 k, 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.
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
#workskin .hide {
display: none;
}
#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;
}