How I Style My System
Posted originally on the Archive of Our Own at http://archiveofourown.org/works/35306398.
Rating: General Audiences
Archive Warning: No Archive Warnings Apply
Fandom: 人渣反派自救系统 - 墨香铜臭 | The Scum Villain's Self-Saving System
- Mòxiāng Tóngxiù
Character: System (Scum Villain)
Additional Tags: tutorial, CSS, HTML, no story here, reference, Fanwork Research &
Reference Guides, Interactive Fiction, tips and tricks, Early christmas
gift?
Language: English
Stats: Published: 2021-11-24 Words: 733 Chapters: 1/1
How I Style My System
by Emriel
Summary
A few people wanted to know how I style my work so here's a few guides and useful
resources to help you because I suck at explaining and I'm no expert.
Notes
Random gift I know, but I hope the two of you like it.
See the end of the work for more notes
Often, when writing a story for the SVSSS fandom, I kind of dislike seeing the [[text]] of the
system. In the novels, it was perfectly fine to see it come up like this, and I have nothing
against other stories in this fandom where the simpler representation is used.
However, since I like reading in a certain way and think it's a bit more immersive to just have
the system appear as an actual system alert, then I started creating a work skin for it. Try to
read this to understand how to create a work skin.
#workskin .system{
border: 1px solid #2f587b;
border-radius: 5px;
background: #112d44;
cursor: pointer;
color: #ffffff;
font-family: avenir, helvetica, arial, sans-serif;
font-size: 0.9em;
padding: 10px;
margin: 2.5em auto;
max-width: 500px;
text-align: center;
box-shadow: 0 5px 10px rgba(9,0,0,0.05);
z-index: 1;
}
This code is what I often use for the system and I apply it as a class within a div tag.
For example <div class="system">Text here</div>
Text here
#workskin .systemerror {
border: 1px solid #9c404b;
border-radius: 5px;
background: #8a313c;
cursor: pointer;
color: #ffffff;
font-family: avenir, helvetica, arial, sans-serif;
font-size: 0.9em;
padding: 10px;
margin: 2.5em auto;
max-width: 500px;
text-align: center;
box-shadow: 0 5px 10px rgba(9,0,0,0.05);
z-index: 1;
}
System Error
Plus and other effects...
There is a spoiler after this ANNND you really don't want to read this.
There are other effects that I also often use, like changing the color of the system, changing
the transition effects, changing the opacity, scale and so on. I used a lot of these in my
interactive fic Chained Existence And warning: It's a semi-dark story (it has some bad
endings depending on your choices), so don't read if you're not up for potentially disturbing
content. Other people within this site probably have a better way of explaining things than I
do so I'm sharing some helpful links down below. Also, if you just do a search on CSS and
HTML within AO3 or even type AO3 css html guide in google, I'm sure you're bound to
come up with more results, tips, and tutorials.
The codes can be a bit tiring to apply and double check, since after applying it to the HTML
tag, you can no longer edit the rich text as easily, since it will mess up the spacing more often
than not. So one caveat of using such code is that I hardly use the rich text editor and only
edit within HTML which can suck for some.
To easily replace the tags, I often write the system text within [This] and replace the resulting
<p>[ with <div class="system"> and ]</p> with </div> and it's all done within a simple text
editor like notepad after everything has been converted to HTML.
Lately, I've been using AOYeet after I finish writing my story in google doc. I simply
download the .html file, convert, and replace all the things that need to be replaced. I forgot
the person who included it in their notes, but I'm immensely thankful. Copy pasting directly
from google docs often result in funky extra spacing before or after italics. Sucks.
I got inspired by InfinitysWraith and the CSS Testing experiments this author did which has
fun ideas. To all those who are probably already interested in learning how to do basic coding
in AO3, there's also A Complete Guide to 'Limited HTML' on AO3 written by
CodenameCarrot which is a more basic comprehensive guide on what works and what
doesn't.
A lot of CSS code actually works, but to write some of mine, it was a trial and error. I don't
often write code, so I'm not even an expert but it's a fun thing to explore since it can make
your stories a bit more fun than just writing one narrative. As for how to actually make things
interactive within the same page where you can click links and navigate to another portion of
the same page, it was done primarily with the anchor link. This guide by AO3 is also pretty
useful by the way. GoldenFalls mentioned in the comments that this collection is also pretty
good though I haven't taken a look at it yet.
There's a lot of fun animations available in the internet, but you'd probably have to test them
out one by one yourself.
End Notes
I hope this was helpful in some way to anyone. I just roughly put this together.
Please drop by the Archive and comment to let the creator know if you enjoyed their work!
