FANDOM


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, Pidge.exe, A$AP Fish, Gøats & Sicogliceneral. 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>

•● ♛ ●•

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. All in all because I'm lazy and this is a side hobby etc etc, *extremely audible breathing* it's a number that can go up to six digits that represents a color. Like in the example #123456, that hex number is the equivalent of that color. You might find repeating numbers like #434343 are shades of grey. Do not go off about 50 Shades of Grey. I will wack you with a metal spoon. 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. 

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

•● ★ ♛ ★ ●•

COLORING YOUR CODES VIA COLOR NAMES

•● ★ ♛ ★ ●•

BORDERS

BORDER TYPES

Disecting Borders

•● ♛ ●•

Border Combos

Credit to Sicogliceneral 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

list fonts right here

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 slightly fancier one but still simple

•● ♛ ●•

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>
|}

•● ★ ♛ ★ ●•

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 Malevølent W A$AP Fish W Siberianskies W BonusLoafs
 

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