Actions

Work Header

Rating:
Archive Warning:
Category:
Fandoms:
Additional Tags:
Language:
English
Series:
Part 1 of AO3 workskins
Collections:
Useful CSS code
Stats:
Published:
2022-06-28
Completed:
2024-04-20
Words:
2,813
Chapters:
5/5
Comments:
37
Kudos:
178
Bookmarks:
66
Hits:
2,973

Mimicking Minecraft for fics- Some Minecraft Work Skins

Summary:

Some CSS for workskins involving minecraft!

Current chapters:
-Minecraft chat text, including "[username] joined/left game" and "[username] whispers to you"
-Minecraft buttons (respawn/ quit to title)
-End poem text
-minecraft books

Notes:

Heyo! I’m fairly new to CSS, but I decided to make a few replicas of some minecraft functions, because ao3 work skins are really cool! I’m not going to explain how to copy the code into the workskin, and a few of the more basic things, but if you don’t know how to do that, there are a lot of other tutorials that go over the basics that you can follow along. This one was pretty good for me, its for emails specifically, but it shows you how to make a work skin at the start. If you have any questions, comment it and I might be able to help you

Also, please tell me if you use one of these!! And link back to here in some way if you do, either as a link or the inspired by function.

(See the end of the work for other works inspired by this one.)

Chapter 1: Minecraft Chat Text

Notes:

I'd also like to mention, I couldn't find any way to get the minecraft font into ao3. I'm fairly certain it's not possible, but I'd really liked to be proved wrong if you find a way to do it.

edit 2022-06-28: this is a replacement for what was originally the first chapter, the code was really awful so I scrapped it and now it's better lol

(See the end of the chapter for more notes.)

Chapter Text

Example:

 

 

 

Grian joined the game

ZombieCleo joined the game

XisumaVoid joined the game

Docm77 joined the game

Automated Server Message: Welcome to Hermitcraft! We hope you enjoy your time here.

Cubfan135 joined the game

Etho joined the game

BDoubleO100 joined the game

<XisumaVoid> Can everyone make their way to spawn?

TinfoilChef joined the game.

You whisper to WilburSoot: whre th efukc are we

WilburSoot whispers to you: I think I know

 

Code to copy into your workskin:

#workskin .chat {
  padding: 3em 0em 0.5em 0.5em;
  background-repeat: no-repeat;
  background-size: cover;
}

#workskin .bg1 {
  background-image: url("https://images.squidge.org/images/2023/08/23/BG1.png");
}

#workskin .bg2 {
  background-image: url("https://images.squidge.org/images/2023/08/23/BG2.jpeg");
}

#workskin .bg3 {
  background-image: url("https://images.squidge.org/images/2023/08/23/BG3.png");
}

#workskin .bg4 {
  background-image: url("https://images.squidge.org/images/2023/08/23/BG4.png");
}

#workskin .bg5 {
  background-image: url("https://images.squidge.org/images/2023/08/23/BG5.jpeg");
}

#workskin .chat>p {
  margin: 0;
  padding: 7px 3em 7px .5em;
  color: white;
  background: rgba(0, 0, 0, .6);
  font-weight: bold;
  font-family: Verdana, sans-serif;
  width: 70%;
  line-height: 1.2;
}

#workskin .chat .joinleft {
  color: #ff0;
}

#workskin .chat .whisper {
  color: gray;
  font-style: italic;
}

#workskin .chat>p:nth-last-child(n+7):nth-child(1) {
  opacity: .3;
}

#workskin .chat>p:nth-last-child(n+7):nth-child(2) {
  opacity: .7;
}

#workskin .chat>p:nth-last-child(7):nth-child(1) {
  opacity: .7;
}

 

 

Code to add to your fic:

 

 

 

<div class="chat bg1">
  <p><span class="joinleft">Yellow join/left text</span></p>
  <p><span>Default white text</span></p>
  <p><span class="whisper">Grey italicized text</span></p>
</div>

 

This gives you:

 

 

 

Yellow join/left text

Default white text

Grey italicized text

 

As you can see, I’ve made three default texts, the standard text that's plain white, the yellow “joinleft” text, and the grey “whisper” text, for the different messages you get in the text chat.

 

 

When there are seven or more messages, the last two lines fade out, because of this code:

 

 

 

#workskin .chat>p:nth-last-child(n+7):nth-child(1) {
  opacity: .3;
}

#workskin .chat>p:nth-last-child(n+7):nth-child(2) {
  opacity: .7;
}

#workskin .chat>p:nth-last-child(7):nth-child(1) {
  opacity: .7;
}

 

If you want to edit it so its more or less than seven messages, you can change all the (n+7)’s and (7)  in this part of the css

 

 

I’ve added five different backgrounds you can choose from if you change bg1:

 

bg1: simplest one, just the minecraft sky and sun

bg2: fancy build

bg3: clouds

bg4: l’manhole from the dreamsmp at night

bg5: a nice-looking urban build

 

You can also add your own:

 

 

 

.bg1 { background-image: url("https://images.squidge.org/images/2023/08/23/BG1.png"); }

 

change “bg1” to another name, like bg6 or bg7, and replace the url listed to a link to another image. Then just add it to the css. PLEASE USE AN IMAGE HOSTING SITE. I previously used tumblr urls, and while it does technically work, there's always a chance your image url will break and someone reading your fic in two years time won't be able to see the image. I've been using Squidge images to host all of this, as its for fandom, but imgur works as well. Please don't use discord to host images either.

 

It still looks good without a background, if you want that option. Just take away the bg part of the div element like this:

 

 

 

  <div class="chat">
  <p><span>Pearlescentmoon joined the game</span></p>
  </div>

 

And you get:

 

 

 

Pearlescentmoon joined the game

 

Just remember to pay attention to how it looks on dark siteskins, so it works for all your readers. 

 

 

One more thing to mention, you might wanna make something like this:

 

 

 

<ScottSmajor> We're starting the event in 30 minutes

 

The greater and less than signs, < and >, will have a hard time being placed because of how html works. You can either paste the html in the html option on ao3, then change it in the rich text later, or just use their character codes like this: &lt;Character&gt;




 

Notes:

comment if you need help with anything, or something isnt working as intended!

Chapter 2: Minecraft Chat Text

Notes:

this one was really annoying to code lol, but i worked it out in the end!

(See the end of the chapter for more notes.)

Chapter Text

Example:





Respawn?


















Are You Certain?






And Wilbur woke up with a gasp.

 

Code to copy into your workskin:

#workskin .buttonbg {

  display: block;

  width: 70%;

  background-image: url('https://64.media. /c5663c79c435e0b27c1f88d8ec87ee78/ecb05f32086a896c-3c/s640x960/bdcb471565b0b2db728fbc6e57fde00a7c1ff430.png');

  text-align: center;

  border-color: black;

  border-width: 2em;

  color: white;

  background-position: center;

  background-repeat: no-repeat;

  background-size: 100% 100%;

  padding-bottom: 0.5em;

  padding-top: 0.5em;

  margin: auto;

}

 

#workskin .buttonbg:hover {

  background-image: url("https://64.media. /d9c2eeb62a08eb66ee61e0e53d68ac00/ecb05f32086a896c-12/s640x960/dc45f552659a2ced0d79951f40c8b9d00df845d9.png");

}

 

#workskin .buttontext {

  padding-left: 2em;

  padding-right: 2em;

  font-family: "Verdana";

  font-size: larger;

  font-stretch: extra-expanded;

}



Code to use in the fic:

 

 

<p class="buttonbg">

<span class="buttontext"> TEXT </span>

</p>

Some Downsides:

I’ve also made it so that it works like the minecraft buttons when you hover over it too, although be aware this doesn’t work as well on mobile, i don't know how to do this yet. If I’m able to later, I’ll update it.

Also, it starts to look bad if there’s too much text. I’m not going to do anything about this because I assume no one’s putting an obscene amount of text in here, if you want you could switch out the images used so they’re the size of box you need. You could also just increase the width value if you just want it to look a little better

Notes:

I feel like my next thing will be replicating the end poem, I've already got the dirt block background. comment if you have any questions! :D

Chapter 3: End Poem Text

Notes:

(See the end of the chapter for notes.)

Chapter Text

Example:

 

 

I see the player you mean.

Grian?

Yes. He fought hard in this battle. I think he's proven himself. I think he's ready.

He may fight this. It will not make sense to a player like him.

Players. They never understand the way of things. Maybe in time, he will begin to realize this was for the good of all.

 

Code to copy into your workskin:

 

#workskin .poembg {
  background-image: url('https://images.squidge.org/images/2023/11/21/tumblr_df08e5844615ba879c478f8ab4c3cf88_6f414adc_400.png');
  width: inherit;
  min-height: 20em;
  display: block;
  background-size: 6em;
  box-shadow: inset 0 0 25em rgba(0, 0, 0, 0.57);
  text-align: justify;
  background-repeat: repeat;
}

#workskin .poemtextgreen {
  padding: 1em 15% 1em 15%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  line-height: 150%;
  color: limegreen;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
}

#workskin .poemtextblue {
  padding: 1em 15% 1em 15%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  color: cyan;
  line-height: 150%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-stretch: condensed;
  font-weight: bold;
}


#workskin .poemtextwhite {
  padding: 1em 15% 1em 15%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  color: white;
  line-height: 150%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-stretch: condensed;
  font-weight: bold;
}

 

Code to add into your fic:

<div class="poembg">
    <br><br>
    <p class="poemtextgreen">GREENTEXT</p>
    <p class="poemtextblue">BLUETEXT</p>
    <p class="poemtextgreen">GREENTEXT</p>
    <p class="poemtextblue"> BLUETEXT</p>
    <p class="poemtextgreen">GREENTEXT.</p>

<br><br></div>

 

you can, of course, add more of the green text and blue text, just copy more of the code into the above:

 

greentext code:

<p class="poemtextgreen">GREENTEXT</p>

 

bluetext code:

<p class="poemtextblue"> BLUETEXT</p>

 

I don't have much to say about this one, it's fairly straightforward. if you want to add more colors than blue and green, just copy this:

 

#workskin .poemtextblue {
  padding: 1em 15% 1em 15%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  color: cyan;
  line-height: 150%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-stretch: condensed;
  font-weight: bold;
}

 

Change 'poemtextblue' so it has a unique name, and change the 'cyan' value to one that you want (and something that css can recognize). then replace the class in <p class="whatevernameyouchose"> to whatever you chose. I've already added in white!

 

Notes:

I feel like I'm getting better at this quickly. I might go back to the first chapter and edit some of the code so it's better. I think my next thing might be the chat log thing? maybe I'll branch off minecraft a bit and copy twitch chat. who knows! once again, plz comment if you have any questions

Chapter 4: Minecraft Book and Quill

Summary:

add a minecraft Book and Quill to your fic

Notes:

This workskin (and a few others) are being used in my friend Angst's fic here, if you want to see it in action

(See the end of the chapter for more notes.)

Chapter Text

How to Make Friends

  • ⊣ᒷℸ ̣ ʖ𝙹∷ᒷ↸ ╎リ ᓭꖌ||ʖꖎ𝙹ᓵꖌ
  • ᓭᒷᒷ ℸ ̣ ⍑ᔑℸ ̣ ℸ ̣ ⍑╎ᓭ 𝙹リᒷ ꖌ╎↸ ⍑ᔑᓭ ᔑ ꖎ𝙹ℸ ̣ 𝙹⎓ !¡𝙹ℸ ̣ ᔑℸ ̣ 𝙹ᒷᓭ
  • ||𝙹⚍ ∴ᔑリℸ ̣ ℸ ̣ 𝙹 ʖᒷᔑℸ ̣ ⍑╎ᒲ ᓭ𝙹 ||𝙹⚍ ᓭℸ ̣ ᔑ∷ℸ ̣ ⎓ᔑ∷ᒲ╎リ⊣ !¡𝙹ℸ ̣ ᔑℸ ̣ 𝙹ᒷᓭ
  • ᑑ⚍𝙹ℸ ̣ ᒷ ᓭ⚍リ ℸ ̣ ⨅⚍
  • ⊣ᒷℸ ̣ ᒲ𝙹∷ᒷ !¡𝙹ℸ ̣ ᔑℸ ̣ 𝙹ᒷᓭ ℸ ̣ ⍑ᔑリ ⍑╎ᒲ

 

CSS used:

#workskin .mcbook {
  display: block;
  background: url("https://images.squidge.org/images/2023/08/22/Book_and_Quill_Writing_webp.png");
  text-align: center;
  background-position: center;
  background-repeat: no-repeat;
  margin: auto;
  background-size: cover;
  padding: 45px;
  font-size: small;
  overflow-y: auto;
  width: 60vw;
  height: 78vw;
  max-width: 400px;
  max-height: 500px;
  color: black;
}

#workskin .mcbook>h1,
#workskin .mcbook>h2,
#workskin .mcbook>h3 {
  color: black;
}

Code to add to your fic:

<div class = "mcbook">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum, mauris et vulputate sollicitudin, enim magna malesuada sapien, eu faucibus mi justo eget felis. Nam luctus in ipsum molestie fringilla. Maecenas luctus, ligula ut malesuada posuere, lacus ligula tincidunt nulla, a gravida diam tortor eget dolor. Donec mollis mi quis sapien vehicula porta. Curabitur ut tincidunt urna, vel scelerisque lectus. Sed at scelerisque est, id sodales tellus. Quisque ut dolor et arcu tempus faucibus. 
</div>

this gives you:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum, mauris et vulputate sollicitudin, enim magna malesuada sapien, eu faucibus mi justo eget felis. Nam luctus in ipsum molestie fringilla. Maecenas luctus, ligula ut malesuada posuere, lacus ligula tincidunt nulla, a gravida diam tortor eget dolor.

The text is small so you can fit more inside the book. There's a bit of a problem with the difference in how much you can fit in the book on mobile vs. on desktop, when you're on mobile, you can fit a lot less, and then it will overflow. Depending on how much text you put, you can adjust the size of the font by deleting the " font-size: small;" line, or changing small to "x-small", "smaller", "larger", "large", etc.

if you go over the boundaries of the book, a scroll bar will appear. I'd try and avoid this, since the text awkwardly passes through to the bottom of the book image, but I kept it in the code because I can think of it being useful in some cases (and with how little you can fit in the book on mobile, you kind've need it). To remove it, change "overflow-y: auto;" to "overflow-y: hidden;". This will just make it so you won't be able to see any excess text. You can also scale up the book size by changing the values for "width:" and height:", but that might mess up the experience for readers on mobile. The best thing to do if you find out you don't have enough room is to either make the text size smaller or just make another book.

example of overflow:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin odio non blandit lacinia. Curabitur sit amet purus eros. Curabitur metus elit, tincidunt ut turpis ullamcorper, semper molestie massa. Suspendisse blandit lacinia suscipit. Aenean posuere pretium eros, in fermentum metus consequat sit amet. Maecenas condimentum dolor ut finibus sollicitudin. Etiam ac aliquam urna, vitae mollis est. Morbi consectetur congue leo id vestibulum. Donec in diam tincidunt, interdum risus sit amet, sagittis risus. Quisque quis ligula maximus, maximus justo non, pulvinar mi. Integer non lorem nec quam sagittis fringilla. Fusce dapibus sollicitudin tellus, ac pellentesque magna dapibus quis. Nulla vulputate mattis urna ac tristique. Ut vel arcu ut massa dapibus commodo sed nec ante. Nunc at ultrices sapien, eu vehicula elit. Praesent elementum mattis nunc, pulvinar semper erat egestas non. Aenean condimentum ante non nunc dictum, hendrerit rutrum leo hendrerit. Nulla cursus orci id sem mattis tristique. Sed eget ante sapien. Nam ac posuere tortor, sed laoreet ipsum. Fusce posuere turpis id libero scelerisque dignissim. Vivamus non enim blandit, pulvinar nisi at, maximus odio. Etiam fringilla augue tellus, ac congue sem facilisis eget. Nullam at vulputate nunc. Proin ac porta enim. Ut ullamco

rper, arcu in hendrerit ultrices, quam augue suscipit urna, sit amet hendrerit nisl lorem et tortor. Quisque in dignissim ipsum. Donec nec massa sit amet purus aliquam condimentum a sit amet quam. Vivamus molestie consectetur nisi, id euismod nibh sollicitudin maximus. Vivamus hendrerit lobortis magna, at ultricies leo facilisis malesuada. Curabitur ornare ac nunc sit amet venenatis. Ut at mollis ex. Morbi pharetra vestibulum congue. Cras quis iaculis nisi. Vivamus

egestas, dolor sed tincidunt elementum, massa lectus volutpat lectus, eu convallis tortor lacus ut ipsum. Suspendisse porta lectus quis arcu accumsan, eu fermentum purus imperdiet. Phasellus posuere sagittis massa blandit viverra. Sed consequat rhoncus lorem eu lobortis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris consequat felis et consequat gravida. Integer fringilla nibh vitae pretium maximus. Donec feugiat faucibus magna, at suscipit urna fermentum vel. Aliquam eget sagittis risus. Nullam quis ligula urna. Curabitur id interdum mi. Aenean placerat tortor porta, molestie tellus nec, commodo ante. Morbi pellentesque felis mi, sed tempor sem finibus in. Sed sit amet lorem congue, tempus leo quis, vulputate est. Morbi

>quis mauris augue. In facilisis, lectus sed ornare placerat, diam augue consequat arcu, quis tristique lacus mi quis turpis. Cras semper, lectus ac ultrices efficitur, magna nulla dignissim lectus, sed vehicula tellus urna id nibh. Donec quis mauris quis nibh faucibus semper. Curabitur in scelerisque lacus, tincidunt tincidunt libero. Fusce et nunc luctus ligula tincidunt porttitor. Integer at egestas felis, at bibendum felis. Donec maximus urna sit amet tincidunt ultricies. Proin ut lorem sed massa pulvinar laoreet ut sed eros. Duis aliquet porta magna quis pellentesque. Vestibulum faucibus sed est vitae sodales. Quisque

euismod, ipsum at fermentum eleifend, ante ex pretium metus, vitae congue tellus lorem sed ante. Ut sed facilisis elit. Nam pulvinar tincidunt arcu, nec commodo justo. Suspendisse potenti. Vestibulum venenatis hendrerit est at interdum. Nam elementum orci sed dictum varius. Phasellus pellentesque imperdiet libero eu pulvinar. Sed facilisis eu leo quis convallis. Pellentesque ac aliquam orci. Morbi bibendum lacinia neque condimentum convallis. Curabitur id cursus nulla, vel cursus tortor. Curabitur non dolor ac dolor vehicula congue cursus quis lectus. Sed vehicula erat sed arcu euismod, feugiat accumsan arcu venenatis. Aliquam erat volutpat. Pellentesque tempor est quis tincidunt malesuada. Pellentesque iaculis ultricies malesuada. Vivamus molestie quis quam vitae aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis eget

consectetur elit. Aliquam mattis felis eu diam porta, et varius turpis laoreet. Fusce sodales ut ex id rutrum. Donec odio ex, lobortis non pharetra ut, suscipit a nisl. Donec luctus, sapien sed suscipit maximus, ligula justo varius elit, vitae interdum enim erat sit amet turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam rhoncus posuere libero. Vivamus lectus enim, tincidunt vitae auctor eu, ultrices ac urna. Nulla metus lacus, faucibus eu magna at, condimentum facilisis ante. Donec imperdiet ipsum congue nisl laoreet, eleifend fringilla eros porttitor. In accumsan enim id quam accumsan fermentum. Aenean pulvinar tristique metus in bibendum. Suspendisse pretium quis mauris sit amet blandit. Donec eu ipsum tempus, pretium ligula sagittis, aliquam lacus. Cras ut tristique nibh. Etiam dapibus vehicula justo, id vestibulum velit ultrices eu. Nunc venenatis dapibus mauris, sed fringilla justo ornare et. Vestibulum vitae purus fermentum nisi vulputate pellentesque sed et urna. Nam erat

lorem, lobortis at pretium eu, rutrum eu sapien. Vestibulum id vulputate libero. Quisque erat quam, aliquet eget dapibus vel, consectetur nec sapien. Morbi luctus eros sit amet porta consequat. Aenean ut efficitur arcu. Etiam velit magna, commodo a mauris pharetra, hendrerit dignissim arcu. Nunc rutrum dolor vel justo vulputate, aliquam ultricies orci laoreet. Aliquam erat volutpat. Pellentesque elit lectus, bibendum nec rutrum sit amet, maximus in nisl. Suspendisse sed tortor et orci scelerisque scelerisque gravida eu erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel placerat urna, eget mattis velit.

As you can see in the first example, you can add bullet points and headers on the inside of the book. Please keep in mind that those features will follow whatever the work skin the reader is using. What this means is, if I didn't have the bit of the CSS that says "#workskin .mcbook>h1, #workskin .mcbook>h2, #workskin .mcbook>h3", then if I was using a dark-mode workskin, the text might appear white. So if you're testing the workskin in dark-mode and the text keeps a light colour, add whatever property that text is like #workskin .mcbook>[property}, and it should work.

Notes:

please comment down below if you can't get it working or if you have any other problems, and I'll try to help as best as I can!

Chapter 5: Workskin Workshop

Summary:

Link and explanation of website that is available to use for creating the previous chapters mimics

Notes:

Hello!! It's been a while. This isn't a new minecraft mimic, it's a website I was working on for a while that let's you generate the code you want, instead of doing it manually. This is a bit more ephemeral than most of what I post on ao3 haha, but I think the previous chapters means it still makes sense within Ao3's policy.

Chapter Text

As a way to encourage more people to use workskins, I've created a site that let's you generate what you need without actually needing to understand the code.

 

The Workskin Workshop

 

All the workskins in the fic are covered. There are some situations where you'll need to manually code your HTML/CSS, such as having custom backgrounds behind the minecraft chat. I'm unlikely to add that feature in the future, as this is just to make it easier for people to implement workskins, if you want insane customizability, learning HTML/CSS will be the way to go.

I had plans to create an Ao3-specific guide to HTML/CSS, but it's a bit up in the air right now, so please tell me if that is something you're interested in.

 

Series this work belongs to:

Works inspired by this one: