Animal Groups Roleplay Wiki
Register
Advertisement

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. 

Screen Shot 2018-04-09 at 7.29

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. Find an expert!

•● ★ ♛ ★ ●•

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

Is there a font that works but isn't listed? Inform me on my message wall and I'll add 'em ASAP!

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

Requiem

Rock Salt

Rockwell

Savoye LET

Signpainter

Skia

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 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 []

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: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】
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 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!  

Advertisement