THIS CODING GUIDE IS FOR EVERYONE TO EDIT, NOT VANDALIZE
IF YOU WANT THE REST OF THIS GUIDE, CLICK HERE'
•● ★ ♛ ★ ●•
MISSION STATEMENT
Hey there <insert name here>, welcome to this communal 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. If you have any suggestions or areas of improvement for the guide, please feel free to edit the guide. And please, if you do edit the guide, please make sure to restore the guide to perfection. It's a real mess.
•● ★ ♛ ★ ●•
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 are multiple ways of accessing the source editor, usually depending on the type of page you're trying to make (Comment, article, etc.).
PAGE SOURCE EDITOR
COMMENT SOURCE EDITOR
•● ★ ♛ ★ ●•
SPACING & POSITIONING
When you make a page, you need to organize the use of space, alignment of text, and where your images are. You have three options here: left, center, and right. We'll begin with Text Spacing.
•● ♛ ●•
Text Spacing
If you want to align everything (except for slideshows, photos, galleries, sliders, videos, tables, text, and others) so that everything is centered, your best friend is right below this paragraph. Please note that this only works for center.
<center> Text/Content </center>
If you want to be able to align each paragraph individually, this is your guy. This code is not exclusive, meaning that it works for center, left, and right.
<p style="text-align:left;"> Text </p>
<div style="text-align:left;"> Text </div>
•● ♛ ●•
Image Positioning
And for images, you can position the image by entering the position right after thumb (for thumbnail) like this:
[[File:filename|thumb|center/left/right|300x300px]]
•● ★ ♛ ★ ●•
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.
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.
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. Find an expert!
•● ★ ♛ ★ ●•
COLORING YOUR CODES VIA COLOR NAMES
•● ★ ♛ ★ ●•
BORDERS
WHAT'S A BORDER?
This here is a basic border.
<div style="border: #000000 solid;">x</div>
Let's break it down.
BORDER TYPES
Disecting Borders
<div style="border:7px black solid;text-align:center;padding:20px">Insert Content/Other Borders</div>
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>
<div style="BORDER:10px outset gray;">Content/Other Borders</div>
<div style="BORDER:10px inset #b5ffeb;"> Content/Other Borders</div>
<div style="BORDER:10px Double #123455;">Insert</div>
<div style="border: 2px solid transparent; box-shadow: 0 0 5px 2px #000000;">Insert</div>
<div style="border: 4px solid #707070; box-shadow: 0 0 38px 2px black;">Perfect for Border Combos</div>
<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.
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>
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
Is there a font that works but isn't listed? Inform me on my message wall and I'll add 'em ASAP!
♛
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 until someone writes it.
{| 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 [] |
【##】
This rank is [] |
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:20%;background:#3685B5" |'''NAME''' | style="border: 1px #275f82 solid;width:20%;background:#3685B5" |'''USERNAME''' | style="border: 1px #275f82 solid;width:20%;background:#3685B5" |'''GENDER''' | style="border: 1px #275f82 solid;width:20%;background:#3685B5" |'''SPECIES''' | style="border: 1px #275f82 solid;width:20%;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】 |
【0/0】 |
🌟 | OC Name | Username | Gender | Mate | Rank | 🌟 |
---|---|---|---|---|---|---|
🌟 | - | - | - | - | N/A | 🌟 |
<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
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 original coding right now, Betrayall will make sure to completely redo the guide to the best of her ability. All the coding is located here. Thank you for your cooperation!