Birdhouse:Text formatting

With some basic HTML, you can use custom Minecraft colors on pages!

HTML tags

To start, you surround the text you want with span tags. Like this: <span>YOUR TEXT HERE</span>

In HTML, <tags> are given in brackets, and their equivalent ending </tags> are placed at the end, with a slash to denote that it's the end. The span tags above are saying, "I want certain things to happen in the span between the tags."

But nothing will happen if you don't specify what you want! You need to give the tag some classes: <span class="CLASSES GO HERE">TEXT</span>

Classes tell the website to render text a certain way. When you write a class in between the quotation marks, it finds the class in the CSS and applies it to whatever's in between the tags.

We can use this to give text some color or write things in the Minecraft font!

You can use multiple classes by putting a space in between them. For example, if I wanted purple text in the Minecraft font, I'd write <span class="minecraft lightpurple"></span>

List of classes

Here's a list of all the custom classes currently on the wiki. For the "darkbg" class, make sure to also add "white" or another light color so it's readable!

minecraft

center (must be inside a div, not a span)

bold italic underline darkbg

darkblue darkgreen darkaqua darkred darkpurple gold gray darkgray

blue green aqua red lightpurple yellow white

Special formatting

Typewriter effect

Make text appear letter by letter. Example: Amy Stall.

Add an ID called "typewriter" to a div or span and all the text inside will render this way. Note that you can only have one typewritten piece of text on a page, due to the way the script is coded.

<span id="typewriter">Your text here.</span>

You can apply classes to the same tag as the typewriter ID, but you can't do it to specific parts of typewritten text. For example, this won't work:

<span id="typewriter">Your <span class="blue">text</span> here.</span>

But this will:

<span class="blue" id="typewriter">Your text here.</span>

Chat logs

Enclose chat logs in "poem" tags with the "chatlog" class:

<poem class="chatlog"><owl> hi
<owl> :-)
<<span class="lightpurple">owl</span>> woagh im a different color!
<span class="lightpurple">owl</span> <span class="yellow">left the game</span></poem>

<owl> hi
<owl> :-)
<owl> woagh im a different color!
owl left the game

As seen in the last two lines, you can include span tags to color different parts of the chat. If writing a lot of chat logs, I recommend copying everything without writing in color codes, and then using the "search and replace" tool included on the wiki's text editor to change name colors, like this:

SEARCH FOR: <owl>
REPLACE WITH: <<span class="lightpurple">owl</span>>
then REPLACE ALL.

Remember to include the brackets when search-and-replacing, or every instance of the character's name will get replaced, such as in normal text outside of the chat logs.

You can include advancements in your logs with this code:

<span class="advhover" data-hover="Advancement description">[Advancement title]</span>

AO3 Tags

Add fake tags to a fic or page! Follow this format:

<div class="ao3"><span class="tag">Tag 1</span>, <span class="tag">Tag 2</span>, <span class="tag">Tag 3</span></div>

Tag 1, Tag 2, Tag 3