FANDOM


Hex colors/colors

Color wheel

Ourayz's Guide To Coding Edit

______________________

Introductory Edit

Whether you're new to coding, or just lazy and want to copy and paste, this is the guide for you! Coding on this page is for everyone to use. If you have concerns or suggestions, please contact either the owner of this page, a side coder or another side coder.

Now read on! Wouldn't want to miss out, now would you?
______________________

Getting into Source Mode Edit

Getting into source mode is pretty easy. Just click the edit button on the page you want to edit. Here's a picture for an example.

Joxi screenshot 1500613906241

Once you see the edit button, click on the arrow and click classic editor. After you do that your screen should look like this;

Joxi screenshot 1500614063748 (1)

At the upper right corner, there should be a source button. You need to click it and then paste all the coding in there.
______________________

Centering Edit

Centering is possibly one of the most simplest things to do. To center a page, at the top of the page you put <center> in source mode. It should center the whole page.
Now, moving on to how to center images. Once you add your image you go into source mode.
It should look some like this!

Joxi screenshot 1500616474572

You add a |center| before the |thumb|.
______________________

Adding Images Edit

Adding images is also very easy. In visual mode, there should be a row of icons at the top. Hover your cursor over each icon, then click on the one that says "images". Once you do that, it should look like this.

Stinkyguidetocodingimageplacement

Click the button that says "upload", and find the desired image from your file folders. Once you do that, it should look like this.

Joxi screenshot 1500616015755

You can add a caption, change the size, and do much more here. Once you're satisfied, click "add photo". That should add the photo to your page.
To center the image, see centering.
______________________

Soundclouds Edit


To create one of these Soundclouds you need to copy and paste this:

<soundcloud url="https://soundcloud.com/espoivre-nightcore/nightcore-take-you-to-rio" color="#032b3a" height="20" width="21"></soundcloud>

Of course, you can use a different URL. But make sure it is from soundcloud.
______________________= Tables =

There are a lot of different types of tables.

This is
a hot
table so
enjoy it
yum great
hot w0
m yes



{| 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:black;text-align:center;"|<font color="white">This</font>
| style="text-align:center;"| is
|-
! scope="col" style="font-family:center;background-color:#032b3a;text-align:center;"|<font color="white">a</font>
| style="text-align:center;"|hot
|-
! scope="col" style="font-family:center;background-color:black;text-align:center;"|<font color="white">table</font>
| style="text-align:center;"|so
|-
! scope="col" style="font-family:center;background-color:#032b3a;text-align:center;"|<font color="white">enjoy</font>
| style="text-align:center;"|it
|-
! scope="col" style="font-family:center;background-color:#032b3a;text-align:center;"|<font color="white">yum</font>
| style="text-align:center;"|great
|-
! scope="col" style="font-family:center;background-color:black;text-align:center;"|<font color="white">hot</font>
| style="text-align:center;"|w0
|-
! scope="col" style="font-family:center;background-color:#032b3a;text-align:center;"|<font color="white">m</font>
| style="text-align:center;"|yes
|}

_________
j ji
jo u
, ,



{| 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="#191f38" style="font-size:100%; padding:6px; color:#594E36; Border-radius:0px 0px 30px 30px;text-align:center" |<soundcloud url="https://soundcloud.com/user-290492754/nightcore-ready-for-it-rock-version" color="#5e71bc" height="20" width="21"></soundcloud>
|-
! style="background-color: #191f38; color:#5e71bc;" |'''j'''
! style="background-color: #191f38; color:#5e71bc;" |ji
|-
! style="background-color: #191f38; color:#5e71bc;" |jo
! style="background-color: #191f38; color:#5e71bc;" |u
|-
! style="background-color: #191f38; color:#5e71bc;" |,
! style="background-color: #191f38; color:#5e71bc;" |,
|}

_________
soundcloud
text text



{| cellpadding="10" cellspacing="0" class="box" style="margin: 0px auto; width: 273px;text-align:center;background:transparent;color:black;"
|-
| style="border:.5px solid black;font-size:19pt" colspan="2" cellpadding="9"|soundcloud
|-
| style="border-left:.4px black solid;border-bottom:.4px black solid"|'''text'''
| style="border-left:.4px black solid;border-right:.4px black solid;border-bottom:.4px black solid"|'''text'''
|}

_________
ok
mhm
nice nice
hi hi
ok Spl



{| 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>'''ok'''</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>'''mhm'''</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>'''nice'''</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>'''hi'''</font>
| style="text-align:center;"|<font color=white>'''hi'''</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>'''ok'''</font>
| style="text-align:center;"|<font color=white>'''Spl'''</font>
|}

_________
hi hi
hi hi



{| class="article-table" style="background:transparent;margin: 0px auto; width: 200px; height: 70px; border:1px solid #7A4826;"
|-
! scope="row" style="background:transparent;margin: 0px auto;border:1px solid #7A4826; font-family: times new roman; font-size:12px; color:#7A4826;" |hi
| style="text-align:center;border:1px solid #7A4826; font-family: times new roman; font-size:12px; color:#7A4826;" |hi
|-
! scope="row" style="background:transparent;margin: 0px auto;border:1px solid #7A4826; font-family: times new roman; font-size:12px; color:#7A4826;" |hi
| style="text-align:center;border:1px solid #7A4826; font-family: times new roman; font-size:12px; color:#7A4826;" |hi
|}

You can always replace the colors in the tables. For colors, see texts.
______________________= Speech Bubble =
Oie transparenfrgthyjut (38)

Hello!

This is a speech bubble!

To code a speech bubble, copy and paste this:

{{User Talk Bubble |image= photo here |color= #032b3a |color= "#032b3a" |textcolor= black |line= black |name= Hey |text= Yo }}

______________________= Borders =





 
<div style="border: 9px solid #405066;">
<div style="border: 6px double white; -moz-border-radius: 2px; -webkit-border-radius: 5px; border-radius: 90px;">
<div style="border: 4px solid #405066; box-shadow: 0 0 38px 2px black;">
<div style=" padding: 30px; border: 2px black;margin: 0px;font-family: COLORS;box-shadow: inset 0 0 70px #405066;">

_________
 
<div style="text-align: center; border: 6px solid black;border-radius: 2pc;">
<div style="border: 3px dashed black; border-radius: 2pc;">
<div style="text-align: center; border: 6px solid black;border-radius: 2pc;">

_________
 
<div style="border: 7px solid gray; background-color:transparent ">
<div style="border: 7px dashed white">
<div style="border: 7px solid gray; background-color:transparent">

_________
 
<div style="border: 10px solid darkblue; -moz-border-radius: 2px; -webkit-border-radius: 10px; border-radius: 4px;"><div style="border: 5px solid black;"><div style="border: 5px darkblue;">

_________
 
<div style="border: 9px solid #405066;">
<div style="border: 6px double white; -moz-border-radius: 2px; -webkit-border-radius: 5px; border-radius: 90px;">
<div style="border: 4px solid #405066; box-shadow: 0 0 38px 2px black;">
<div style=" padding: 30px; border: 2px black;margin: 0px;font-family: COLORS;box-shadow: inset 0 0 70px #405066;">

_________
<div style="border:1px solid black;">

______________________= Collapsibles =
Collapsible

Hey



{| class="mw-collapsible mw-collapsed" style="border: 6px solid transparent ; -moz-border-radius: 7px; -webkit-border-radius: 10px; border-radius: 10px; padding: 5px; margin: 2px; width:85%; align:center;" <center >
| style="text-align:center;" |'''<font size="4"><font color="black">Collapsible</font></font>'''
|-
|
<p style="text-align:center;"><span style="color:black;font-family:Courier New;font-size:10pt;font-weight:normal;line-height:8px;">Hey
</span></p>
|}

_________
hi

hi



{| class="mw-collapsible mw-collapsed" style="border: 1px solid #00709A; padding: 5px; margin: 3px; background:#00091A; width:100%; align:center;"
| style="text-align:center;color:#00709A;" |<font color="#00709A"><font size="4">Contacts</font></font>
|-
| style="text-align:center;" |
<span style="font-size:small;color:rgb(0,112,154);">hi</span>
|}

_________

hi

hi



{| class="mw-collapsible mw-collapsed" style="background:transparent;margin: 0px auto; border:1px solid transparent; width: auto; margin-top: 2px; line-height: 100%;" align="center"
| style="text-align:center;font-weight:bold;margin-top: 20px; color:#7A4826;font-family:Times New Roman;text-align:-webkit-center;font-size:12px;" |
hi
|-
| style="text-align:center;font-family: times new roman; font-size:12px; color:#7A4826;" |
hi<br>
|}

_________
Member Count

m



{| class="mw-collapsible mw-collapsed" style="border: 4px double black; -webkit-border-radius: 3px; padding: 4px;box-shadow: inset 0 0px white; background:teal;"
|style="color:white;text-align:center;"|'''Member Count'''
|-
| style="text-align:center;color:white;" |
m
|}

______________________= Scrollers =






This

is 

a

scroller

box

blob

thing

Enjoy

 
<div style="overflow: hidden; height: 250px; width: 450px; border: 0px none; margin-center: 0px; border-radius: 0px;color:none;overflow-y: scroll">

This

is 

a

scroller

box

blob

thing


______________________= Definition Tables =

Text

Text
19024501 5164bef72d5ac4b609274cb1602d2ead 404936607c4 t
5164bef72d5ac4b609274cb1602d2ead 404936607c4 t

Text

Text



{| class="article-table" style="margin: 10px auto; width: 300px; height: 100px;border: 6px solid black;color:white"
| scope="row" style="background-color:#29485b;border-color:black;text-align:center;" |
'''Text'''
| scope="row" style="background-color:#29485b;border-color:black;text-align:center;" |'''Text'''
|-
| scope="row" style="background-color:transparent;border-color:black;text-align:center;" |[[File:19024501_5164bef72d5ac4b609274cb1602d2ead_404936607c4_t.png|thumb|239px]]
| scope="row" style="background-color:transparent;border-color:black;text-align:center;" |[[File:5164bef72d5ac4b609274cb1602d2ead_404936607c4_t.png|thumb|239px]]
|-
| scope="row" style="background-color:#29485b;border-color:black;text-align:center;" |<div style="overflow: hidden; height: 100px; width: 230px; margin-center: 0px; overflow-y: scroll">
Text
</div>
| scope="row" style="background-color:#29485b;border-color:black;text-align:center;" |<div style="overflow: hidden; height: 100px; width: 230px; margin-center: 0px; overflow-y: scroll">
Text
</div>
|}

______________________= Member Tables =
Hey
cool
table
- - - -



{| 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: #29485b; border-color: #2b0900;" |<div style="font-size:12pt;color:white;">Hey</div>
| style="text-align: center; background-color: #29485b; border-color: #2b0900;" |<div style="font-size:12pt;color:white;">cool</div>
| style="text-align: center; background-color: #29485b; border-color: #2b0900;" |<div style="font-size:12pt;color:white;">a </div>
| style="text-align: center; background-color: #29485b; border-color: #2b0900;" |<div style="font-size:12pt;color:white;">table</div>
|-
| style="text-align:center;" | -
| style="text-align:center;" | -
| style="text-align:center;" | -
| style="text-align:center;" | -
|}

______________________= Subpages =
Hey
hot
amazing
{| 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: #29485b; border-color: #2b0900;" |<div style="font-size:12pt;color:white;">Hey</div>
| style="text-align: center; background-color: #29485b; border-color: #2b0900;" |<div style="font-size:12pt;color:white;">hot</div>
| style="text-align: center; background-color: #29485b; border-color: #2b0900;" |<div style="font-size:12pt;color:white;">amazing</div>
|}

______________________

Polls Edit

Was this helpful?
 
35
 
493
 
96
 

The poll was created at 08:13 on July 21, 2017, and so far 624 people voted.
<Poll>
Was this helpful?
No
Yes
Kinda
</poll>

______________________

Text Coloring Edit

Text coloring is pretty easy once you get used to it.

This is a text, but colored: Colored

Here is the coding!

''<font size="4px;"><span style="color:#405066;">Colored</span></font>''

You see where there is (Number) Px? Change the numer to the size you want. And you know where it says Color: ____? You put any color you want in there.

______________________

Quotes Edit

There's a couple ways to do this. I'll just do one easy way.

Quote here
{{Quote|Quote here}}

______________________

Color Links Edit

The is a color linkOurayz

[http://animal-jam-clans-1.wikia.com/wiki/Frostpool_(Ourayz) <font color="#043551">Ourayz</font>]

______________________

Text Edit

Hi.

<p style="font-family:timesnewroman;font-size:11pt;"><span class="" style="background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,gray), color-stop(100%,silver)); background: -webkit-linear-gradient(top, #560101 50%,black 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:Times New Roman;font-size:60pt;font-weight:normal;line-height:40px;">Hi.</span></p>}

Hey

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

text

<span style="color:black;font-size:68pt;font-family:New times roman">'''text'''</span>
















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

Helvetica

Times

Times New Roman

Courier

Courier New

Verdana

Georgia

garamond

gabriola

Paltino

Bookman

comic Sans MS

Trebuchet MS

Arial Black

Impact

century gothic

Centaur

candara

Lucida Handwriting

______________________= Templates =
Joxi screenshot 1505578164869
{{Delete}}
Joxi screenshot 1505611675033
{{Stub}}
Joxi screenshot 1505611813719
{{Art Theft}}
Joxi screenshot 1505611989968
{{Speedydelete}}
Joxi screenshot 1505612169631
{{Critique}}
Joxi screenshot 1505612326389
{{Spam}}
= Times =Template:Underconstruction
{{Underconstruction}}
</center>

<center> Counter unavailable.

<span style="display:none;" class="countdown"><big>'''Text'''</big>'''<br /><span style="color:#00709A" class="countdowndate">Month Year Day:Hour:Seconds Timezone</span>'''</span></center>
<center>
<span class="nocountdown">Counter unavailable.</span>

<span class="countdown" style="display:none;">Only <span class="countdowndate">month day year 00:00:00</span> Ourayz's one year being on the wiki</span>

"This User" Edit

New Piskel 4

This user is a proud member of ValleyClan.
{| cellspacing="0" style="width:224px;background:color"
| style="width:45px;height:45px;background:color;text-align:center;font-size:14pt" |
[[File:file here|50px|link=link here
| style="font-size:8pt;padding:4pt;line-height:1.25em" | <font color="white">Text</font>
|}

Positioning Edit

Left
<div style="text-align:left;">left</div>
Right
<div style="text-align:right;">right</div>
Center
<div style="text-align:center;">center</div>
</center>

<center>

Contacts Edit

Keep in mind that these two people are the owners/coders of this guide, contact them if you need help with coding.

Lead Coder Co-coder
{| class="article-table" style="background:transparent;margin: 0px auto; border:1px solid #7A4826; width: 350px; font-family: times new roman; font-size:12px; color:#7A4826; margin-top: 2px; line-height: 100%;"
|-
| style="text-align:center;border:1px solid #7A4826;" |Lead Coder
| style="text-align:center;border:1px solid #7A4826;" |Co-coder
|-
| style="text-align:center;border:1px solid #7A4826;" |{{Avatar|Øurayz|15px}}[[User:Øurayz|<font color="#00709A" style="cursor:context-menu">♥</font>]]
| style="text-align:center;border:1px solid #7A4826;" |{{Avatar|Foxfaith|15px}} [[User:Foxfaith|<font color="#00709A" style="cursor:context-menu">♥</font>]]
|}

Acceptance Form/Random Scroll Edit