FANDOM


IF YOU WANT THE REST OF THIS GUIDE, CLICK HERE

UNDER CONSTRUCTION

COMING SOON TO THEATERS NEAR YOU (get it??)

TEMPORARILY PAUSED | |

•● ★ ♛ ★ ●•

MISSION STATEMENT

Hey there <insert name here>, welcome to our guide! This project was designed for the sole purpose of teaching users how to code Wikitext (And a bit of HTML too) on their own. This guide will go more in depth on how coding actually works, unlike a lot of mainspace coding guides. This guide is currently being managed by Betrayall, IntøxicatedMug, A$AP Fish, Siberianskies & STOMACHE. If you have any suggestions or areas of improvement for the guide, please leave it down in the comments or on one of their message walls.

•● ★ ♛ ★ ●•

ACCESSING THE SOURCE EDITOR

Okay, before we start coding, you have to know where to put your code in order for it to work. There's multiple ways on accessing the source editor, usually depending on the type of page your trying to make (Comment, article, etc.).

PAGE SOURCE EDITOR

  • See that slightly illuminated text there? You want to click it and it'll bring you to the visual editor
  • Now see that tab above in the corner, that's the source editor.



COMMENT SOURCE EDITOR

  • See that bracket button? That's source mode for comments. You're in visual.
  • Please note that the one slightly faded, is the one you're currently editing.
  • Reminder, press the post comment button. Okay I'm good now.

•● ★ ♛ ★ ●•

SPACING & POSITIONING

Insert Commentary

•● ♛ ●•

Text Spacing

Insert Commentary

<center> Text/Content </center>

Insert Commentary

<p style="text-align:left;"> Text </p>
<div style="text-align:left;"> Text </div>

•● ♛ ●•

Image Positioning

Insert Commentary

•● ★ ♛ ★ ●•

HEX COLORING

Okay first, hex colors are your regular colors (OBVIOUSLY), but it's just for the computer/webpage to interpret in order to project your specific color. Yes, you can use color names, BUT THAT'S EASY. So, to spare confusion for what's below, here's what a hexcolor is. 

Screen Shot 2018-04-09 at 7.29.07 PM

It's just an example, RELAX. Okay so hex color actually means hexadecimal number. The colors are in order according to these numbers. There are six digits that can be filled with numbers 0-9, 0 being the darkest and 9 being the lightest of the numbers. Then, our alphabetical spectrum begins with A being the darkest and F being the lightest. You'll find that repeating numbers like #2D2D2D (dark grey), #FFFFFF (white), #000000 (black), and many other codes similar to these are shades of grey. Do not go off about 50 Shades of Grey. I will wack you with a metal spoon. For most color pickers that you use, you don't need to use this knowledge; but, it's better to know than not to know. You'll find the color picker/wheel below. Color Picker

There are many varieties of colors from the color wheel. You see how you can see that my links blend into the text. The color I used is #2d2d2d, makes life easier, I swear. Also makes it nearly invisible. 

•● ★ ♛ ★ ●•

RGB COLORING

Not an expert on this. Consulting Partners ;)

•● ★ ♛ ★ ●•

COLORING YOUR CODES VIA COLOR NAMES

•● ★ ♛ ★ ●•

BORDERS

WHAT'S A BORDER?

This here is a basic border.

Insert your desired content
<div style="border: #000000 solid;">x</div>

Let's break it down.

  1. Begin with "<div style="border: "can be used for backgrounds, borders, collapsible, scrolls, fonts (we'll get to that), and etc. For this, we'll be using it for border.
  2. After the colon comes the specifics. Add a space and then the desired hexadecimal color or color (depends on preference, hex is much more exact). The example above is using #000000 AKA, black.
  3. After your desired color comes the kind of border you'd like. In this case, I'm using solid. But, there's also: box shadow, dashed, dotted, double, and more. There will be a much better description afterwards. Then add the ;"> and insert your content
  4. MOST IMPORTANTLY, don't forget to use the end tag or else it'll screw up your work.
  5. Extra Bit: There's also a part where you can decide whether or not you want your text to align left, right, or center, and how much space you want between the borders—aka padding. You enter it like the first example in the Border Types Section.

BORDER TYPES

Disecting Borders

Solid
<div style="border:7px black solid;text-align:center;padding:20px">Insert Content/Other Borders</div>
Solid W/ a Rounded Edge
Quick Explainer| FJSLDKFJLKAFJLKDSJLFKJ Later we got more important things to do
<div style="border: 10px solid #1c1c1c; -moz-border-radius: 2px; -webkit-border-radius: 10px; border-radius: 4px;">Insert Content/Other Borders</div>
Outset
<div style="BORDER:10px outset gray;">Content/Other Borders</div>
Inset
<div style="BORDER:10px inset #b5ffeb;"> Content/Other Borders</div>
Double
<div style="BORDER:10px Double #123455;">Insert</div>
Box Shadow Outset
<div style="border: 2px solid transparent; box-shadow: 0 0 5px 2px #000000;">Insert</div>
Box Shadow Outset + Solid
<div style="border: 4px solid #707070; box-shadow: 0 0 38px 2px black;">Perfect for Border Combos</div>
Box Shadow Inset + Solid
<div style="border: 4px solid #707070; box-shadow: 0 0 38px 2px black;">Perfect for Border Combos</div>

Box Shadow Inset

<div style="border: 8px transparent;box-shadow: inset 0 0 10px 2px #1C1C1C">Insert</div>

•● ♛ ●•

Border Combos

Credit to STOMACHE for making this border.

This border looks very gorgeous with purple or any other gorgeous colors.
Code:
<div style="BORDER:10px outset gray;"><div style="background-color: none; padding: 30px; border: none;margin: 3px; -webkit-border-radius: 10px; border-radius: 10px; box-shadow: inset 0 0 50px gray">Text/Content Here</div></div>
Insert Content Etc
Code:
<div style="border:7px black solid;text-align:center;padding:20px">
<div style="border: 4px solid #707070; box-shadow: 0 0 38px 2px black;">
<div style="border:2px black double;text-align:center;padding:20px">Insert Content Etc</div></div>
</div>

Insert your content

Code:
<div style="border: 10px solid #1c1c1c; -moz-border-radius: 2px; -webkit-border-radius: 10px; border-radius: 4px;">
<div style="border: 5px solid white;">
<div style="border: 6px double white; -moz-border-radius: 2px; -webkit-border-radius: 5px; border-radius: 90px;">
<div style="border: 4px solid #707070; box-shadow: 0 0 38px 2px black;">

Insert your content

</div></div></div>
</div>

•● ★ ♛ ★ ●•

FONTS

American Typewriter

Andale Mono

Apple Chancery

Apple Symbols

Arial

Arial Black

Arial Narrow

Arial Rounded MT Bold

Arial Unicode MS

Avenir

Avenir Next

Avenir Next Condensed

Baskerville

Big Caslon

Bradley Hand

Bookman

Bodoni 72

Brush Script MT

Candara

Centaur

Century Gothic

Chalkboard

Chalkboard SE

Chalkduster

Charter

Cochin

Comic Sans MS

Copperplate

Courier

Courier New

Didot

Digital Delivery

Din Alternate

Din Condensed

Droid Serif

Elephant

Futura

Gabriola

Garamond

Geneva

Georgia

Gill Sans MT

Great Vibes

Helvetica

Helvetica Neue

Hoefler

Hoefler Text

Herculanum

Impact

Lato

Lucida Grande

Lucida Handwriting

Luminari

Marker Felt

Menlo

Microsoft Sans Serif

Monaco (A lot like AJCW Original Font)

Noteworthy

Optima

Open Sans

Osaka

Palatino

Papyrus

Phosphate

Rock Salt

Rockwell

Savoye LET

Signpainter

Skia

Snell Roundhand

STIXGeneral

Tahoma

Tiki Island

Times

Times New Roman

Trattatello

Trebuchet MS

Triforce

Verdana

Webdings(Webdings)

Wingdings (Wingdings)

Zapfino

Changing the Font Color

Now put them together and instead of using "font"...

(Extra Bit) Small Caps and Large Caps

•● ♛ ●•

Highlighten Text

•● ♛ ●•

Gradients

Basic Gradient

Gradient Type 2

•● ♛ ●•

Fancy Ones

Animations

•● ★ ♛ ★ ●•

BACKGROUNDS

•● ★ ♛ ★ ●•

SCROLLERS

•● ★ ♛ ★ ●•

ARTICLE TABLES

Article tables are a great way to organize information and.... We'll go over the basic article tables and then play around with what we've learned above and apply them to our magnificent tables. But first, as said before, our dear article table.

•● ♛ ●•

Basic Article Table

x
x
x

EXPLAINER | Here my dear is a basic article table, no fancy stuff. If you haven't noticed, almost all tables on this wiki share something in common with this table. That is unless you look at the one below this that is missing a few parts but that's not the point. Gotta get the rest of this later just ignore this for now I gotta work.

{| border="0" align="center" cellspacing="1" cellpadding="1" style="width:500px;" class="article-table"
|-
! scope="col"|x
|-
|x
|-
|x
|}

•● ♛ ●•

Another Basic Article Table

•● ♛ ●•

A Table W/ A Background

Old Hierarchy Table Style 1

Old Hierarchy Table Style 2

Horizontal Table

Big Mama Combo ;)

NAME [SIGN IF NEEDED] NAME
【##】

This rank is []

TBA
【##】

This rank is []

TBA
NAME USERNAME GENDER SPECIES FAMILY MEMBERS
- - - - -

Code:

{| align="center" class="box" style="margin: 0px auto; width: 85%;text-align:center;background:#90bedb;border: 2px #275f82 solid;color:#275f82" cellspacing="0" cellpadding="2"
|-
| style="border: 1px #275f82 solid;width:50%;background:#3685B5" |'''NAME [SIGN IF NEEDED]'''
| style="border: 1px #275f82 solid;width:50%;background:#3685B5" |'''NAME'''
|-
| style="border: 1px #275f82 solid;width:50%"background:#3685B5" |'''【##】'''
'''This rank is []'''

<div style="height:200px;overflow:hidden;overflow-y:scroll">TBA</div>
| style="border: 1px #275f82 solid;width:50%"background:#3685B5" |'''【##】'''
'''This rank is []'''

<div style="height:200px;overflow:hidden;overflow-y:scroll">TBA</div>
|}
{| align="center" class="box" style="margin: 0px auto; width: 85%;text-align:center;background:#90bedb;border: 2px #275f82 solid;color:#275f82" cellspacing="0" cellpadding="2"
|-
| style="border: 1px #275f82 solid;width:50%;background:#3685B5" |'''NAME'''
| style="border: 1px #275f82 solid;width:50%;background:#3685B5" |'''USERNAME'''
| style="border: 1px #275f82 solid;width:50%;background:#3685B5" |'''GENDER'''
| style="border: 1px #275f82 solid;width:50%;background:#3685B5" |'''SPECIES'''
| style="border: 1px #275f82 solid;width:50%;background:#3685B5" |'''FAMILY MEMBERS'''
|-
| style="border: 1px #275f82 solid;width:20%" | -
| style="border: 1px #275f82 solid;width:20%" | -
| style="border: 1px #275f82 solid;width:20%" | -
| style="border: 1px #275f82 solid;width:20%" | -
| style="border: 1px #275f82 solid;width:20%" | -
|}

-

rank here rank here

【0/0】
TEXT

【0/0】
Text

🌟 OC Name Username Gender Mate Rank 🌟
🌟 - - - - N/A 🌟
Code:
<div style="font-variant:small-caps;width:100%;margin: 0em auto;">
<div style="color:#000;">
{| class="article-table" border="0" style="margin: 0px auto; width: 650px; height: 100px; border:1px inset #705544;"
! scope="col" style="font-family:tiki island;background-color:#000000;text-align:center;" |<font size="3"><font color="#fff">'''rank here'''</font></font>
! scope="col" style="font-family:tiki island;background-color:#000000;text-align:center;" |<font size="3"><font color="#fff">'''rank here'''</font></font>
|-
| style="text-align:center;" |
<font size="2">'''【0/0】'''<br /> 
TEXT</font>
| style="text-align:center;" |
<font size="2">'''【0/0】'''<br /> 
Text</font>
|}
{| class="article-table" border="0" style="margin: 0px auto; width: 650px; height: 30px; border:1px inset #705544;"
! scope="col" style="font-family:tiki island;background-color:#000000;text-align:center;" |<font size="3"><font color="#fff">🌟</font> </font>
! scope="col" style="font-family:tiki island;background-color:#000000;text-align:center;" |<font size="3"><font color="#fff">OC Name</font> </font>
! scope="col" style="font-family:tiki island;background-color:#000000;text-align:center;" |<font size="3"><font color="#fff">Username</font> </font>
! scope="col" style="font-family:tiki island;background-color:#000000;text-align:center;" |<font size="3"><font color="#fff">Gender</font> </font>
! scope="col" style="font-family:tiki island;background-color:#000000;text-align:center;" |<font size="3"><font color="#fff">Mate</font> </font>
! scope="col" style="font-family:tiki island;background-color:#000000;text-align:center;" |<font size="3"><font color="#fff">Rank</font> </font>
! scope="col" style="font-family:tiki island;background-color:#000000;text-align:center;" |<font size="3"><font color="#fff">🌟</font> </font>
|-
| style="text-align:center;" | <font size="2">🌟</font>
| style="text-align:center;" | <font size="2">-</font>
| style="text-align:center;" | <font size="2">-</font>
| style="text-align:center;" | <font size="2">-</font>
| style="text-align:center;" | <font size="2">-</font>
| style="text-align:center;" | N/A
| style="text-align:center;" | <font size="2">🌟</font>
|}
</div></div>

•● ★ ♛ ★ ●•

Texts

Yum

Code:

<span class="lava lamp" style="animation: flow 7s ease infinite;background-image:linear-gradient(178deg, white 70%, white 30%, black 75%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:rock salt;font-size:55pt;font-weight:normal;line-height:70px;">Yum</span>

If you want the coding right now, I'm currently redoing the entire thing. All the coding is located here. Thank you for your cooperation! I truly appreaciate it. Okay, now back to work on REDOING THIS CODING GUIDE SO I CAN FULFILL MY PROMISE!!! 

EDITORS/PARTNERS

W
W
W
W
W
W
W
W Betrayall W IntøxicatedMug W STOMACHE W A$AP Fish W Siberianskies W BonusLoafs
DISCORD & QUICK LINKS

If you see this, your JavaScript might be disabled or DiscordIntegrator plugin isn't working. If the latter, please contact a wiki administrator.
</div>
 

The poll was created at 00:32 on December 23, 2017, and so far 0 people voted.