FANDOM


I am working hard on fixing everything on the page and re-doing it right now! I apologize if there is something wrong with the code, it's being fixed!!


Welcome!

Salutations! Edit

Hi! I'm Wammer17, and welcome to my coding guide. Now there are lots of other coding guides, so lets try and make this special. Today, you'll learn how to do the most essential, and coolest ways to code a great page!

Basics Edit

Things in here will count as common borders, tables, rank tables, etc. Afterwards there will be a more advanced section where even the best coders might learn something new!

Centering Text Edit

To center text, all you have to do is type <center> at the front of your page! you only need to type it once.

ex.
  • You can see the <center> at the top of the page! It's only used once!

Adding Photos/Videos Edit

This part is simple! Simply go to the right of the page and click on Gallery, Slideshow, Slider, Video, or Photo. If you want your slideshows centered, when in the making you have to click "Slideshow position: (left,right,center)". It'll be at the top.

  • You can see the options in this image!
  • Here, you can simply click the button that says "Right" and chose your position!


A gallery will look like this:

The code:

<gallery>
     Placeholder.png
     Placeholder.png
     Placeholder.png
     </gallery>


A slideshow will look like this:

The code:

<gallery type="slideshow" position="center">
     Placeholder.png
     </gallery>


A slider will look like this:

The code:

<gallery type="slider">
     Placeholder.png
     Placeholder.png
     </gallery>

A video will be like this:

Video placeholder

Video placeholder


The code:

[[File:Video placeholder|thumb|center|335 px]]


And here's a spinny image, just because:





Placeholder


The code:

<div class="spin"><span class="lavalamp" style="animation: flow 8s ease infinite;background-image:linear-gradient(178deg, red 5%, orange 50%, yellow 65%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:hoefler;small-uppercase;font-size:30pt;font-weight:normal;line-height:10px;">[[file:placeholder.png|thumb|100px]]</span></div>


Types of text Edit

There are many types of text. This here is in italics. Here's how to make your text look cool without coding it!


Italic Text

''Text''

Bold Text

'''Text'''

Strikethrough

<s>Text</s>

Bold Italic Text

'''''Text'''''

Underlined Text

<u>text</u>

Big text

<big>Text</big

Small Text

<small>Text</small>

Polls Edit

A poll is like a voting booth! They are simple and easy to make, and i think they're very fun!

Did the page help you/Have what you need?
 
180
 
43
 
11
 
16
 

The poll was created at 02:15 on April 16, 2018, and so far 250 people voted.

Copy and paste this onto your page and it will appear:

<poll>
       Question
       Answer
       Answer
       Answer
       </poll>


Simple Borders Edit

Borders can be complex or simple, or maybe a mix of the two. Some pages use small borders, some use large, but either way, i think most borders look great!

This is a solid border, it's very simple, but can be nice at some times.

Copy and paste this onto your page and it will appear:

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


This is a dotted border, it's very simple, you can use it for text, that looks good.

Copy and paste this onto your page and it will appear:

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


This is a double border, it's very simple, that looks good.

Copy and paste this onto your page and it will appear:

<div style="border:7px black double;text-align:center;padding:20px">Text</div>
       
This is a dashed border

Copy and paste this onto your page and it will appear:

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


This Is A Dotted-Solid Border This can also be switched around. You can mix all sorts of borders! like dotted and dashed, and solid and dashed and more!

Copy and paste this onto your page and it will appear:

<div style="border:7px black double;text-align:center;padding:20px"><div style="border:2px black solid;text-align:center;padding:20px">Text Here</div>
       </div>
This Is A Dashed-Dotted Border!

Copy this onto your page and it will appear:

<div style="border:7px black dashed;text-align:center;padding:20px"><div style="border:2px black dotted;text-align:center;padding:20px">Text Here</div>
                </div>


Mixing Borders Edit

There are many ways to mix different borders, and it's easy! Say you want to make a double + solid border. What do you do? Thats simple! copy and paste the solid border into your page/comment/whatever, and then where it says "text here", copy and paste the solid border into the text here. Now, since it says "3px black Solid" on both of the, change one of the borders to "3px black Double"


Simple Tables Edit

You may be wondering how fancy pages have all these cool and fancy tables. We'll get to fancifying later, but for now, you can see the basics, just to get you warmed up. We'll start with information tables, and maybe some ranks + basic character tables! Have fun!


Information Table

Hey Look
At This
Rockin' Table.
Pretty Cool
Huh? You
Can Change
The Colors
To Make
It Look
Very Origional

Copy and paste this onto your page and it will appear:

{| border="0" cellpadding="1" cellspacing="1" class="article-table" style="margin: 0px auto; width: 300px;text-align:center;background:orange"
       |-
       | style="border:3px double red"|<font color=yellow>Hey</font>
       | style="border:3px double red"|<font color=yellow>Look</font>
       |-
       | style="border:3px double red"|<font color=yellow>At</font>
       | style="border:3px double red"|<font color=yellow>This</font>
       |-
       | style="border:3px double red"|<font color=yellow>Rockin'</font>
       | style="border:3px double red"|<font color=yellow>Table.</font>
       |-
       | style="border:3px double red"|<font color=yellow>Pretty</font>
       | style="border:3px double red"|<font color=yellow>Cool</font>
       |-
       | style="border:3px double red"|<font color=yellow>Huh?</font>
       | style="border:3px double red"|<font color=yellow>You</font>
       |-
       | style="border:3px double red"|<font color=yellow>Can</font>
       | style="border:3px double red"|<font color=yellow>Change</font>
       |-
       | style="border:3px double red"|<font color=yellow>The</font>
       | style="border:3px double red"|<font color=yellow>Colors</font>
       |-
       | style="border:3px double red"|<font color=yellow>To</font>
       | style="border:3px double red"|<font color=yellow>Make</font>
       |-
       | style="border:3px double red"|<font color=yellow>It</font>
       | style="border:3px double red"|<font color=yellow>Look</font>
       |-
       | style="border:3px double red"|<font color=yellow>Very</font>
       | style="border:3px double red"|<font color=yellow>Origional</font>
       |}


Ranking Tables

Name Username Gender App. Mate
N/A N/A N/A N/A N/A
{| class="article-table" cellpadding="7" cellspacing="1" style="background:transparent;width:500px;text-align:center;border:1px solid orange"
       |-
       | style="background:orange;color:yellow;border:1px solid red"|Name
       | style="background:orange;color:yellow;border:1px solid red"|Username
       | style="background:orange;color:yellow;border:1px solid red"|Gender
       | style="background:orange;color:yellow;border:1px solid red"|App.
       | style="background:orange;color:yellow;border:1px solid red"|Mate
       |-
       | style="background:transparent;color:orange;border:1px solid red"|N/A
       | style="background:transparent;color:orange;border:1px solid red"|N/A
       | style="background:transparent;color:orange;border:1px solid red"|N/A
       | style="background:transparent;color:orange;border:1px solid red"|N/A
       | style="background:transparent;color:orange;border:1px solid red"|N/A
       |}


Ranks/Hierarchy tables


Text

Text

Copy and paste this onto your page and it will appear:

{| class="article-table" style="margin: 10px auto; width: 300px; height: 100px;border: 6px double red;color:white"
       | scope="row" style="background-color:orange;border-color:red;text-align:center;" |
       '''Text'''
       |-
       | scope="row" style="background-color:transparent;border-color:red;text-align:center;" |
       |-
       | scope="row" style="background-color:orange;border-color:red;text-align:center;" |<div style="overflow: hidden; height: 100px; width: 230px; margin-center: 0px; overflow-y: scroll">
       Text
       </div>
       |}

Sound Clouds Edit

Now this is a bit more advanced, but i think y'all can handle it. and honestly, it's just like the other things, copy and paste it and it'l show up! Now for sound clouds, to have a color, it has to be a hex code. You can find a good hex code website here!


Colored Sound cloud

Copy and paste this onto your page and it will appear:

<soundcloud url="https://soundcloud.com/interscope/onerepublic-i-lived" color="#fdff00" height="20" width="21"></soundcloud>


Spinning Sound Cloud

Copy and paste this onto your page and it will appear:

<div class="spin"><soundcloud url="https://soundcloud.com/interscope/onerepublic-i-lived" color="#fdff00" height="20" width="21"></soundcloud></div>

ADVANCED CODING Edit

Codes in this area will consist of new tables, bigger borders, different info tables, different rank tables, profile coding, acceptance scrollers, and more!

Borders Edit

Text Here

The code:

<div style="border: 8px solid orange">
       <div style="border: 5px solid red; box-shadow: 0 0 100px 5px white;">
       <div style=" padding: 10px; border: 2px black;margin: 0px;font-family: COLORS;box-shadow: inset 0 0 20px yellow;">
       Text Here
       </div></div></div>


Text Here

The code:

<div style="border: 9px solid orange;"><div style="border: 6px double yellow; -moz-border-radius: 2px; -webkit-border-radius: 5px; border-radius: 90px;"><div style="border: 4px solid yellow; box-shadow: 0 0 38px 2px yellow;"><div style=" padding: 30px; border: 2px yellow;margin: 0px;font-family: COLORS;box-shadow: inset 0 0 70px red;">
       Text Here
       </div></div></div></div>




Text


<center>
       <div style="overflow:hidden;border-radius:100px;border: 3px yellow double;width:220px;height:220px;background-color: ">
       [[File:Fire_potion_by_planet_spatulon-daiwuvq.gif|thumb|center|405px]]
       <span class="" style="background: webkit-gradient(linear, left top, left top, color-stop(0%,#ffffff), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(45deg, yellow, orange, yellow, orange 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-size:20pt;garamond">'''Text'''</span>
       </div>
       


Text Here

The Code:

<div style="border:7px solid red">
       <div style="border:5px solid yellow">
       <div style=" padding: 30px; border: none;margin: none;box-shadow: inset 0 0 50px orange">
       Text Here
       </div></div></div>

More borders coming soon!

Text Edit

Hello There

Code:

<span class="" style="background: webkit-gradient(linear, left top, left top, color-stop(0%,#ffffff), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(45deg, red, orange, yellow, orange 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-size:50pt;garamond">'''Text here'''</span>

Text

<span class="lavalamp" style="animation: flow 4s ease infinite;background-image:linear-gradient(278deg,red 50%, orange 50%, yellow 65%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:Georgia;small-uppercase;font-size:35pt;font-weight:normal;line-height:60px;">'''Text'''</span>


Credit to Ouraze

Hello There

Code:

<span class="" style="background: webkit-gradient(linear, left top, left top, color-stop(0%,#ffffff), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(45deg, red, red, red, orange 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-size:50pt;garamond">'''Text here'''</span>

Credit to Ourayze

Hello There

The Code:

<span class="" style="background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffffff), color-stop(100%,#405066)); background: -webkit-linear-gradient(top, red 0%, yellow 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:Times New Roman;font-size:60pt;font-weight:normal;line-height:60px;">TEXT</span>

Credit to Ourayze

Hello There

The Code:

<div style="font-family: garamond; text-transform: capital; letter-spacing: 3px; font-size: 35px; font-weight: bold;text-align: center; background: red; color:yellow; border-radius: 50px; padding: 15px; margin: 0 auto; margin-bottom: 0px; width: 4">Text</div><p style="text-align:center;">
       </p>


Hello There

The Code

<center>
       <div style="overflow:hidden;border-radius:100px;border: 3px yellow double;width:120px;height:120px;background-color:red ">
       
       [[File:Fire_potion_by_planet_spatulon-daiwuvq.gif|thumb|center|25px]]
       <span class="" style="background: webkit-gradient(linear, left top, left top, color-stop(0%,#ffffff), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(45deg, yellow, orange, yellow, orange 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-size:20pt;garamond">'''Hello There'''</span>
       </div>

Credit to Fubsy (I think)

Hello There



<div class=wiggle><span class="lava lamp" style="animation: flow 4s ease infinite;background-image:linear-gradient(178deg, yellow 5%, red 15%, yellow 5%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:tiki island;font-size:40pt;letter-spacing:2px;color:orange">Hello There</span></div>


Hello There

The Code:

<p style="text-align:center;"><span class="" style="background:linear-gradient(45deg, orange 45px, transparent 45px)64px 64px, linear-gradient(40deg, red 45px, transparent 45px,transparent 91px, yellow 91px, red 135px, transparent 135px), linear-gradient(-45deg, red 23px, transparent 23px, orange 68px, red 68px, yellow 113px,transparent 113px,orange 158px, yellow 158px); background-size: 128px 128px;; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:Times New Roman;font-size:70pt;font-weight:normal;line-height:60px;">'''Hello There'''</span></p>


Text

The Code:

<span class="lavalamp" style="animation: flow 6s ease infinite;background-image:linear-gradient(178deg,red 50%, orange 50%, yellow 65%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:Georgia;small-uppercase;font-size:35pt;font-weight:normal;line-height:60px;">'''Text'''</span>







Hello there folks. Isn't this trippy?

The code:


      <div class="spin"><span class="lavalamp" style="animation: flow 8s ease infinite;background-image:linear-gradient(178deg, red 5%, orange 50%,  yellow 65%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:hoefler;small-uppercase;font-size:30pt;font-weight:normal;line-height:10px;">'''Hello there folks. Isn't this trippy?'''</span></div>


Hello There

The Code

<span class="flicker"><span class="" style="background: webkit-gradient(linear, left top, left top, color-stop(0%,#ffffff), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(45deg, red, orange, yellow, orange 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-size:50pt;garamond">'''Hello There'''</span></span>


H

E

L

L

O

The Code:

<span class="lavalamp" style="animation: flow 6s ease infinite;background-image:linear-gradient(178deg,red 50%, orange 50%, yellow 65%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:Georgia;small-uppercase;font-size:35pt;font-weight:normal;line-height:60px;">'''H'''</span>
    
 <span class="lavalamp" style="animation: flow 6s ease infinite;background-image:linear-gradient(178deg,red 50%, orange 50%, yellow 65%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:Georgia;small-uppercase;font-size:35pt;font-weight:normal;line-height:60px;">'''E'''</span>
    
 <span class="lavalamp" style="animation: flow 6s ease infinite;background-image:linear-gradient(178deg,red 50%, orange 50%, yellow 65%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:Georgia;small-uppercase;font-size:35pt;font-weight:normal;line-height:60px;">'''L'''</span>
    
 <span class="lavalamp" style="animation: flow 6s ease infinite;background-image:linear-gradient(178deg,red 50%, orange 50%, yellow 65%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:Georgia;small-uppercase;font-size:35pt;font-weight:normal;line-height:60px;">'''L'''</span>
    
 <span class="lavalamp" style="animation: flow 6s ease infinite;background-image:linear-gradient(178deg,red 50%, orange 50%, yellow 65%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:Georgia;small-uppercase;font-size:35pt;font-weight:normal;line-height:60px;">'''O'''</span>

Tables Edit

hey Hi
hey Hi
hey Hi
hey Hi
hey Hi
hey Hi
hey Hi
hey Hi
hi hey
hi hey
hi hey
hi hey


The Code:

{|
       ! scope="col" |
       |-
       | style="text-align:center;" |
       {| class="box" align="center" cellpadding="1" cellspacing="0" style="float:center; width: 250px;"
       |-
       | style="text-align:center;" |'''hey'''
       | style="text-align:center;" |Hi
       | style="text-align:center; background: red" |
       |-
       | style="text-align:center;" |'''hey'''
       | style="text-align:center;" |Hi
       | style="text-align:center; background: red" |
       |-
       | style="text-align:center;" |'''hey'''
       | style="text-align:center;" |Hi
       | style="text-align:center; background: red" |
       |-
       | style="text-align:center;" |'''hey'''
       | style="text-align:center;" |Hi
       | style="text-align:center; background: red" |
       |}
       | style="text-align:center;" |
       {| class="box" align="center" cellpadding="1" cellspacing="0" style="float:center; width: 250px;"
       |-
       | style="text-align:center;" |'''hey'''
       | style="text-align:center;" |Hi
       | style="text-align:center; background: red" |
       |-
       | style="text-align:center;" |'''hey'''
       | style="text-align:center;" |Hi
       | style="text-align:center; background: red" |
       |-
       | style="text-align:center;" |'''hey'''
       | style="text-align:center;" |Hi
       | style="text-align:center; background: red" |
       |-
       | style="text-align:center;" |'''hey'''
       | style="text-align:center;" |Hi
       | style="text-align:center; background: red" |
       |}
       | style="text-align:center;" |
       {| class="box" align="center" cellpadding="1" cellspacing="0" style="float:center; width: 250px;"
       |-
       | style="text-align:center;" |'''hi'''
       | style="text-align:center;" |hey
       |-
       | style="text-align:center;" |'''hi'''
       | style="text-align:center;" |hey
       |-
       | style="text-align:center;" |'''hi'''
       | style="text-align:center;" |hey
       |-
       | style="text-align:center;" |'''hi'''
       | style="text-align:center;" |hey
       |}
       |}


Text or photo here

Founder Text
Founded Text
Status Text
Orientation Text
Species Text
Name Badge Text
OC Limit Text
Server Text
Camp Location Text

The Code:

{| cellpadding="10" cellspacing="0" class="box" style="margin: 0px auto; width: 273px;text-align:center;background:red;color:yellow;"
       |-
       | style="border:.5px solid yellow;font-size:19pt" colspan="2" cellpadding="9"|
       Text or photo here
       |-
       | style="border-left:.4px red solid;border-bottom:.4px red solid"|'''Founder'''
       | style="border-left:.4px red solid;border-right:.4px red solid;border-bottom:.4px red solid"|'''Text'''
       |-
       | style="border-left:.4px red solid;border-bottom:.4px red solid"|'''Founded'''
       | style="border-left:.4px red solid;border-right:.4px red solid;border-bottom:.4px red solid"|'''Text'''
       |-
       | style="border-left:.4px red solid;border-bottom:.4px red solid"|'''Status'''
       | style="border-left:.4px red solid;border-right:.4px red solid;border-bottom:.4px red solid"|'''Text'''
       |-
       | style="border-left:.4px red solid;border-bottom:.4px red solid"|'''Orientation'''
       | style="border-left:.4px red solid;border-right:.4px red solid;border-bottom:.4px red solid"|'''Text'''
       |-
       | style="border-left:.4px red solid;border-bottom:.4px red solid"|'''Species'''
       | style="border-left:.4px red solid;border-right:.4px red solid;border-bottom:.4px red solid"|'''Text'''
       |-
       | style="border-left:.4px red solid;border-bottom:.4px red solid"|'''Name Badge'''
       | style="border-left:.4px red solid;border-right:.4px red solid;border-bottom:.4px red solid"|'''Text'''
       |-
       | style="border-left:.4px red solid;border-bottom:.4px red solid"|'''OC Limit'''
       | style="border-left:.4px red solid;border-right:.4px red solid;border-bottom:.4px red solid"|'''Text'''
       |-
       | style="border-left:.4px red solid;border-bottom:.4px red solid"|'''Server'''
       | style="border-left:.4px red solid;border-right:.4px red solid;border-bottom:.4px red solid"|'''Text'''
       |-
       | style="border-left:.4px red solid;border-bottom:.4px red solid"|'''Camp Location'''
       | style="border-left:.4px red solid;border-right:.4px red solid;border-bottom:.4px red solid"|'''Text'''
       |}


Text (0/20)

Text

Name Username Gender Rank Mentor
- - - - -
- - - - -

The Code:

{| class="article-table" border="0" style="margin: 0px auto; width: 490px; height: 100px; border:1px solid red;"
       ! scope="col" style="font-family:center;background-color:yellow;text-align:center;" |<font color="orange">Text '''('''0/20''')'''</font>
       |-
       | style="text-align:center;" |
       Text
       |}
       {| class="article-table" border="0" style="margin: 0px auto; width: 490px; height: 30px; border:1px inset red;"
       ! scope="col" style="font-family:center;background-color:yellow;text-align:center;" |<font color="orange">Name</font>
       ! scope="col" style="font-family:center;background-color:yellow;text-align:center;" |<font color="orange">Username</font>
       ! scope="col" style="font-family:center;background-color:yellow;text-align:center;" |<font color="orange">Gender</font>
       ! scope="col" style="font-family:center;background-color:yellow;text-align:center;" |<font color="orange">Rank</font>
       ! scope="col" style="font-family:center;background-color:yellow;text-align:center;" |<font color="orange">Mentor</font>
       |-
       | style="text-align:center;" | -
       | style="text-align:center;" | -
       | style="text-align:center;" | -
       | style="text-align:center;" | -
       | style="text-align:center;" | -
       |-
       | style="text-align:center;" | -
       | style="text-align:center;" | -
       | style="text-align:center;" | -
       | style="text-align:center;" | -
       | style="text-align:center;" | -
       |-
       |}

Credit to fubsy for lavalamps


Hey Look Cool
Yeah I do Think so
{| class="lavalamp" style="background-image:linear-gradient(378deg, red, yellow, red, yellow, red, yellow);width:80%;padding:5px"
     !style="background:rgba(0, 0, 0, 0.2);padding:2px"|Hey
     !style="background:rgba(0, 0, 0, 0.2);padding:2px"|Look
     !style="background:rgba(0, 0, 0, 0.2);padding:2px"|Cool
     |-
     |style="background:rgba(0, 0, 0, 0.2);"|Yeah
     |style="background:rgba(0, 0, 0, 0.2);padding:2px"|I do
     |style="background:rgba(0, 0, 0, 0.2);padding:2px"|Think so
     |}


You can also find the table below on Whiterose200's coding guide

or maybe you might want it to look like this:


Hey Look Cool
Yeah I do Think so
{| class="lavalamp" style="background-image:linear-gradient(178deg, red, yellow, red, yellow, red, yellow);width:80%;padding:5px"
     !style="background:rgba(0, 0, 0, 0.2);padding:2px"|Hey
     !style="background:rgba(0, 0, 0, 0.2);padding:2px"|Look
     !style="background:rgba(0, 0, 0, 0.2);padding:2px"|Cool
     |-
     |style="background:rgba(0, 0, 0, 0.2);"|Yeah
     |style="background:rgba(0, 0, 0, 0.2);padding:2px"|I do
     |style="background:rgba(0, 0, 0, 0.2);padding:2px"|Think so
     |}

Main info
Founded |
Founder |
Leader |
Status |
Recruiting |
Alliances |
Tag + Badge |

Roleplay info
Location |
Species |
Server |
Orientation |
Season |
Roleplay Style |
Camp |

The Code:

{| class="article-table" style="margin: 10px auto; width: 200px; height: 100px;border: 3px solid red;color:orange"
     |-
     | scope="row" style="background-color:yellow;border-color:red;text-align:center;" |<div style="overflow: hidden; height: 100px; width: 190px; margin-center: 0px; overflow-y: scroll">
     <span style="text-shadow:-1px 0  , 0 1px  , 1px 0  , 0 -1px  ;color:orange;font-family:times new roman;font-size:10pt">'''Main info'''</span>
     <br />
     <font face="times new roman">Founded | </font>
     <br />
     <font face="times new roman">Founder | </font>
     <br />
     <font face="times new roman">Leader | </font>
     <br />
     <font face="times new roman">Status | </font>
     <br />
     <font face="times new roman">Recruiting | </font>
     <br />
     <font face="times new roman">Alliances | </font>
     <br />
     <font face="times new roman">Tag + Badge | </font>
     </div>
     | scope="row" style="background-color:yellow;border-color:red;text-align:center;" |<div style="overflow: hidden; height: 100px; width: 190px; margin-center: 0px; overflow-y: scroll">
     <span style="text-shadow:-1px 0  , 0 1px  , 1px 0  , 0 -1px  ;color:orange;font-family:times new roman;font-size:10pt">'''Roleplay info'''</span>
     <br />
     <font face="times new roman">Location | </font>
     <br />
     <font face="times new roman">Species | </font>
     <br />
     <font face="times new roman">Server | </font>
     <br />
     <font face="times new roman">Orientation | </font>
     <br />
     <font face="times new roman">Season | </font>
     <br />
     <font face="times new roman">Roleplay Style | </font>
     <br />
     <font face="times new roman">Camp | </font>
     </div>
     |}
     

Profile Coding Edit

Screen Shot 2018-05-05 at 6.31.17 AM
<div style="font-size:12px;line-height:8px;color:lightblue;">
        <div style="position:relative; width:630px; margin:10px auto; margin:0 auto; background-color:rgba(180,180,180,0); color:#000000;border-radius:1pc;">
        <div style="width:630px; height:470px; overflow; text-align:center">
        Insert image here
        
        <div style="position: absolute; top:30px; right:500px;width:40px;background-color: yellow; padding:5px; border-radius:0px; border: 2px solid red; line-height:12px !important;border-radius:0px;color:orange">
        <soundcloud url="https://soundcloud.com/pjmakina/pink-just-like-fire-pj-makina-bootleg" color="#fc0000" height="20" width="21"></soundcloud>
        </div></div>
        <div style="position: absolute; top:20px; right:70px; background-color: red; padding:5px; border: 2px solid orange; line-height:12px !important;border-radius:1px;color:yellow;"><div style="text-align:center;">
        Text | Text | Text | Text
        </div></div>
        <div style="position: absolute; top:135px; right:80px; width:300px; background-color: orange; padding:5px; border: 2px solid yellow; line-height:12px !important;border-radius:1px;color:red;">
        Text
        </div>
        

Acceptance scrollers Edit

Welcome to FakeClan!
..................
Hey! You've been accepted into FakeClan! Be sure to: Re-read over our Fake rules, and read over the Fake page once again! And don't forget to buddy: Fakestar, Faketail, Fakeherb, and the FakeCouncil! Enjoy your fake time in FakeClan!

<center><div style="border: 8px solid yellow; -moz-border-radius: 0px; -webkit-border-radius: 10px; border-radius: 10px; padding: 5px; margin: 3px; background:linear-gradient(180deg, red 4px, red 5px,red 5.5px), linear-gradient(90deg, transparent 4px,red 5px, transparent 5.5px)white; background-size: 80px 80px;; width:60%; align:center;"><div style="HEIGHT: 300px; WIDTH: 250px; overflow-x: hidden;  overflow-y: scroll; padding-right:5px; margin-right:-10px; color:ivory;background:orange;padding:10px; margin:10%;"><div style="border:2px solid yellow; margin:auto;padding:3px; text-align:center;">
 Photo Here
 <p style="font-family:garamond;"><font color=black>
 <font color=black><font color=black><font size="4"><font color="yellow">Welcome to FakeClan!<br /><font size="3"><font color="yellow">..................<br /><font size="2"><font color="yellow">Text</font></font></font></font></font></font></font></font></font></p>
 </div></div></div>
 </center>

Decline Scrollers Edit

DECLINED


Salutations. Unfortunatly, you have not been accepted into FakeClan. This is because...

Reason 1

Explain reason here

Reason 2

Explain reason here

Reason 3

Explain reason here

If you would like, you can try and join again in blank amount of days.

~Fakestar, leader and founder of FakeClan

<div style="float: center; width: 450px; padding: 15px;"> <div style="background: gray; background-image:linear-gradient(to bottom, red, red, red, red, red); border: 5px; color: black;-webkit-border-radius: -5px; padding: 5px;"> <div style="float: center; width: 410px; padding: 15px;"> <div style="height:370px;line-height:20px;overflow:hidden;overflow-y:scroll"> <div style="background: white;-webkit-border-radius: 3px; padding: 10px;"> <span style="color:red;font-family:New Times Roman;font-size:35px;font-weight:700;">'''<u>DECLINED</u>'''</span> <span style="color:red;font-family:New Times Roman;font-size:15px;font-weight:700;">Salutations. Unfortunatly, you have not been accepted into FakeClan. This is because...</span> <span style="color:red;font-family:New Times Roman;font-size:15px;font-weight:700;">'''Reason 1'''</span> <span style="color:red;font-family:New Times Roman;font-size:15px;font-weight:700;">Explain reason here </span> <span style="color:red;font-family:New Times Roman;font-size:15px;font-weight:700;">'''Reason 2''' </span> <span style="color:red;font-family:New Times Roman;font-size:15px;font-weight:700;">Explain reason here </span> <span style="color:red;font-family:New Times Roman;font-size:15px;font-weight:700;">'''Reason 3'''</span> <span style="color:red;font-family:New Times Roman;font-size:15px;font-weight:700;">Explain reason here </span> <span style="color:red;font-family:New Times Roman;font-size:15px;font-weight:700;">If you would like, you can try and join again in blank amount of days.</span> <span style="color:red;font-family:New Times Roman;font-size:15px;font-weight:700;">~Fakestar, leader and founder of FakeClan</span> </div></div></div></div></div>

Scrollers Edit

Hey

Look

At

This

Cool

Thing.

It

Goes

Scrolly

Scroll.


The Code

<div style="overflow: hidden; height: 200px; width: 500px; margin-center: 0px; overflow-y: scroll">

Text here

</div>


Collapsibles Edit

Text

Text

The Code:

{| class="mw-collapsible mw-collapsed" style="border: 4px solid orange; -webkit-border-radius: 3px; padding: 4px;box-shadow: inset 0 0px red; background:yellow;"
|style="color:red;text-align:center;"|'''Text'''
|-
| style="text-align:center;color:red;" |
Text
|}

Links Edit

Colored Link

This is a link! Click on the orange text to go to my profile!

The Code:

[LINK <font color="COLOR">TEXT</font>]

Normal Link

This link will naturally show up green to separate itself from the other text! If it's red, it means it's a broken file, meaning it won't go anywhere!

Working Link:

User:Wammer17

The Code:

[[Page name (Capslock sensitive)]]

Not-Working Link:

Wammer17

Since there's no page called "Wammer17", this won't work. You'll have to type User:Wammer17 if you want to go to my profile.

Templates Edit

There are many templates on the AJCW. What do they mean? What do they do? Here is a list of Templates and their codes, and what they do!


The first one is:

Stub:

Ajcwstub

The stub tells everyone that a page is being worked on, and that people need more time to finish that page. You can't say "DONT DELETE AND/OR STUB" on a page, if you lack content, you lack content. If a stub is left up for too long and the page has barely been worked on, the page will be categorized for deletion.

The Code:

{{Stub}}


Delete:

Ajcwdelete

The Delete template tells all the admins that this page needs to go. It will register with them and they will delete the page! To put up a delete template the page needs to A) have lacked content for a long time. B) Spam. C) Hasn't been edited in over a month, and D) is inactive.

The Code:

{{Delete}}


Speedy Delete

SPEEDYDELETEFORAJCWCODINGGUIDE

The speedy delete template also tells the admins what to delete, but it's used when there is practically no content on that page, but it puts the page in a different category, the ones with a speedy delete template will be deleted very soon, as it isa speedy delete. To put up a speedy delete template the page needs to be A) Empty, brand new, nothing on it. B) Still empty but old/disbanded. C) A Redirect, and D) Inactive.

The Code:

{{Speedydelete}}

Quotes Edit

Quotes

This is a non colored quote.
{{Quote|This is a non colored quote.}}Colored Quotes
This is a colored quote
   {{Colored Quote|This is a colored quote|Color = red}}== Tabbers ==

A tabber is something used to divide information. On the code, you see title=info. The "Title" part, is where you put the header, it looks like a green button. My title for this section says "How it works". At the "Info" section, you right all about that topic, like i'm doing now.

You can even put photos and such in here:

Aspenspot

You can even add tables, galleries, borders, etc.! How fun! If you want, you can add extra sections by copying and pasting the "Title=Info" part beneath the first one! Make sure to include the "| - |"!

<tabber> |-|Title=Info |-|Title=Info |-|Title=Info </tabber>

Color Pallets Edit

Color pallets are used to show what a character looks like. Commonly found on OC pages, they color pallets are a cute, organized way of showing which colors your character is!

These are the color pallets for my oc, Newtfoot. You can find them on his page!


    = Top Fur (#00000)
 
    = Underbelly (#404040)
 
    = Nose and paw pads (#eed2ee)
 
    = Eyes (#ffe98f)
 
    = Wings (#404040)
 

Here's the code for dragons:

 :<span style="background:#000; border:2px solid black">   </span> = Top Top Scales (#00000)<br /> 
 :<span style="background:#404040; border:2px solid black">   </span> = Bottom scales (#404040)<br /> 
 :<span style="background:#eed2ee; border:2px solid black">   </span> = Wings (#eed2ee)<br /> 
 :<span style="background:#ffe98f; border:2px solid black">   </span> = Eyes (#ffe98f)<br /> 
 :<span style="background:#404040; border:2px solid black">   </span> = Claws (#404040)<br />
 

Here's the code for cats/dogs

 :<span style="background:#000; border:2px solid black">   </span> = Top Fur (#00000)<br /> 
 :<span style="background:#404040; border:2px solid black">   </span> = Underbelly (#404040)<br /> 
 :<span style="background:#eed2ee; border:2px solid black">   </span> = Nose and paw pads (#eed2ee)<br /> 
 :<span style="background:#ffe98f; border:2px solid black">   </span> = Eyes (#ffe98f)<br /> 
 :<span style="background:#404040; border:2px solid black">   </span> = Wings (#404040)<br />
 


BackgroundsEdit

Backgrounds are used on mostly blog posts, and are now recently allowed to be used on articles! Remember that if you are making and article with a background, don't cover the entire page with it, as it sometimes lags out people's computers! Enjoy them!





Hello There! You can do pretty much anything with a background, you can use it for headers and put some big ol' text in it, or you can put information in it, you can make it big or small, and change the gradient to up and down, it's super fun to play with them!
The code:
<div style="background: linear-gradient(to right, red 0%, yellow 100%); color: black;">Text Here
     </div>





Look at this one! It's colors are in half! Pretty rad, right?


The code:
<div style="background: linear-gradient(to left, red 50%, yellow 50%); color: black;">''Look at this one! It's colors are in half! Pretty rad, right?''
     </div>




Looky! This one's a gradient, it almost looks like the lavalamp tables. How cool!
The code:
<div style="background: INVISIBLE COLOR; background-image:linear-gradient(to bottom, red, orange, yellow, orange, red); border: 5px; color: FONT COLOR=white;-webkit-border-radius: 50px; padding: 10px;"> Looky! This one's a gradient, it almost looks like the lavalamp tables. How cool! </div>






And this one is a full red background. Who can go wrong with that?


The Code:
<div style="background: linear-gradient(to left, red 50%, red 50%); color: black;">Text
     </div>





Look at this background! It's one of my favorites. I love how it is a lavalamp, it even kind of looks like the background that used to be on my profile!

<div class="lavalamp" style="animation: flow 6s ease infinite;background-image:linear-gradient(178deg, orange 2%, red 40%, yellow 40%); color: orange;"> Text here </div>

"This User" Edit

These are small little things that can describe a personality, or just say something silly! "This User" coding often goes on profile pages, i have the one below on mine!:


This user is a coding nerd.

The code:


{|cellspacing="0" style="width:224px;background:red"
     | style="width:45px;height:45px;background:yellow;text-align:center;font-size:14pt"|
     <span style="color:orange;font-family:"SegoeUIEmoji";font-size:49px;">✎</span>
     | style="font-size:8pt;padding:4pt;line-height:1.25em" | <font color="#E3BC5E">This user is a coding nerd.</font>
     |}


Display Titles Edit

Display titles go on your profile. They won't show up on the actual page itself, but on the tab. where it says "User:<insert name here>". Instead, it'll say "Display Title" instead.

{{DISPLAYTITLE:Title Here}}


Threads and discussions Edit

Wanting to make a roleplay thread for your clan? A debate thread? Medicine cat tryouts? You've come to the right place to learn how. Here's a step by step tutorial!

First: Make the thread. You can do this by going into the Forum. Forum is to the very right of your category bar, it has a small speech bubble next to it.

Secondly: If you're making a discussion you want to attach to your groups page, click "add discussion"

Message wall greetings Edit

Message wall greetings go on your message wall. You can check mine out on my message wall, it was coded my Øurayz!

Copy and paste this link into your link search bar:

https://animal-jam-clans.wikia.com/wiki/Message_Wall_Greeting:Insert name here


Remember to copy and paste it, not to click it!

OC Page Statistics Edit

These are the things you see on oc pages that are like, Hunting, 7/10, stuff like that. Except i'll be using dots to signalize the percentage.


Hunting •••••○○○○○
Offense •••••○○○○○
Defense •••••○○○○○
Swimming •••••○○○○○
Climbing ••••○○○○○
Running •••••○○○○○
Medicinal Skills •••••○○○○○

Table Code


{| border="0" cellpadding="1" cellspacing="1" class="article-table" style="margin: 0px auto; width: 200px;text-align:center;background:transparent"
    |-
    | style="border:1px solid red"|Hunting
    | style="border:1px solid red"|•••••○○○○○
    |-
    | style="border:1px solid red"|Offense
    | style="border:1px solid red"|•••••○○○○○
    |-
    | style="border:1px solid red"|Defense
    | style="border:1px solid red"|•••••○○○○○
    |-
    | style="border:1px solid red"|Swimming
    | style="border:1px solid red"|•••••○○○○○
    |-
    | style="border:1px solid red"|Climbing
    | style="border:1px solid red"|••••○○○○○
    |-
    | style="border:1px solid red"|Running
    | style="border:1px solid red"|•••••○○○○○
    |-
    | style="border:1px solid red"|Medicinal Skills
    | style="border:1px solid red"|•••••○○○○○
    |}


White dot code


Black dot code


Dividers Edit

Credits Edit

Credit to Wammer17 for coding page/creating it.

Credit to Mairu-Doggy on Deviantart for Profile image


Please, please, please, if there is something that i'm missing, something is wrong, or something you want me to add to the guide, post it in the comments, i'm trying to make this guide have what other people need, so if you see something you want me to add, please tell me and i'll add it right away!