Work Text:
Demo (using my OCs):
Call Transcript:
Incoming call to Hadil
Hadil:Hey Mark! How are you?
Mark
Profeta:I'm alright, but there's this... this thing in our house, this... well, I think you'll just have to come home.
Hadil:Okay, I'll come right away! Is it alive? You're talking about it like it's alive.
?:[speaking in an unknown language]
Mark
Profeta:Yeah, but I've never seen anything like it. It looks distressed. Please be quick.
Call ended by Mark.
How to code it:
Create a new work skin or add the following to an existing work skin:
#workskin .window {
text-align: justify;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}
#workskin .callbox {
background-color: #ffffff;
color: #000000;
border-color: #cfcfcf;
border-style: solid;
border-width: 1px 1px 4px 1px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
width: 66%;
}
#workskin .calltitle {
background-color: #cfcfcf;
color: #000000;
border-color: #cfcfcf;
border-style: solid;
border-width: 1px;
margin: 0;
padding: 3px;
}
#workskin .calltext {
background-color: #ffffff;
color: #000000;
margin: 0;
padding: 3px;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
#workskin .caller {
padding: 3px;
text-align: right;
}
#workskin .callbody {
padding: 3px;
}
#workskin .callnote {
background-color: #ffffff;
color: #000000;
margin: 0;
padding: 3px;
display: flex;
flex-direction: row;
}
To look at each part:
#workskin .window {
text-align: justify;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}
This just centers everything. To be completely transparent, this was taken directly from the work which inspired this. I have asked La_Temperanza's permission, and they are okay with this.
#workskin .callbox {
background-color: #ffffff;
color: #000000;
border-color: #cfcfcf;
border-style: solid;
border-width: 1px 1px 4px 1px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
width: 66%;
}
This forms the box that the transcript goes into. The margins on the left & right center it, and the one border that is thicker than the others is the bottom. I think the rest is self explanatory.
#workskin .calltitle {
background-color: #cfcfcf;
color: #000000;
border-color: #cfcfcf;
border-style: solid;
border-width: 1px;
margin: 0;
padding: 3px;
}
This sets up the box that says "Call transcript".
#workskin .calltext {
background-color: #ffffff;
color: #000000;
margin: 0;
padding: 3px;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
This sets up each line of conversation.
#workskin .caller {
padding: 3px;
text-align: right;
}
This is for the name of person saying that line.
#workskin .callbody {
padding: 3px;
}
This is for the actual content of each line.
#workskin .callnote {
background-color: #ffffff;
color: #000000;
margin: 0;
padding: 3px;
}
This is for the stuff that says who picked up and ended the call.
In the fic you want to use this in, select the workskin that contains the above CSS.
Now, for the HTML that you'll put in your actual fic, let's start with the code for the demo:
<div class="window">
<div class="callbox">
<p class="calltitle"><b>Call Transcript:</b></p>
<p class="callnote"><i>Incoming call to Hadil</i></p>
<p class="calltext"><span class="caller"><b> Hadil:</b></span><span class="callbody">Hey Mark! How are you?</span></p>
<p class="calltext"><span class="caller"><b>Mark<br />Profeta:</b></span><span class="callbody"><i>I'm</i> alright, but there's this... this <i>thing</i> in our house, this... well, I think you'll just have to come home.</span></p>
<p class="calltext"><span class="caller"><b> Hadil:</b></span><span class="callbody">Okay, I'll come right away! Is it alive? You're talking about it like it's alive.</span></p>
<p class="calltext"><span class="caller"><b> ?:</b></span><span class="callbody">[speaking in an unknown language]</span></p>
<p class="calltext"><span class="caller"><b>Mark<br />Profeta:</b></span><span class="callbody">Yeah, but I've never seen anything like it. It looks distressed. Please be quick.</span></p>
<p class="callnote"><i>Call ended by Mark.</i></p>
</div>
</div>
This shows the basic format you have to use. Let's break it down:
<div class="window">
<div class="callbox">
The first line sets up the fact that the actual callbox will be centered. The second line creates the actual callbox. At the end of each callbox there will be two </div>, which close these first two lines off. Don't forget them.
<p class="calltitle"><b>Call Transcript:</b></p>
This line is pretty self explanatory. It creates the title of the callbox. You can change "Call Transcript" to something else, if you want, but I don't see why you would.
<p class="callnote"><i>Incoming call to Hadil</i></p>
This is the first "note". You can add more details to it, if you'd like, such as date & time. That could look something like this:
<p class="callnote"><i>March 24, 14:53<br>Incoming call to Hadil</i></p>
which would look like:
March 24, 14:53
Incoming call to Hadil
The <br> acts as a line break.
Next is the actual conversation:
<p class="calltext"><span class="caller"><b> Hadil:</b></span><span class="callbody">Hey Mark! How are you?</span></p>
<p class="calltext"><span class="caller"><b>Mark<br />Profeta:</b></span><span class="callbody"><i>I'm</i> alright, but there's this... this <i>thing</i> in our house, this... well, I think you'll just have to come home.</span></p>
<p class="calltext"><span class="caller"><b> Hadil:</b></span><span class="callbody">Okay, I'll come right away! Is it alive? You're talking about it like it's alive.</span></p>
<p class="calltext"><span class="caller"><b> ?:</b></span><span class="callbody">[speaking in an unknown language]</span></p>
<p class="calltext"><span class="caller"><b>Mark<br />Profeta:</b></span><span class="callbody">Yeah, but I've never seen anything like it. It looks distressed. Please be quick.</span></p>
You'll notice that each line follows the same format. Let's break it down.
Each line starts with <p class="calltext">. This defines the line.
The next section is <span class="caller"><b> [NAME]:</b>. The <b> tags make the name bold. You may notice that the number of differs between callers. These are spaces that won't collapse into one space, like the space you type with your spacebar will. They're used here so that the colons at the end of each caller's name line up with each other. What I suggest doing is when you first set up this code, set up a conversation between your characters where they each talk once. Then add before the names of the characters with shorter names until all of the colons line up. Once you know how many you have to add in front of each characters name, you can write your actual fic. If you use your characters' first and last names, you may want to put a line break (with the tag <br>) between their first and last name. Do this before adding the . This is demonstrated with Mark's lines.
Next is what the caller is actually saying: </span><span class="callbody">[DIALOGUE]</span></p>. It's pretty self explanatory. Note the closing </p> tag, which ends the line established by the <p class="calltext"> code.
After this is a second "callnote" section, just like before, but with the text changed. Here it states who hung up the call. It can be modified to say other things or include multiple lines just like the first callnote can.
</div>
</div>
Finally, the last two lines. These simply close off the first two lines.
Now that everything is explained, here is a blank template:
<div class="window">
<div class="callbox">
<p class="calltitle"><b>Call Transcript:</b></p>
<p class="callnote"><i>Incoming call to [NAME]</i></p>
<p class="calltext"><span class="caller"><b>[NAME]</b></span><span class="callbody">[DIALOGUE]</span></p>
<p class="callnote"><i>Call ended by [NAME].</i></p>
</div>
</div>
This looks good on mobile, and the way it is formatted it still makes sense when the creator's style is hidden.
Have fun with this!