FANDOM


NOTE! If you're going to use coding from this guide on a page, please change the colors and photos! And please don't credit me for coding from here, you don't have to credit guides

Førever's Guide to Coding

Waves circ



______________________

Centering Edit

Centering is a great tool for coding.

For text:

Just put

<center>

before the text you want to center, and

</center>

after the text you want to center

For images:

All you have to do is use Source Mode, add a photo (see adding images), and behind (or infront) of the word "thumb" add "|center". If you add |center before "thumb" and there isn't a "|" behind the center, add it so it will look something like this:

Screen Shot 2018-03-10 at 9.31.08 AM


______________________

Adding Images Edit

Adding images is quite easy, once you get the hang of it. All you have to do is click on this button: Screen Shot 2018-03-10 at 9.31.40 AM.png. Once you click that, this will appear:

Screen Shot 2018-03-10 at 9.39.51 AM

Click the button that says "choose file" (or upload on some other computers/laptops), and find the image you want from your file folders. Once you do, it should look like this:

Screen Shot 2018-03-10 at 9.43.01 AM

You can add a caption, change the size of the image, and put it to the left or right. To center it, see centering. If you came back here from collapsibles, welcome! The way to have an image go in a specific spot is to do this instead of the classic "|thumb|center|_px]]": "middle|_px|link=|alt=]]".
______________________

Soundclouds Edit


To create Soundclouds you need to copy and paste this:

<soundcloud url="https://soundcloud.com/jansen-zoukdj/castle-halsey" color="#663399" height="20" width="21"></soundcloud>


There is also a spinning soundcloud, credit to Willowhound03:

Here's the code:

<div class="spin"><soundcloud url="https://soundcloud.com/jansen-zoukdj/castle-halsey" color="#F0C508" height="20" width="21"></soundcloud></div>

Your soundcloud can be any version of any song you want. But make sure it is from the actual website, here.

______________________

Fonts Edit

There's quite a lot of fonts out there, but there aren't many that work with AJCW's coding. Down below is a list of all the font's names and what they look like:

See Fubsy's Guide for the full list of fonts.

Here's the code (of course you could switch out the fonts):

<span style="font-family: Courier New">your text here</span>
______________________

Font Sizes Edit

As you can already tell by the name, this code changes the size of the font. There are around twenty different font sizes, going from one to around twenty.

This text is in size five. This text is in size one.

Here's the code:

<font size="5">This text is in size five.</font>
______________________

Font Colors Edit

This text is red.

To use the pre-set colors, use this (you can replace it with any color on the chart): 

<font color=red>Insert Text Here</font>
Shades Yellows Reds/Pinks Oranges Greens Blues
Black FloralWhite LavenderBlush Linen Ivory MintCream
DarkSlateGray Beige MistyRose OldLace Honeydew Azure
DimGray Cornsilk Pink AntiqueWhite PaleGreen LightCyan
Gray LightYellow LightPink PeachPuff LightGreen AliceBlue
SlateGrey LightGoldenRodYellow LightSalmon SandyBrown GreenYellow LightBlue
LightSlateGray LemonChiffon Salmon Coral MediumSpringGreen PowderBlue
DarkGrey Yellow DarkSalmon Orange SpringGreen PaleTurquoise
Silver Khaki LightCoral DarkOrange Chartreuse SkyBlue
LightGray DarkKhaki PaleVioletRed Chocolate LawnGreen LightSkyBlue
Gainsboro Gold HotPink Lime DeepSkyBlue
WhiteSmoke Goldenrod DeepPink DarkSeaGreen Cyan
Snow DarkGoldenrod MediumVioletRed YellowGreen Turquoise
White IndianRed MediumAquamarine MediumTurquoise
Tomato MediumSeaGreen DarkTurquoise
Violets/Magentas Browns OrangeRed Olive LightSeaGreen
GhostWhite Seashell Red SeaGreen CadetBlue
Lavender Linen Crimson ForestGreen DarkCyan
Thistle BlanchedAlmond FireBrick Green Teal
RosyBrown Bisque Brown DarkOliveGreen SteelBlue
Plum Wheat DarkRed DarkGreen CornflowerBlue
Violet NavajoWhite Maroon DodgerBlue
Orchid BurlyWood RoyalBlue
Fuchsia Tan Blue
Magenta Peru MediumBlue
MediumOrchid Sienna DarkSlateBlue
MediumPurple SaddleBrown DarkBlue
MediumSlateBlue Navy
SlateBlue MidnightBlue
BlueViolet
DarkViolet
DarkOrchid
DarkMagenta
Purple
RebeccaPurple

Indigo

Credit to Fubsy for the font colors list

If you want to use more advanced colors, go here: Hex Colors. You'd use the same code, except replace the color's name with the hex code of the color you want to use. If you want your fonts' color to be more than one, I've got some examples.  This one is a horizontal two-color text. If you mix the right colors (mine is Purple and Rebecca Purple) the text will look beautiful:

This is a horizontal two-color text.

Here's the code:

<p style="text-align:center;"><span class="" style="background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#000080), color-stop(100%,#000080)); background: -webkit-linear-gradient(top, #800080 21%, #663399 79%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:Courier New;font-size:20pt;font-weight:normal;line-height:25px;">Your text here</span></p>

This is a diagonal two-color text. Just as I said with the horizontal one, if you mix the right colors, it will look beautiful.

This is a diagonal two-color text.

Here's the code:

<p style="text-align:center;"><span class="" style="background: -webkit-gradient(linear, left top, left top, left top color-stop(0%,#fffffff), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(53deg,#ffd1dc 5%, #D3A7B8 10%, #9B9FBC 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-size:20pt;font-family:ms gothic;small-uppercase">Your text here</span></p>
______________________

Tables Edit

Tables are somewhat must-have for every page. There's so many different kinds. We'll start out with the most common tables. This is one of the most common tables for oc pages.

This info 
is

info 

Such info
a info
Fab info
table info
Don't info
you info
Think info
so info
? info


Heres the code:

{| class="article-table" border="0" style="margin: 0px auto; width: 10px; height: 100px; border:1px inset black;"
! scope="col" style="font-family:center;background-color:#ffffff;text-align:center;" |This
| style="text-align:center;" |info 
|-
! scope="col" style="font-family:center;background-color:#006699;text-align:center;" |<font color="black">is</font>
| style="text-align:center;" |
info 
|-
! scope="col" style="font-family:center;background-color:#ffffff;text-align:center;" |<font color="black">Such</font>
| style="text-align:center;" |info
|-
! scope="col" style="font-family:center;background-color:#006699;text-align:center;" |<font color="black">a</font>
| style="text-align:center;" |info
|-
! scope="col" style="font-family:center;background-color:#ffffff;text-align:center;" |<font color="black">Fab</font>
| style="text-align:center;" |info
|-
! scope="col" style="font-family:center;background-color:#006699;text-align:center;" |<font color="black">table</font>
| style="text-align:center;" |info
|-
! scope="col" style="font-family:center;background-color:#ffffff;text-align:center;" |<font color="black">Don't</font>
| style="text-align:center;" |info
|-
! scope="col" style="font-family:center;background-color:#006699;text-align:center;" |<font color="black">you</font>
| style="text-align:center;" |info
|-
! scope="col" style="font-family:center;background-color:#ffffff;text-align:center;" |Think
| style="text-align:center;" |info
|-
! scope="col" style="font-family:center;background-color:#006699;text-align:center;" |<font color="black">so</font>
| style="text-align:center;" |info
|-
! scope="col" style="font-family:center;background-color:#ffffff;text-align:center;" |<font color="black">?</font>
| style="text-align:center;" |info
|}

This is a slightly uncommon table, but it's still nice. Although it doesn't really look like a table, the code says otherwise.

Here         info

is     info

Another         info

table     info

Isn't         info

it     info

Great         info

?     info

And here's the code:

{| class="" style="background:transparent;margin: 0px auto; border:1px solid transparent; width: auto; margin-top: 2px; line-height: 100%;" align="center"
| style="text-align:left;font-weight:bold;margin-top: 20px; color:#3B7A57;font-family:Times New Roman;text-align:-webkit-center;font-size:14px;" |
|-
| style="text-align:left;font-family: times new roman; font-size:14px; color:#000000;" |
<p style="text-align:center;">'''Here         info'''</p>
<p style="text-align:center;">'''is     info'''</p>
<p style="text-align:center;">'''Another         info'''</p>
<p style="text-align:center;">'''table     info'''</p>
<p style="text-align:center;">'''Isn't         info'''</p>
<p style="text-align:center;">'''it     info'''</p>
<p style="text-align:center;">'''Great         info'''</p>
<p style="text-align:center;">'''?     info'''</p>
|}

If you want a little bit more advanced tables, we're getting right to it.

Here info here
is info here
Another info here
amazing info here
Table info here
whatcha info here
Think info here
? info here
It's info here
pretty info here
Cool info here
? info here

Here's the code (it's a big one):

{|
|-
! scope="col"|
|-
| style="text-align:center;" |

{| class="box" align="center" cellpadding="1" cellspacing="0" style="float:center; width: 250px;"
|-
|<span style="font-size:12pt"><span style="font-family: garamond"><font color="000000">'''Here'''</font></span></span>
|<span style="font-size:12pt"><span style="font-family: garamond">info here</span></span>
| style="background:white;"|
|-
|<span style="font-size:12pt"><span style="font-family: garamond"><font color="000000">'''is'''</font></span></span>
|<span style="font-size:12pt"><span style="font-family: garamond">info here</span></span>
| style="background:white;"|
|-
|<span style="font-size:12pt"><span style="font-family: garamond"><font color="000000">'''Another'''</font></span></span>
|<span style="font-size:12pt"><span style="font-family: garamond">info here</span></span>
| style="background:white;"|
|-
|<span style="font-size:12pt"><span style="font-family: garamond"><font color="000000">'''amazing'''</font></span></span>
|<span style="font-size:12pt"><span style="font-family: garamond">info here</span></span>
| style="background:white;"|
|}
| style="text-align:center;" |

{| class="box" align="center" cellpadding="1" cellspacing="0" style="float:center; width: 250px;"
|-
|<span style="font-size:12pt"><span style="font-family: garamond"><font color="000000">'''Table'''</font></span></span>
|<span style="font-size:12pt"><span style="font-family: garamond">info here</span></span>
| style="background:white;"|
|-
|<span style="font-size:12pt"><span style="font-family: garamond"><font color="000000">'''whatcha'''</font></span></span>
|<span style="font-size:12pt"><span style="font-family: garamond">info here</span></span>
| style="background:white;"|
|-
|<span style="font-size:12pt"><span style="font-family: garamond"><font color="000000">'''Think'''</font></span></span>
|<span style="font-size:12pt"><span style="font-family: garamond">info here</span></span>
| style="background:white;"|
|-
|<span style="font-size:12pt"><span style="font-family: garamond"><font color="000000">'''?'''</font></span></span>
|<span style="font-size:12pt"><span style="font-family: garamond">info here</span></span>
| style="background:white;"|
|}
| style="text-align:center;" |

{| class="box" align="center" cellpadding="1" cellspacing="0" style="float:center"
|-
|<span style="font-size:12pt"><span style="font-family: garamond"><font color="000000">'''It's'''</font></span></span>
|<span style="font-size:12pt"><span style="font-family: garamond">info here</span></span>
|-
|<span style="font-size:12pt"><span style="font-family: garamond"><font color="000000">'''pretty'''</font></span></span>
|<span style="font-size:12pt"><span style="font-family: garamond">info here</span></span>
|-
|<span style="font-size:12pt"><span style="font-family: garamond"><font color="000000">'''Cool'''</font></span></span>
|<span style="font-size:12pt"><span style="font-family: garamond">info here</span></span>
|-
|<span style="font-size:12pt"><span style="font-family: garamond"><font color="000000">'''?'''</font></span></span>
|<span style="font-size:12pt"><span style="font-family: TimesNewRoman">info here</span></span>
|}
|}

Here's another cool table (pretty big one so it will have a big code).

soundcloud here
This info here
one info here
Is info here
pretty info here
Spicy info here
even info here
Though info here
its info here
Huge info here
right info here
? info here
It's info here
still info here
Spicy info here

And here's that code:

{| cellpadding="10" cellspacing="0" class="box" style="margin: 0px auto; width: 273px;text-align:center;background:darkturquoise;color:white;"
|-
| style="border:.5px solid white;font-size:10pt" colspan="2" cellpadding="9"|soundcloud here
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''This'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''one'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''Is'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''pretty'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''Spicy'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''even'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''Though'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''its'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''Huge'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''right'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''?'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''It's'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''still'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|-
| style="border-left:.4px white solid;border-bottom:.4px white solid"|'''Spicy'''
| style="border-left:.4px white solid;border-right:.4px white solid;border-bottom:.4px white solid"|'''info here'''
|}

Here's one you probably don't see that often, even though it's really pretty.

Pretty
right
its nice
and spicy
so yeah

Credit to Øurayz

And here's that amazing code:

{| border="0" cellpadding="1" cellspacing="1" class="article-table" style="margin: 0px auto; width: 194px; border: 3px solid #abb3fc; background-color:#1e2033; box-shadow: inset 0 0 20px #abb3fc;"
| style="text-align:center;"|<font color=white>'''Pretty'''</font>
|}
{| border="0" cellpadding="1" cellspacing="1" class="article-table" style="margin: 0px auto; width: 250px; border: 3px solid #1e2033; background-color:#abb3fc; box-shadow: inset 0 0 20px #1e2033;"
| style="text-align:center;"|<font color=white>'''right'''</font>
|}
{| border="0" cellpadding="1" cellspacing="1" class="article-table" style="margin: 0px auto; width: 350px; border: 3px solid #abb3fc; background-color: #1e2033; box-shadow: inset 0 0 20px #abb3fc;"
| style="text-align:center;"|<font color=white>'''its'''</font>
| style="text-align:center;"|<font color=white>'''nice'''</font>
|}
{| border="0" cellpadding="1" cellspacing="1" class="article-table" style="margin: 0px auto; width: 450px; border: 3px solid #abb3fc; background-color: #1e2033; box-shadow: inset 0 0 20px #abb3fc;"
| style="text-align:center;"|<font color=white>'''and'''</font>
| style="text-align:center;"|<font color=white>'''spicy'''</font>
|}
{| border="0" cellpadding="1" cellspacing="1" class="article-table" style="margin: 0px auto; width: 390px; border: 3px solid #1e2033; background-color: #abb3fc; box-shadow: inset 0 0 20px #1e2033;"
| style="text-align:center;"|<font color=white>'''so'''</font>
| style="text-align:center;"|<font color=white>'''yeah'''</font>
|}

This is the last of the classic tables, once we're done with them we'll move onto rank tables and rank description tables. Here's my favorite table.

This one
Is my
Favorite, you?

And here's the code:

{| class="box" align="center" cellpadding="5" cellspacing="1" style="float:center; width:260px; font-size: 70%; background-color:#5e71bc; Border-radius:3px; border: 9px #5e71bc solid"
| colspan="2" align="center" bgcolor="#663399" style="font-size:100%; padding:6px; color:#594E36; Border-radius:0px 0px 30px 30px;text-align:center" |<soundcloud url="https://soundcloud.com/jansen-zoukdj/castle-halsey" color="#5e71bc" height="20" width="21"></soundcloud>
|-
! style="background-color: #663399; color:#5e71bc;" |This
! style="background-color: #663399; color:#5e71bc;" |one
|-
! style="background-color: #663399; color:#5e71bc;" |Is
! style="background-color: #663399; color:#5e71bc;" |my
|-
! style="background-color: #663399; color:#5e71bc;" |Favorite,
! style="background-color: #663399; color:#5e71bc;" |you?
|}

Alright, time for rank tables and rank description tables! I'll start off with the rank tables, since they're pretty easy. Here's the rank table:

A
wild
Table
in
It's
natural
Habitat
info info info info info info info

And here's it's code:

{| class="article-table" border="2" cellpadding="1" cellspacing="1" style="margin: 0px auto; width: 200px; height: 10px; border:4px inset black;"
|-
| style="text-align: center; background-color: #663399; border-color: #00000;" |<div style="font-size:12pt;color:white;">A</div>
| style="text-align: center; background-color: #663399; border-color: #00000;" |<div style="font-size:12pt;color:white;">wild</div>
| style="text-align: center; background-color: #663399; border-color: #00000;" |<div style="font-size:12pt;color:white;">Table</div>
| style="text-align: center; background-color: #663399; border-color: #00000;" |<div style="font-size:12pt;color:white;">in</div>
| style="text-align: center; background-color: #663399; border-color: #00000;" |<div style="font-size:12pt;color:white;">It's</div>
| style="text-align: center; background-color: #663399; border-color: #00000;" |<div style="font-size:12pt;color:white;">natural</div>
| style="text-align: center; background-color: #663399; border-color: #00000;" |<div style="font-size:12pt;color:white;">Habitat</div>
|-
| style="text-align:center;" | info
| style="text-align:center;" | info
| style="text-align:center;" | info
| style="text-align:center;" | info
| style="text-align:center;" | info
| style="text-align:center;" | info
| style="text-align:center;" | info
|}

Now, time to move on to the rank description tables.

Rank here

Other Rank here
Sagebluefinal
Sagebluefinal

info

info

And now time for that spicy code:

{| class="article-table" style="margin: 10px auto; width: 300px; height: 100px;border: 6px solid black;color:white"
| scope="row" style="background-color:#800080;border-color:black;text-align:center;" |
'''Rank here'''
| scope="row" style="background-color:#800080;border-color:black;text-align:center;" |'''Other Rank here'''
|-
| scope="row" style="background-color:transparent;border-color:black;text-align:center;" |[[File:sagebluefinal.jpg|thumb|239px]]
| scope="row" style="background-color:transparent;border-color:black;text-align:center;" |[[File:sagebluefinal.jpg|thumb|239px]]
|-
| scope="row" style="background-color:#663399;border-color:black;text-align:center;" |<div style="overflow: hidden; height: 100px; width: 230px; margin-center: 0px; overflow-y: scroll">
info
</div>
| scope="row" style="background-color:#663399;border-color:black;text-align:center;" |<div style="overflow: hidden; height: 100px; width: 230px; margin-center: 0px; overflow-y: scroll">
info
</div>
|}

Now we're moving on to Subpage tables. These are mostly used for clans, to have their Shipping Page, StarClan page and Dark Forest page. I'll show you how to code it. I used OrchidClan's subpages as examples (you can switch them out with your subpages if you want).

Here's that code:

{| class="article-table" border="2" cellpadding="1" cellspacing="1" style="margin: 0px auto; width: 200px; height: 10px; border:4px inset black;"
|-
| style="text-align: center; background-color: #663399; border-color: #000000;" |<div style="font-size:12pt;color:white;">[http://animal-jam-clans-1.wikia.com/wiki/OrchidClan_(Username033_&_Kaibones)//Shipping_Page <font color="#ffffff">Shipping</font>]</div>
| style="text-align: center; background-color: #800080; border-color: #000000;" |<div style="font-size:12pt;color:white;">[http://animal-jam-clans-1.wikia.com/wiki/OrchidClan_(Username033_&_Kaibones)//StarClan <font color="#ffffff">StarClan</font>]</div>
| style="text-align: center; background-color: #663399; border-color: #000000;" |<div style="font-size:12pt;color:white;">[http://animal-jam-clans-1.wikia.com/wiki/OrchidClan_(Username033_&_Kaibones)//Dark_Forest <font color="#ffffff">Dark Forest</font>]</div>
|}
______________________

Collapsibles Edit

Collapsible are great things to use if you don't want to make your profile or page long. They can also hold info that needs to be explained on the page. Here's an example from my oc pages:

Guide

Bulletpink.gif /Slight Crush

Bulletpink.gifBulletpink.gif /Crush

Bulletpink.gifBulletpink.gifBulletpink.gif /Loves

Bulletred.gif /Trusts

Bulletred.gifBulletred.gif /Envies

Bulletred.gifBulletred.gifBulletred.gif /Regrets

Bulletorange.gif /Likes

Bulletorange.gifBulletorange.gif /Respects

Bulletorange.gifBulletorange.gifBulletorange.gif /Idolizes

Bulletyellow.gif /Slightly curious

Bulletyellow.gifBulletyellow.gif /Major curiousity

Bulletyellow.gifBulletyellow.gifBulletyellow.gif /Interested in

Yellowgreenbullet.png /Shy

Yellowgreenbullet.pngYellowgreenbullet.png /Nervous

Yellowgreenbullet.pngYellowgreenbullet.pngYellowgreenbullet.png /Discomfort

Bulletgreen.gif /Acquaintance

Bulletgreen.gifBulletgreen.gif /Friend

Bulletgreen.gifBulletgreen.gifBulletgreen.gif /Close friend

Turquoisebullet.png /Unease

Turquoisebullet.pngTurquoisebullet.png /Disgusted by

Turquoisebullet.pngTurquoisebullet.pngTurquoisebullet.png /Avoids

Bulletblue.gif /Wants to know

Bulletblue.gifBulletblue.gif /Misses

Bulletblue.gifBulletblue.gifBulletblue.gif /Can't be without

Bulletpurple.gif /Relative

Bulletpurple.gifBulletpurple.gif /Family

Bulletpurple.gifBulletpurple.gifBulletpurple.gif /Inseparable

Bulletwhite.gif /Slightly suspicious

BulletwhiteBulletwhite.gif /Very suspicious

Bulletwhite.gifBulletwhite.gifBulletwhite.gif /Distrusts

Bulletblack.gif /Annoyed by

Bulletblack.gifBulletblack.gif /Dislike

Bulletblack.gifBulletblack.gifBulletblack.gif /Hate




















If you were reading an oc page that had those bullets, but didn't have the guide, would you be confused? That's the exact reason of a collapsible; to hold information that could be opened, but isn't there taking up tons of space. (Notice that the bullets aren't in the center position, or left or right? See adding images for that info). Here's the code for the collapsible:

{| class="mw-collapsible mw-collapsed" style="margin: 0px auto; width: auto; margin-top: 2px; line-height: 100%;" align="center"
| style="text-align:center;font-weight:bold;margin-top: 20px; color:white;font-family:Times New Roman;text-align:-webkit-center;font-size:20px;" |
Title Here
|-
| style="text-align:center;font-family: times new roman; font-size:12px; color:white;" |
Info here

<br />
|}
______________________

Scrollers Edit

Welcome to the land of scrollers! There are two different kinds of scrollers: x-axis (left to right), and y-axis (up and down). I'll show you how to code both.

X-Axis:

<div style="overflow: hidden;width:570px; margin-center: 300px;overflow-x: scroll">text here</div>

Y-Axis:

<div style="height:230px;line-height:20px;overflow:hidden;overflow-y:scroll">text here</div>
______________________

Countdowns Edit

Countdowns are one of the best things to mark memories with. How long ago it was that you joined your clan, is a great example. Note: Do not just delete then type the month, if you do, it will look like this:

What you will need to do is go to another tab, and type in the date you want to use (type out the month, not the # the month is (ex: February = 2)). If you do the countdown correctly it will look like this: . Here's the code:

<span style="display:none;" class="countdown"><span style="color:#ffffff" class="countdowndate" font-size:15pt>February 22 2018 00:00:00</span></span>
______________________

This User Edit

These are pretty common, they mostly show what you like, or who you like. Here's an example:

Xfiles
This user is an X-Files nerd

And here's the code:

{| cellspacing="0" style="width:238px;background:azure"
| style="width:45px;height:45px;background:darkgrey;text-align:center;font-size:14pt" |<font color="#d9ecf0">[[File:xfiles.jpg|center|44px]]</font>
| style="font-size:8pt;padding:4pt;line-height:1.25em" | <font color="grey">This user is an X-Files [http://animal-jam-clans-1.wikia.com/wiki/User:Shadow7190 <font color="grey">nerd</font>]</font>
|}
______________________

Links Edit

There's been links throughout this guide, time to figure out how to code some!

Normal ex: My User

Colored ex: My User


Here's the code for both normal and colored:


Normal:

[[User:Shadow7190|My User]]

Colored:

[http://animal-jam-clans-1.wikia.com/wiki/User:Shadow7190 <font color="#663399">My User</font>]
______________________

Quotes Edit

Something almost every page has (especially oc pages). Time to learn how to code these!

Normal Quote

Here's the code:

{{Quote|your quote here}}
Colored Quote

Here's the code:

{{Colored Quote|Colored Quote|Color = #663399}}
______________________

Text Add-Ons Edit

Those things we see but don't know exactly how to add? You'll learn 'em here!

Bold: Bold here


Here's the code:

'''Bold here'''

Italic: Italic here

Here's the code:

''Italic here''

Underline: Underline here

Here's the code:

<u>Underline here</u>

Strike-Through: Strike here

Here's the code:

<strike>Strike here</strike>
______________________

Avatars (PFPs) Edit

Want to add pfp's (profile pics/avatars) to your profile but don't know the code? It'll be right down here. What it looks like:

The code:

{{Avatar|Førever|15px}}

There's also a code to have the avatars circular. It looks like this:

And the code is:

{|
|<div style="overflow:hidden;width:92px;height:92px;border-radius:73px;background:transparent;background-image:radial-gradient(transparent 10%, transparent );border:px solid transparent">{{Avatar|Førever|95}}</div>
|}
______________________

Template Edit

This is where you'll find the formats for Stubs, Speedy Deletion, and Deletion (plus others), and how to code them. Let's start with the Stub:

Screenshot 2017-11-06 18.54.58

Here's the code:

{{Stub}}

Deletion:

Screenshot 2017-11-06 18.20.52

Here's the code:

{{Delete}}

Speedy Deletion:

Speedydeletetemplate

Here's the code:

{{Speedydelete}}

Open to Criticism:

Screenshot 2017-11-06 18.55.26

Here's the code:

{{Critique}}

And the last one, Art Theft:

Screenshot 2017-11-06 18.55.19

Here's the code:

{{Art Theft}}
______________________

Display Titles Edit

They're pretty cool. You know how some people's profiles say something else than User:(Usernamehere), right? Well, that's a display title. Here's the code:

{{DISPLAYTITLE:Your Title Here}}
______________________

Polls Edit

Polls are pretty fun to use. Here's an example:

Example Question
 
56
 
25
 
25
 

The poll was created at 23:00 on March 12, 2018, and so far 106 people voted.

And here's the code:

<poll>
Example Question
Ex Answer 1
Ex Answer 2
Ex Answer 3
</poll>
______________________

Borders Edit

Everyone likes borders, right? Well let's learn how to code some! Plus you can replace the colors with hex codes or the standard colors. Here's the first, an Ultra Thick border:

Here

And the code:

<div style="border: 7px solid purple;">Text Here</div>

Groove border:

Text Here

The code:

<div style="border:10px groove rebeccapurple;">Text Here</div>

Ridge border:

Text Here

The code:

<div style="width:200px;height:100px;padding:10px;border:10px ridge purple;">Text Here</div>

Box-Shadow border:

Text Here

The code:

<div style=" padding: 20px; border: 8px COLORS;box-shadow: inset 0 0 60px rebeccapurple">Text Here</div>

Rounded-Shadow border:

Text Here

The code:

<div style="background-color: none; padding: 30px; border: none;margin: 3px; -webkit-border-radius: 10px; border-radius: 10px; box-shadow: inset 0 0 50px purple">Text Here</div>

Shadow border:

Text Here

The code:

<div style="border: 2px solid black; box-shadow: 0 0 5px 2px rebeccapurple;">Text Here</div>

Solid, Dashed, Dotted border:

Text Here

The code:

<div style="border: 3px solid purple;"> <div style="border: 4px dashed rebeccapurple;"> <div style="border: 4px dotted lavender;">Text Here</div></div></div>

Inset border:

Text Here

The code:

<div style="BORDER:10px outset purple;">Text Here</div>

Outset border:

Text Here

The code:

<div style="BORDER:10px outset rebeccapurple;">Text Here</div>

Double border:

Text Here

The code:

<span style="border:3px double purple;">Text Here</span>

Standard Rounded border:

Text Here

The code:

<div style="border: 7px solid rebeccapurple; -moz-border-radius: 0px; -webkit-border-radius: 10px; border-radius: 10px;">Text Here</div>

Standard border:

Text Here

The code:

<span style="border:1px solid purple;">Text Here</span>

Here's the Common border:

Text Here

And the code:

<div style="border:4px rebeccapurple solid;text-align:center;padding:20px">Text Here</div>

Dashed border:

Text Here

The code:

<div style="border:4px purple dashed;text-align:center;padding:20px">Text Here</div>

Dotted border:

Text Here

The code:

<div style="border:4px purple dotted;text-align:center;padding:20px">Text Here</div>

Double border:

Text

The code:

<div style="border:7px purple double;text-align:center;padding:20px">Text</div>

Double-Solid border:

Text Here

The code:

<div style="border:7px rebeccapurple solid;text-align:center;padding:20px"><div style="border:2px purple double;text-align:center;padding:20px">Text Here</div>
</div>

Here's one of my favorite borders:

Text Here

And heres the code:

<div style="border: 12px solid rebeccapurple;width: 95%;">
<div style="border: 6px double purple; border-radius: 3pc;">
<div style="border: 2px solid rebeccapurple; box-shadow: 0 0 38px 3px lavender;">
<div style="padding: 15px; border: 12px #ffffff;margin: 0px; box-shadow: inset 0 0 100px lavender;">Text Here</div></div></div>
______________________

Contacts Edit

Lead Coder Co-coder
Myself
Cam