Chapter Text

Chapter Text

Before we properly get started playing around with the work skin, I would like to explain how to upload everything we need to start making fics using AO3's Workskins page.

If you already know how to create Work Skins, then you can skip this chapter and go to the next after you have created your workskin using the links below:

PasteBin for CSS

https://pastebin.com/TbiPYrqa

PasteBin for Code/HTML

https://pastebin.com/UXDVYmGG

Setting up the Work Skin

You will want to be logged in. From the main Dashboard, navigate to “Skins.”

AO3 will automatically spit you out on “My Site Skins.” Click to the right, on “My Work Skins.”

Here, you can see all of the work skins you have already created!

From there, navigate to the top and select “Create Work Skin.”

From here, we are on a new page called “Create New Skin.” It's time to start filling information out! The Title and Description are yours to label how you wish. Consider naming it something practical but still unique so AO3 does not yell at you when you try to save it. You will have to search for this name later.

I'm keeping the Type as Work Skin and scrolling down to start pasting.

It's time to enter our CSS.

CSS, or Cascading Style Sheets, are like the style “rules” of the code we will be creating later.

In code, you are using tags to designate different parts of your code to behave a certain way. CSS looks at these tags and the classes of those tags to determine what parts receive what styles. Simply put, CSS can do anything from changing the color of something to adjusting the size and spacing of it around other elements. If you ever want to tweak any of those, you will be going here to change it. Otherwise, it's best not to touch much of it when first starting out.

I get into more info dumping about how CSS works in “Troubleshooting and Tools” if you'd like to understand more.

PasteBin for CSS

https://pastebin.com/TbiPYrqa

Click on the link above to copy and paste it into the CSS section.

Once you're done, click “Submit” and scroll back up to “Post.”

I am going to trust that you have posted a fic before, so go ahead and fill out the required fields to create a new work. We will fill out the Work Text together.

Under Associations, we are going to select the work skin we made from the “Select work skin” section. This will load in all of our CSS styles.

Once you have the rest of the information filled out, please open the link below and paste into the Work Text area, making sure you have HTML selected and NOT Rich Text.

PasteBin for Code/HTML

https://pastebin.com/UXDVYmGG

Once you have done so, Preview your work and marvel at it! I will be breaking down the parts of each of the three examples in the next chapters. Check Troubleshooting + Tools in case you need more help and if something doesn't look right.

Chapter Text

The Components

My code is broken up into several pieces but the really great thing is that because this is a texting workskin, these pieces can be mixed and matched to a degree. There are three main pieces that comprise the fic: the top/header info and the aptly named user-container and otheruser-container. There are also some other optional pieces to add some pizazz to your messages!

Table of Contents:

1. Top/header info
2. User and Otheruser Containers
• User container
• Otheruser container
• Using them together
• Working with icons
3. Extra Pieces
• Alert Messages
• Images
• Timestamps
• Mini Summaries
• Fake Links

Top/Header Info

Example:

<div class="grid-container"></div>
<div class="messenger">
<div class="messagebody">
<div class="header">
<p class="contact">The Astral Express Family</p>
</div

Result:

This piece of code is only used once at the very start of the text conversation to initiate the container and set things up for our messages.

The text inside the carrots (`<` and `>`) are called tags. We have a few here. Each one needs to be accompanied by a closing tag at some point, otherwise it may break your code. <div> will be accompanied by </div> at the end of the text conversation so that the formatting we put here doesn't bleed into the rest of your fic.

And then we have our normal text, “The Astral Express Family,” wedged between our “contact” class. You can change this text to whatever you want. (I tried to be literal with my coding naming conventions so you know what everything is and to make swapping this text out a little easier, such as “name” or “icon”.)

Adding an Optional Summary

Example:

<div class="grid-container"></div>
<div class="messenger">
<div class="messagebody">
<div class="header">
<p class="contact">March 7th</p>
<p><span class="tagline">Today is also March 7th~</span><br /></p>
</div>

Result:

Just add in this “tagline” class inside a <p> tag if you would like to include a little summary!

Please note: If you want to make the message truncated, like the below example, you will have to do that manually by typing out a small part of the phrase and adding the ellipse manually. You can save as a draft and check the drafted work to see if the text fits.

User and Otheruser Containers

These two are going to be 80% of your fic.

User Container

Example:

<div class="user-container">
<div class="user-messages">
<p>
<span class="user-name">Saru</span><br />
<span class="user-reply">Found some strange items...</span><br />
</p>
</div>
<div class="user-icon">
<p>
<span class="icon">
<img src="https://i.imgur.com/73pSK7H.png"/>
</span>
</p>
</div>
</div>

Result:

Otheruser Container

Example:

<div class="otheruser-container">
<div class="otheruser-icon">
<p>
<span class="icon">
<img src="https://static.wikia.nocookie.net/houkai-star-rail/images/1/1a/Character_Dan_Heng_Icon.png"/>
</span>
</p>
</div>
<div class="otheruser-messages">
<p>
<span class="otheruser-name">Dan Heng</span><br />
<span class="otheruser-text">Relics.</span>
</p>
</div>
</div>

Result:

Using them together

I wanted to compare them here so you can see the difference. The user and other-user use the same pieces but they are ordered differently to put them on opposite sides of the container.

Pieces you can change:

• “User-name” and “otheruser-name”: Where you'd put the name
• “User-reply” and “otheruser-text”: The text message goes here
• “Icon”: The link to the character icon goes here.

Working with icons

All images are enclosed inside this code as urls: `<img src="https://static.wikia.nocookie.net/houkai-star-rail/images/d/d3/Character_March_7th_Icon.png"/>`
You can highlight the above url and replace it with your own.

• Use an image that is already cropped as a square otherwise it might do funky things.
• I use Imgur to store my urls. Or sometimes I'm lazy and use the hsr wiki.
• It's likely you'll be working with the same 2+ characters. If you're working with a lot of texts, save yourself the trouble of having to copy and paste the icon url every time and instead save one of my examples with the user-name, user-reply, and icons swapped to yours so you only have to edit the reply.
• “Save as Draft” and “Preview” are your friends, so use them to check your images. There's also a tool I include in the Troubleshooting + Tools section that will help you test to make sure your image urls and such work.

Extra Pieces

Alert messages

Example:

<span class="alert">
<span class="mini_img"/><img src="https://static.wikia.nocookie.net/houkai-star-rail/images/e/ed/Icon_Dialogue_Warning.png">This is a warning message </span> </div>

Result:

I just used the warning png from the wiki and added a class (“mini_img”) to shrink it down. If you want the image on its own line, do this:

<span class="alert">
<span class="mini_img"/><img src="https://static.wikia.nocookie.net/houkai-star-rail/images/e/ed/Icon_Dialogue_Warning.png"><br />
This is a warning message </span> </div>

Result:

I just added a <br /> tag so it will appear on its own line.

Images

Example:

<div class="user-container">
<div class="user-messages">
<p>
<span class="user-name">Trailblazer</span><br />
<span class="user-img"><img src="https://static.wikia.nocookie.net/houkai-star-rail/images/f/f6/March_7th_Sticker_07.png"></span>
</p>
</div>
<div class="user-icon">
<p> <span class="icon">
<img src="https://i.imgur.com/73pSK7H.png"/>
</span>
</p>
</div>
</div>

Result:

In the spaghetti code above, you would be changing this line to add your own image:

<span class="user-img"><img src="https://static.wikia.nocookie.net/houkai-star-rail/images/2/21/Sticker_PPG_01_March_7th_08.png"></span>

Just pop your own hyperlink in to replace March's!

On the other side:

Example:

<div class="otheruser-container">
<div class="otheruser-icon">
<p>
<span class="icon">
<img src="https://static.wikia.nocookie.net/houkai-star-rail/images/d/d3/Character_March_7th_Icon.png"/>
</span>
</p>
</div>
<div class="otheruser-messages">
<p> <span class="otheruser-name">March 7th</span><br />
<span class="otheruser-img"><img src="https://static.wikia.nocookie.net/houkai-star-rail/images/2/21/Sticker_PPG_01_March_7th_08.png"></span>
</p>
</div>
</div>

Result:

Again, user and otheruser are ordered opposite each other. So, for the otheruser, the image is first and their icon is below that in the code.

Things to keep in mind:

• You cannot send a picture with text. The text itself needs to end up being its own message.
• The CSS should size down the image at whatever size you give it so it is a fixed width. If you want to adjust how large images are allowed to be, that is something you can change in the CSS.
• The code for the user and otheruser is ordered differently for messages/sent images and icons.

Timestamps

Example:

<div class="otheruser-container">
<div class="otheruser-icon">
<p>
<span class="icon">
<img src="https://i.imgur.com/Js5buAc.png"/>
</span>
</p>
</div>
<div class="otheruser-messages">
<p>
<span class="otheruser-name">Incident Logger <span class="mini-time">10:00 a.m.</span></span>
<br />
<span class="otheruser-text">[Incident #001]: Late Arrival in Reporting for Duty<br />
</p>
</div>
</div>

Result:

This is the code you would add beside the name in either user or otheruser:

<span class="mini-time">10:00 a.m.</span></span>

Make sure you add a space or two between the name and the time!

If I were to include it on a user, I might do it this way:

Which would include this code:

<span class="user-name"><span class="mini-time">10:00 a.m.</span>Saru</span>

Mini Summaries

Where you would usually put a message you could also put what I call a “mini summary”, aka just text sized slightly smaller. I thought it might look interesting for something like an article.

You would put this inside the otheruser-text or user-text class.

Example:

<span class="otheruser-text">[Incident #001]: Late Arrival in Reporting for Duty<br />
<span class="text-mini-summary">On [5 March], [Lieutenant Yanqing] arrived 10 minutes late to the Seat of Divine...</span><br />

Result:

If you want ALL the text to be smaller, you'd nest them like this:

Example:

<span class="user-name">Saru</span><br />
<span class="user-reply"><span class="text-mini-summary">Hehehe...Ahahahaha! There is no need to fear. The pain will be brief. Your era...is coming to an end.</span></span><br />
</p>
</div>

Result:

The mini text is spaced apart differently due to how I did the CSS but I am lazy so it probably will not get fixed.

Fake Link

Example:

<span class="text-link">[Full Report]</span></span>

Result:

You can add the “text-link” class to any existing text to make it underlined and this nice brown-ish color.

Example:

<span class="otheruser-text text-link">Consult this website.</span>

Result:

In this example, I used TWO classes on one message by adding a space then putting it down beside the existing one(s) (In this case, "otheruser-text” and “text-link”). It isn't very visible on user messages because they're both mustard-colored but eh it is what it is. You could theoretically make a new class in the CSS for a different color then initiate it as a I showed above with the name and a span tag.

Chapter Text

Troubleshooting

• Isolate the code that is giving you trouble.
• Make sure you close all of your tags.
• Check your image urls.
• Check your spelling.
• For the love of god be careful of curly quotation marks or “smart quotes”, as those are sometimes read as a different character in code and are useless in making your code work.
• If you have to ask google for help, make sure to start by asking broad questions. You can also try referring to other text workskins on AO3 to see how they're done, as they probably work similarly.
• The more familiar you get with how coding works, the less trouble you will have. A 1-minute video can actually be super helpful!

If nothing else works, go back to a point where it did work and start from there. This is why you want to check your code often to make sure it's doing what you expect it to do. The sandbox and live server are so useful for this. Hopefully in your case, it will mostly be just plug in and play since you'll be using existing code. It's only once you start trying to do new things with it that funky stuff will happen. Things like this Code Academy Page and W3 Schools are very informative. W3 especially is where I find many of my answers.

For those who are a little more tech-savvy or willing to learn, you can also Inspect webpages by right-clicking on the page to see what the HTML looks like! I would highly recommend also using the sandbox mentioned below and working backwards to inspect CSS of other fics you like to see how other people achieved certain effects you're trying to achieve by feeding it that same code. If you inspect Ch. 1, you'll see the same HTML and CSS I gave you, only now the two pieces are working together.

Tools

• Scrivener
• VSCode
• AO3 Workskin Sandbox by lastontheboat
• Images (HSR Fandom wiki & Imgur)

Scrivener

I use scrivener to write my fic for reasons too numerous to name but one of them is that it allows you to easily switch between many documents in the same binder so you can store pieces of the same story and grab them easily to combine later.

I can format parts of my text as “code block” so that it looks like code, even if it functionally isn't. I have a folder off to the side where I store all of my HTML and CSS elements so that when it's time to post, I have them properly formatted and separated from my fic so it doesn't all look like spaghetti. I will post the rest of my text as Rich Text and then switch to HTML and paste the HTML portions in separately. It's two trips but it's easier to handle than trying to convert the rest of the text to have formatted HTML. However, I have noticed that even using code block/code span doesn't stop my computer from converting quotes to “curly quotes,” so that's something to be careful of.

Visual Studio Code

VSCode (Visual Studio Code) is for coding. It is intimidating. But when you're copying and pasting the same two messages over and over just to change what is being said between two characters, it's much easier on the eyes and gets along better with your code.

AO3 has a way of taking any code you give it and turning it into spaghetti immediately if it's more complicated than one `<p>` tag. With VSCode, it makes it abundantly obvious what is code and what is text that is editable. It helps you structure your code so the right elements are on lines together and looks neater.

Below are two images of just how stark the contrast is. This is how I usually work when I'm in VSCode— I have my user container with its text, one blank space, and then the next chunk. I keep alternating chunks until the texts are done, editing the messages or users as needed.

VSCode:

AO3 HTML:

Live Server

Live Server is an extension you can download from VSCode to see your changes on a website as you make them. It's really helpful when you want to see everything quickly without having to save and upload it anywhere.

To get it to work, though, you have to understand a little more about how coding works. You will want to take the HTML and CSS I provided from Chapter 2 (linked at the very top) and put them in VSCode as separate files. They would look something like this, making sure to put the .css or .html attachments, respectively:

Then, go into your html and at the very top and paste this code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="star_rail.css" />
<title>Document</title>
</head>
<body>

(OR: you should be able to type '!' at the very top of the document and hit Enter to have it populate, though you'll need to adjust the link rel="stylesheet" section with our star_rail.css file.)

Once that is done, the only thing you need to do to start up the Live Server is follow a really short Youtube video (slowed down probably because the guy talks a little fast) to install the Live Server itself.

AO3 Workskin Sandbox

User Lastontheboat has created this tremendously helpful tool to help you tweak your CSS. It's similar to the Live Server situation I mentioned before, but where that was more useful for making changes to your HTML, this is crucial in figuring out what AO3 will do to your CSS.

AO3 has built-in padding and margins to every element on the page, so my CSS adjusts some of those. If you go in and tweak my CSS, AO3 may do something unpredictable about it because I do not keep track of the padding, margins, etc. This is another reason why you should try to use the sandbox as much as you can or save the fic as a draft and pull it up to see how it actually behaves on AO3.

Instructions are on the website. But what I think it's doing is taking the page you feed it and working backward to figure out what CSS is being used on the page so you can make changes to it. This doesn't just work on your WIPs but other things, too. You could grab the CSS from this page, too, and figure out what my style sheet looks like.

As of writing this, this still exists and it has saved my butt so many times.

Lastontheboat's Workskin Sandbox

Using the wiki

Wiki images sometimes have “revised” in the link and if they do you can delete everything after the file name

I take the character icons from this page:

https://honkai-star-rail.fandom.com/wiki/Character

I scroll all the way to the bottom, pop it open in another window, then delete everything after the file name. So, delete “revision/latest/…” etc, etc. I think the site uses that to scale them down but the CSS on the fic will do that for us. So, if you open a profile picture in a new window and it's super shrunk down, you've found the right pic, just delete everything after ".png"!

Same thing for all the stickers:

https://honkai-star-rail.fandom.com/wiki/Category:Stickers

Imgur

Imgur is great and I use it. Nothing in particular to note there aside from making sure you copy the whole link. Some sites and tools don't like showing photos uploaded to imgur, but published fics have been good about it in my experience. It's just on the Live Server I mentioned before that they don't always load.

Chapter Text

CSS

#workskin .grid-container {
display: grid;
grid-template-columns: auto 60px 60px 60px 60px 60px auto;
padding: 10px;
}

#workskin .grid-item {
padding: 10px;
text-align: center;
}

#workskin img,
#workskin .user-img,
#workskin .otheruser-img {
width: auto;
height: 84px;
margin-top: 5px;
margin-bottom: 5px;
}

#workskin .user-img,
#workskin .otheruser-img {
margin-bottom: 2em;
}

#workskin .user-img {
float: right;
}

#workskin .contact {
color: black;
font-family: Arial;
font-weight: bold;
margin-bottom: -10px;
margin-top: -5px;
}

#workskin body {
background-color: #3b292c;
}

#workskin .messenger {
max-width: 300px;
margin: auto;
margin-bottom: 25px;
}

#workskin .messagebody {
min-width: 320px;
max-height: 70vh;
background: linear-gradient(50deg, rgb(223 223 223), rgba(213, 213, 213, 0.949));
padding-left: .5em;
padding-right: .5em;
display: table;
border-radius: 0 1em 0 0;
overflow-y: scroll;
overflow-x: scroll;
}

#workskin .header {
color: rgb(210 210 210);
font-size: 17px;
text-align: left;
margin: auto;
padding-left: 1rem;
padding-top: 1rem;
padding-bottom: .4rem;
margin-bottom: 1rem;
margin-left: -.5em;
margin-right: -.5em;
border-bottom: rgb(125 125 125) 1.5px solid;
border-radius: 0 1em 0 0;
}

#workskin .otheruser-text {
float: left;
background: rgb(235 235 235);
box-shadow: -1px 1px rgb(125 125 125);
}

#workskin .user-reply {
float: right;
background: rgb(210 185 140);
box-shadow: 1px 1px rgb(125 125 125);
}

#workskin .user-messages p,
#workskin .otheruser-messages p,
#workskin .header p,
#workskin .otheruser-icon p,
#workskin .user-icon p,
#workskin .alert p,
#workskin .mini_img p {
margin: 0px;
padding: 0px;
}

#workskin .otheruser-text,
#workskin .user-reply {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
max-width: 80%;
padding: .2em 1em;
clear: both;
position: relative;
font-size: 14px;
line-height: 1.2rem;
}

#workskin .otheruser-text,
#workskin .user-reply {
margin: 0 0 .5em;
margin-bottom: 1rem;
}

#workskin .otheruser-text {
border-radius: 0 .5em .5em .5em;
}

#workskin .otheruser-text,
#workskin .user-reply {
margin-top: .8rem;
}

#workskin .user-reply {
border-radius: .5em 0 .5em .5em;
}

#workskin .fbhide {
display: none;
}

#workskin .otheruser-name {
padding-top: 0;
margin-bottom: -2.5em;
display: table;
clear: both;
}

#workskin .user-name {
padding-top: 0;
display: table;
margin-bottom: -2.5em;
margin-left: auto;
clear: both;
}

#workskin .tagline,
#workskin .alert,
#workskin .otheruser-name,
#workskin .user-name {
font-size: .8em;
font-family: Arial, Helvetica, sans-serif;
color: rgb(120 120 120);
font-weight: bold;
}

#workskin .user-container {
display: grid;
grid-template-columns: auto 50px;
}

#workskin .otheruser-container {
display: grid;
grid-template-columns: 50px auto;
}

#workskin .otheruser-messages {
min-width: 220px;
}

#workskin .otheruser-icon,
#workskin .user-icon {
display: inline-block;
width: 40px;
}

#workskin .user-icon {
margin-left: auto;
}

#workskin .icon img {
border-radius: 50%;
width: 40px;
height: 40px;
background-color: rgb(50, 50, 50);
}

#workskin .mini_img img {
width: 20px;
height: 20px;
margin: 0px;
padding: 0px;
}

#workskin .hide {
display: none;
}

#workskin br {
width: 1px;
}

#workskin .alert {
margin-bottom: 1rem;
padding-top: .3rem;
padding-bottom: .3rem;
text-align: center;
font-size: 11px;
}

#workskin .header,
#workskin .tagline,
#workskin .alert {
min-width: 300px;
}

#workskin .tagline {
font-size: 12px;
padding-bottom: 0;
}

#workskin .text-mini-summary {
font-size: 10px;
}

#workskin .text-link {
color: rgb(156, 135, 102);
}

#workskin .text-link:hover {
text-decoration: underline;
cursor: pointer;
}

#workskin .mini-time {
font-size: 10px;
}

HTML