Animal Groups Roleplay Wiki
Advertisement

Welcome Everyone![]

Hey :D I made this guide because I love coding, I really want to help other people! I truly hope that this page helps you <3 Please let me know if you want me to add anything (in the comments)!

Images[]

Let's start off with some images. Here's how to center an image:

Placeholder
 [[File:Placeholder.png|center|450px|thumb]]

Remember: You can change the size of your image by reducing / increasing the number of pixels.

Soundclouds[]

My favourite song. LISTEN TO JIMIN'S VOICE UWU

<center><soundcloud url="https://soundcloud.com/l2sharebts03/dream-glow#t=0:47" color="#000000" height="20" width="21"></soundcloud></center>

And here's a soundcloud that spins for y'all yeeyee stans & cowboys out there.

<center>
               
      <div class="spin"><soundcloud url="https://soundcloud.com/secret-service-862007284/old-town-road" color="#000000" height="20" width="21"></soundcloud></div>
      </center>

this page is where you can search for your desired song. There are loads, trust me

Centering Text[]

Howdy
<center> TEXT </center>

Other fancy stuff to add ^u^[]

1. G'day G'day

<sub> TEXT </sub>

2. Hello, again

'''TEXT'''

3. It's a nice day today...

''TEXT''

4. uwu

<u> TEXT </u>

5. ouo

<s> TEXT </s>

6. BIG BIG BIG

<big> TEXT </big>

7. Not so BIG BIG BIG

<small> TEXT </small>

Borders[]

Remember, you can change the colour at any time.

This is a rounded border. You can put photos in here, it makes them look so professional. 
 
<div style="border:3px solid blue;border-radius:0.5em;">This is a rounded border.<br /><br /> </div>
This is a solid border.
<div style="border:3px solid blue;">This is a solid border.</div>
This is a dashed border. You can always merge this with a dashed border to make a dotted and dashed border!
<div style="border:3px dashed blue;">This is a dashed border.</div>
This is a dotted border.
<div style="border:3px dotted blue;">This is a dotted border.</div>
This is a double border.
<div style="border:3px double blue;">This is a double border.</div>
This is an inset border.
<div style="border:3px inset blue;">This is an inset border.</div>
This is an outset border.
<div style="border:3px outset blue;">This is an outset border.</div>
This is a ridge border.
<div style="border:3px ridge blue;">This is a ridge border.</div>
In my opinion, this border looks great with the colour brown, because it makes it look like chocolate.
<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">Insert your desired content here.</div></div>

Shadowed Borders[]

I like this border :3 Remember, where it says: "Insert Content", you can add your all of your other coding including titles and tables! You can also put other borders in the "Insert Content" part to make an ultimate border!!
<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</div></div>
                                                         </div>
This is a more basic shadowed border.
<div style="border: 8px transparent;box-shadow: inset 0 0 10px 2px #1C1C1C">Insert content here</div>

Gradient Backgrounds[]

Works really well on OC pages and profiles!
<div style="background: linear-gradient(to right, #f5aeae 0%, #aef5cd 100%)">Text goes here</div>
:D
<div style="background:radial-gradient(purple,darkviolet,deeppink);">Text goes here</div>

Multiple colours:

Content
<div style="background:linear-gradient(red, orange, yellow, green, blue, violet)">Content</div>

OR...

Content
<div style="background:linear-gradient(to right, red, orange, yellow, green, blue, violet)">Content</div>

Titles[]

COOL RIGHT?


<div style="position: center; top: 100px; left: 60px; font-family: Times New Roman; color: black; text-shadow: 1.3px 0px white, -1.9px 0px white, 1.3px 0px white, -1.9px 0px white; font-size: 90px; letter-spacing: 2px;">Content Here</div>

This is so cool. It's a lavalamp!

<span class="lavalamp" style="animation: flow 4s ease infinite;background-image:linear-gradient(278deg,black 50%, gray 50%, white 65%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:times new roman;small-uppercase;font-size:35pt;font-weight:normal;line-height:60px;">'''Content here'''</span>
Hover over to see wiggles!


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


Hover your mouse over this too!
<div class=zoom><span class="lava lamp" style="animation: flow 4s ease infinite;background-image:linear-gradient(178deg, gray 5%, black 15%, gray 5%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:times new roman;font-size:40pt;letter-spacing:2px;color:black">Content here</span></div>
It's not you.. this text shakes.
<div class=shake><span class="lava lamp" style="animation: flow 4s ease infinite;background-image:linear-gradient(178deg, gray 5%, black 15%, gray 5%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:times new roman;font-size:40pt;letter-spacing:2px;color:black">content here</span></div>
And because why not...
<div class="spin"><span class="lavalamp" style="animation: flow 8s ease infinite;background-image:linear-gradient(178deg, black 5%, gray 50%,  white 65%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:times new roman;small-uppercase;font-size:30pt;font-weight:normal;line-height:10px;">'''And because why not...'''</span></div>

Hierarchy Boxes[]

Credit to Belxo <3 I use this for most of my pages. It's my overall favourite. PLEASE GIVE THEM CREDIT!

Rank (open/closed)

Rank (open/closed)

〚?/?〛

〚?/?〛

In this rank you should add descriptions on what they do, if they need to train themselves or train others, and any other information as to what this rank does overall.

In this rank you should add descriptions on what they do, if they need to train themselves or train others, and any other information as to what this rank does overall.

Name Username Gender Species Mate/Crush Rank
- - - - - -


Such a cute little table, isn't it? Anyway, the code:

       {| class="article-table" style="margin: 10px auto; width: 400px; height: 100px;border: 1px solid black;color:black"
       | scope="row" style="background-color:black;border-color:black;text-align:center;" |
       <font color="white">'''Rank (open/closed)''' </font>
       | scope="row" style="background-color:black;border-color:black;text-align:center;" |
       <font color="white">'''Rank (open/closed)''' </font>
       |-
       | scope="row" style="background-color:transparent;border-color:black;text-align:center;" |
       '''〚?/?〛'''
       | scope="row" style="background-color:transparent;border-color:black;text-align:center;" |
       '''〚?/?〛'''
       |-
       | scope="row" style="background-color:black;border-color:black;text-align:center;" |<div style="overflow: hidden; height: 100px; width: 190px; margin-center: 0px; overflow-y: scroll">
       <font color="white">In this rank you should add descriptions on what they do, if they need to train themselves or train others, and any other information as to what this rank does overall.</font>
       </div>
       | scope="row" style="background-color:black;border-color:black;text-align:center;" | <div style="overflow: hidden; height: 100px; width: 190px; margin-center: 0px; overflow-y: scroll">
       <font color="white">In this rank you should add descriptions on what they do, if they need to train themselves or train others, and any other information as to what this rank does overall.</font>
       </div>
       |}
       {| class="article-table" style="margin: 0px auto; border:1px solid Black; width: 400px;" border="2"
       | style="color:white;text-align:center;background:black;" |<font color="white">'''Name''' </font>
       | style="color:white;text-align:center;background:black;" |<font color="white">'''Username'''</font>
       | style="color:white;text-align:center;background:black;" |<font color="white">'''Gender'''</font>
       | style="color:white;text-align:center;background:black;" |<font color="white">'''Species'''</font>
       | style="color:white;text-align:center;background:black;" |<font color="white">'''Mate/Crush'''</font>
       | style="color:white;text-align:center;background:black;" |<font color="white">'''Rank'''</font>
       |-
       | style="text-align:center;" margin="White" | -
       | style="text-align:center;" margin="White" | -
       | style="text-align:center;" margin="White" | -
       | style="text-align:center;" margin="White" | -
       | style="text-align:center;" margin="White" | -
       | style="text-align:center;" margin="White" | -
       |}
                                         

Credit to Betrayall OuO this is one of my favourite ones for when I want to make an aesthetic page.

RANK [SIGN IF NEEDED] RANK
【?/?】

This rank is [Open/Closed]

Add your description here - it's endless
【?/?】

This rank is [Open/Closed]

Add your other description here - it's still endless
NAME USERNAME GENDER SPECIES RANK
- - - - -


And here's the fantabulous 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:50%;background:#3685B5" |'''NAME'''
       | style="border: 1px #275f82 solid;width:50%;background:#3685B5" |'''USERNAME'''
       | style="border: 1px #275f82 solid;width:50%;background:#3685B5" |'''GENDER'''
       | style="border: 1px #275f82 solid;width:50%;background:#3685B5" |'''SPECIES'''
       | style="border: 1px #275f82 solid;width:50%;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%" | -
       |}
       


Here's a nice, plain and simple one for you.

Rank

Add your content here - this box also looks very snazzy as a subtle introduction box!

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

Here's a row of ranking boxes to go alongside the box above uwu

Name Username Gender Apprentice/mentor Mate/crush/parents
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 black"
       |-
       | style="background:gray;color:black;border:1px solid black"|Name
       | style="background:gray;color:black;border:1px solid black"|Username
       | style="background:gray;color:black;border:1px solid black"|Gender
       | style="background:gray;color:black;border:1px solid black"|App.
       | style="background:gray;color:black;border:1px solid black"|Mate
       |-
       | style="background:transparent;color:black;border:1px solid black"|N/A
       | style="background:transparent;color:black;border:1px solid black"|N/A
       | style="background:transparent;color:black;border:1px solid black"|N/A
       | style="background:transparent;color:black;border:1px solid black"|N/A
       | style="background:transparent;color:black;border:1px solid black"|N/A
       |}
       

Scrollers[]

Your fancy text goes here. You can type rules, lore, stories, lists, and more in these scrollers, as they are totally endless. What will you write? When I make scrollers and don't know what to put in them, I go: WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP forever and ever and ever.
<div style="height:230px;line-height:20px;overflow:hidden;overflow-y:scroll">Desired content here.</div>

and here's a scrolling box, of which you can colour:

Main info Hey. Hi. Hello. Howdy. Greetings. Sup. Hiya. Hewwo. Salutations. Aloha. Bonjour. Salut. Guten Tag. Guten Nacht. Bon Nuit. Good Day. Good Night. Goodbye'nt. BLAH BLAH BLAH. Talk about what you want on this section. uwu. owo. ouo. ;u;. -u-. 0-0. u-u. 0u0. o3o. 030. -3-. ToT. IoI. I-I. What more can I say? :) :D D: (: :( ): C: :C c: :c :o :I :T :U :0 :O :p :P d: *-*. ^-^. ^u^. ^U^. *U*. WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP Omg look, you got to the bottom of my scroller!

 
      {| class="article-table" style="margin: 10px auto; width: 200px; height: 100px;border: 3px solid black;color:black"
      |-
      | scope="row" style="background-color:gray;border-color:black;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:black;font-family:times new roman;font-size:10pt">'''Main info'''</span>
      Insert desired text here
      </div>
      |}
                                 

Quotes[]

This is a very fancy, extremely motivational quote.
  {{Colored Quote|Quote Here|Color=Color Here}}

Fonts[]

<font face="font name">Insert content here</font>

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

Noteworthy

Optima

Open Sans

Osaka

Palatino

Papyrus

Phosphate

Rock Salt

Rockwell

Savoye LET

Signpainter

Skia

Snell Roundhand

STIXGeneral

Tahoma

Tiki Island

Times

Times New Roman

Trattatello

Trebuchet MS

Triforce

Verdana

Zapfino


Font colors[]

here's the code to color quotes: (Please note that you can add fonts and sizes etc in the "Text Here" part.) 

<font color="Colour Here">Text here</font>
Dark Colours Yellows Reds/Pinks Oranges/Browns Greens/Teals 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


Templates[]

1. Stub

Stubs mean the page lacks content and needs to be updated or deletes.

{{Stub}}

2. Delete

This template helps see pages that are unwanted anymore

{{Delete}}

3. Speedy Delete

This template notifies staff by telling them that the page needs to be removed fast for a particular reason.

{{Speedydelete}}

4. Art Theft

This template is used when another user's art is found on a page that the art was not made for.

{{Art Theft}}

5. Disambiguation

This template is used when there are two pages of very similar names.

{{Disambig}}

6. Block Prank

Wanna prank your friends on your profile? You'll love this.

{{BlockPrank}}

7. Critique

This template is used for when someone wants constructive criticism towards their page.

{{Critique}}
Advertisement