User talk:Avclark953

FOrever's coding guide.
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



______________________

= Centering =

Centering is a great tool for coding.

For text:

Just put

before the text you want to center, and

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:

______________________

= Adding Images = Adding images is quite easy, once you get the hang of it. All you have to do is click on this button: . Once you click that, this will appear:

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:



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 =  To create Soundclouds you need to copy and paste this:



There is also a spinning soundcloud, credit to Willowhound03:



Here's the code:



Your soundcloud can be any version of any song you want. But make sure it is from the actual website, [http://soundcloud.com here. ]

______________________

= Fonts = 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):

your text here ______________________

= Font Sizes =

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:

This text is in size five. ______________________

= Font Colors = This text is red.

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

Insert Text Here  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:

Your text here 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 ______________________ = Tables = 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.

Heres the code:

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

If you want a little bit more advanced tables, we're getting right to it. Here's the code (it's a big one):

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


 * style="text-align:center;" |


 * style="text-align:center;" |


 * }

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

Here's one you probably don't see that often, even though it's really pretty. <p style="text-align:center;"> Credit to Øurayz And here's that amazing code:

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. And here's the code:

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: And here's it's code:

Now, time to move on to the rank description tables. And now time for that spicy code:

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:

______________________ = Collapsibles = 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: 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:

______________________

= Scrollers = 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:

text here Y-Axis:

text here ______________________

= Countdowns = 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:

February 22 2018 00:00:00

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: February 22 2018 00:00:00. Here's the code:

February 22 2018 00:00:00 ______________________

= This User = These are pretty common, they mostly show what you like, or who you like. Here's an example: And here's the code:

______________________

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

Normal ex: My User

Colored ex: <font color="#663399">My User

Here's the code for both normal and colored:

Normal:

My User Colored:

<font color="#663399">My User ______________________

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

"Normal Quote" Here's the code:

"your quote here" Here's the code:

______________________

= Text Add-Ons = 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:

Underline here Strike-Through: Strike here

Here's the code:

Strike here ______________________

= Avatars (PFPs) = 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:

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

______________________

= Template = 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:

Here's the code:

Deletion:



Here's the code:

Speedy Deletion:



Here's the code:

Open to Criticism:



Here's the code:

And the last one, Art Theft:

Here's the code:

______________________

= Display Titles = 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:

______________________

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

Example Question Ex Answer 1 Ex Answer 2 Ex Answer 3 And here's the code:

Example Question Ex Answer 1 Ex Answer 2 Ex Answer 3 ______________________

= Borders = 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:

Text Here Groove border:

Text Here The code:

Text Here Ridge border:

Text Here The code:

Text Here Box-Shadow border:

Text Here The code:

Text Here Rounded-Shadow border:

<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 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 Shadow border:

Text Here The code:

Text Here Solid, Dashed, Dotted border:

Text Here The code:

Text Here Inset border:

Text Here The code:

Text Here Outset border:

Text Here The code:

Text Here Double border: <p style="text-align:center;"> Text Here

The code:

Text Here Standard Rounded border:

<div style="border:7px solid rebeccapurple;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;text-align:center;">Text Here The code:

<div style="border: 7px solid rebeccapurple; -moz-border-radius: 0px; -webkit-border-radius: 10px; border-radius: 10px;">Text Here Standard border: <p style="text-align:center;"> Text Here

The code:

Text Here Here's the Common border:

Text Here And the code:

Text Here Dashed border:

Text Here The code:

Text Here Dotted border:

Text Here The code:

Text Here Double border:

Text The code:

Text Double-Solid border:

Text Here The code:

Text Here Here's one of my favorite borders:

Text Here And heres the code:

Text Here ______________________

= Contacts =

Wammer's coding guide
''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!!''

<div style="overflow:hidden;border-radius:100px;border: 3px red double;width:199px;height:200px;background-color: ">

Welcome!

Salutations!
''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
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
''To center text, all you have to do is type at the front of your page! you only need to type it once.''

ex.

Adding Photos/Videos
''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.''

A video will be like this:



The code:



And here's a spinny image, just because:

<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;">

The code:

<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;">

Types of text
''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

Text

Bold Italic Text

Text

Underlined Text

text

Big text

Text</big

Small Text

Text

Polls
''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? Yes/Yes! Yes/No No/Yes No/No

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

Question Answer Answer Answer

Simple Borders
''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:

Text Here

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:

Text Here

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

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

Text

This is a dashed border

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

Text Here

''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:

Text Here

This Is A Dashed-Dotted Border!

Copy this onto your page and it will appear:

Text Here

Mixing Borders
''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
''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

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

Ranking Tables

Ranks/Hierarchy tables

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

Sound Clouds
''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 [http://www.color-hex.com/ here! ]''

Colored Sound cloud

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

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">

Spinning Sound Cloud

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

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">

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

Borders
<div style=" padding: 10px; border: 5px black;margin: 0px;font-family: COLORS;box-shadow: inset 0 0 20px yellow;"> Text Here

The code:

<div style=" padding: 10px; border: 2px black;margin: 0px;font-family: COLORS;box-shadow: inset 0 0 20px yellow;"> Text Here

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

The code:

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

<div style="overflow:hidden;border-radius:100px;border: 3px yellow double;width:220px;height:220px;background-color: ">

<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

<div style="overflow:hidden;border-radius:100px;border: 3px yellow double;width:220px;height:220px;background-color: "> <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

Text Here

The Code:

Text Here More borders coming soon!

Text
<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

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

Credit to Ouraze

<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, red 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-size:50pt;garamond">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

Credit to Ourayze

<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;">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

Credit to Ourayze

<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">Hello There <p style="text-align:center;">

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 <p style="text-align:center;">

<div style="overflow:hidden;border-radius:100px;border: 3px yellow double;width:120px;height:120px;background-color:red ">

<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

The Code

<div style="overflow:hidden;border-radius:100px;border: 3px yellow double;width:120px;height:120px;background-color:red "> <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

Credit to Fubsy (I think)

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

<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

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

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 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?'''

The code:

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

The 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">Hello There

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

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

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


 * style="text-align:center;" |
 * }

The Code:

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

| style="text-align:center;" | |}

The Code:

The Code:

Credit to fubsy for lavalamps

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

or maybe you might want it to look like this:

The Code:

Profile Coding


<div style="position:relative; width:630px; margin:10px auto; margin:0 auto; background-color:rgba(180,180,180,0); color:#000000;border-radius:1pc;"> 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"> <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;"> Text | Text | Text | Text <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

Acceptance scrollers
<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%;">

<p style="font-family:garamond;"> 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! <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%;"> Photo Here <p style="font-family:garamond;"> Welcome to FakeClan! .................. Text == Decline Scrollers ==

<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;">

 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="background: gray; background-image:linear-gradient(to bottom, red, red, red, red, red); border: 5px; color: black;-webkit-border-radius: -5px; padding: 5px;">  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 == Scrollers ==

Hey

Look

At

This

Cool

Thing.

It

Goes

Scrolly

Scroll.

The Code Text here == Collapsibles ==

The Code:

Links
Colored Link

[http://animal-jam-clans-1.wikia.com/wiki/User:Wammer17 This is a link! Click on the orange text to go to my profile! ]

The Code:

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

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
''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:

''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:

Delete:



''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:

Speedy Delete



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 is''a 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:

Quotes
Quotes

"This is a non colored quote." "This is a non colored quote." Colored Quotes == Tabbers == |-|Title=Info |-|Title=Info |-|Title=Info == Color Pallets ==''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!'
 * -|How it works=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.
 * -|Look at this=You can even put photos and such in here: Aspenspot.png
 * -|And even=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 "| - |"!
 * = Top Fur (#00000)
 * = Underbelly (#404040)
 * = Nose and paw pads (#eed2ee)
 * = Eyes (#ffe98f)
 * = Wings (#404040)

Here's the code for dragons:

:  = Bottom scales (#404040) :  = Wings (#eed2ee) :  = Eyes (#ffe98f) :  = Claws (#404040)

Here's the code for cats/dogs

:  = Underbelly (#404040) :  = Nose and paw pads (#eed2ee) :  = Eyes (#ffe98f) :  = Wings (#404040)

Backgrounds
''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!''

<div style="background: linear-gradient(to right, red 0%, yellow 100%); color: black;">''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 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?''

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 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! 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 style="background: linear-gradient(to left, red 50%, red 50%); color: black;">

''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 class="lavalamp" style="animation: flow 6s ease infinite;background-image:linear-gradient(178deg, orange 2%, red 40%, yellow 40%); color: orange;"> 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 == "This User" ==''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!:''{|cellspacing="0" style="width:224px;background:red"| style="width:45px;height:45px;background:yellow;text-align:center;font-size:14pt"| ✎
 * style="font-size:8pt;padding:4pt;line-height:1.25em" | <font color="#E3BC5E">This user is a coding nerd.
 * }

The code:

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

Threads and discussions
''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
''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:

[//animal-jam-clans.wikia.com/wiki/Message_Wall_Greeting https://animal-jam-clans.wikia.com/wiki/Message_Wall_Greeting]:

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

OC Page Statistics
''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.''

Table Code

White dot code

○

Black dot code

•

Credits
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!

Guide To Coding (Betrayall)
IF YOU WANT THE REST OF THIS GUIDE, CLICK HERE

UNDER CONSTRUCTION

COMING SOON TO THEATERS NEAR YOU (get it??)

PARTNER FORMS ARE LOCATED HERE (TBD)

•● ★ ♛ ★ ●•

MISSION STATEMENT

Hey there, welcome to our guide! This project was designed for the sole purpose of teaching users how to code Wikitext (And a bit of HTML too) on their own. This guide will go more in depth on how coding actually works, unlike a lot of mainspace coding guides. This guide is currently being managed by Betrayall, Pending, A$AP Fish, Tranquilitized, STOMACHE, and Pending. If you have any suggestions or areas of improvement for the guide, please leave it down in the comments or on one of their message walls.

•● ★ ♛ ★ ●•

ACCESSING THE SOURCE EDITOR

Okay, before we start coding, you have to know where to put your code in order for it to work. There's multiple ways on accessing the source editor, usually depending on the type of page your trying to make (Comment, article, etc.).

PAGE SOURCE EDITOR

•● ★ ♛ ★ ●•

SPACING & POSITIONING

Insert Commentary

•● ♛ ●•

Text Spacing

Insert Commentary

Text/Content

Insert Commentary

<p style="text-align:left;"> Text Text

•● ♛ ●•

Image Positioning

Insert Commentary

•● ★ ♛ ★ ●•

HEX COLORING

Okay first, hex colors are your regular colors (OBVIOUSLY), but it's just for the computer/webpage to interpret in order to project your specific color. Yes, you can use color names, BUT THAT'S EASY. So, to spare confusion for what's below, here's what a hexcolor is.



It's just an example, RELAX. Okay so hex color actually means hexadecimal number. The colors are in order according to these numbers. There are six digits that can be filled with numbers 0-9, 0 being the darkest and 9 being the lightest of the numbers. Then, our alphabetical spectrum begins with A being the darkest and F being the lightest. You'll find that repeating numbers like #2D2D2D (dark grey), #FFFFFF (white), #000000 (black), and many other codes similar to these are shades of grey. Do not go off about 50 Shades of Grey. I will wack you with a metal spoon. For most color pickers that you use, you don't need to use this knowledge; but, it's better to know than not to know. You'll find the color picker/wheel below.

<font color="#2d2d2d">Color Picker

There are many varieties of colors from the color wheel. You see how you can see that my links blend into the text. The color I used is #2d2d2d, makes life easier, I swear. Also makes it nearly invisible.

•● ★ ♛ ★ ●•

RGB COLORING

Not an expert on this. Consulting Partners ;)

•● ★ ♛ ★ ●•

COLORING YOUR CODES VIA COLOR NAMES

•● ★ ♛ ★ ●•

BORDERS

WHAT'S A BORDER?

This here is a basic border.

Insert your desired content x

Let's break it down.

BORDER TYPES
 * 1) Begin with "<div style="border: "can be used for backgrounds, borders, collapsible, scrolls, fonts (we'll get to that), and etc. For this, we'll be using it for border.
 * 2) After the colon comes the specifics. Add a space and then the desired hexadecimal color or color (depends on preference, hex is much more exact). The example above is using #000000 AKA, black.
 * 3) After your desired color comes the kind of border you'd like. In this case, I'm using solid. But, there's also: box shadow, dashed, dotted, double, and more. There will be a much better description afterwards. Then add the ;"> and insert your content
 * 4) MOST IMPORTANTLY, don't forget to use the end tag or else it'll screw up your work.
 * 5) Extra Bit: There's also a part where you can decide whether or not you want your text to align left, right, or center, and how much space you want between the borders—aka padding. You enter it like the first example in the Border Types Section.

Disecting Borders

Solid Insert Content/Other Borders

<div style="border: 10px solid #1c1c1c; -moz-border-radius: 2px; -webkit-border-radius: 10px; border-radius: 4px;">Solid W/ a Rounded Edge Quick Explainer| FJSLDKFJLKAFJLKDSJLFKJ Later we got more important things to do <div style="border: 10px solid #1c1c1c; -moz-border-radius: 2px; -webkit-border-radius: 10px; border-radius: 4px;">Insert Content/Other Borders

Outset Content/Other Borders

Inset Content/Other Borders

Double Insert

Box Shadow Outset Insert

Box Shadow Outset + Solid Perfect for Border Combos

Box Shadow Inset + Solid Perfect for Border Combos

Box Shadow Inset Insert

•● ♛ ●•

Border Combos

Credit to STOMACHE for making this border.

<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">This border looks very gorgeous with purple or any other gorgeous colors. 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 gray">Text/Content Here

Insert Content Etc Code:

Insert Content Etc

<div style="border: 10px solid #1c1c1c; -moz-border-radius: 2px; -webkit-border-radius: 10px; border-radius: 4px;"> <div style="border: 6px double white; -moz-border-radius: 2px; -webkit-border-radius: 5px; border-radius: 90px;">

Insert your content Code:

<div style="border: 10px solid #1c1c1c; -moz-border-radius: 2px; -webkit-border-radius: 10px; border-radius: 4px;"> <div style="border: 6px double white; -moz-border-radius: 2px; -webkit-border-radius: 5px; border-radius: 90px;">

Insert your content

•● ★ ♛ ★ ●•

FONTS

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

♛ Changing the Font Color

♛

Now put them together and instead of using "font"...

♛

(Extra Bit) Small Caps and Large Caps

•● ♛ ●•

Highlighten Text

•● ♛ ●•

Gradients

♛

Basic Gradient

♛

Gradient Type 2

•● ♛ ●•

Fancy Ones

♛

Animations

•● ★ ♛ ★ ●•

BACKGROUNDS

•● ★ ♛ ★ ●•

SCROLLERS

•● ★ ♛ ★ ●•

ARTICLE TABLES

Article tables are a great way to organize information and.... We'll go over the basic article tables and then play around with what we've learned above and apply them to our magnificent tables. But first, as said before, our dear article table.

•● ♛ ●•

Basic Article Table

EXPLAINER | Here my dear is a basic article table, no fancy stuff. If you haven't noticed, almost all tables on this wiki share something in common with this table. That is unless you look at the one below this that is missing a few parts but that's not the point. Gotta get the rest of this later just ignore this for now I gotta work.

•● ♛ ●•

Another Basic Article Table

•● ♛ ●•

A Table W/ A Background

♛

Old Hierarchy Table Style 1

♛

Old Hierarchy Table Style 2

♛

Horizontal Table

♛

Big Mama Combo ;)

Code:

-

Code:

•● ★ ♛ ★ ●•

Texts

<span class="lava lamp" style="animation: flow 7s ease infinite;background-image:linear-gradient(178deg, white 70%, white 30%, black 75%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:rock salt;font-size:55pt;font-weight:normal;line-height:70px;">Yum

Code:

<span class="lava lamp" style="animation: flow 7s ease infinite;background-image:linear-gradient(178deg, white 70%, white 30%, black 75%);width:100%;height:100px;overflow:hidden;background-size: 900% 900%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-family:rock salt;font-size:55pt;font-weight:normal;line-height:70px;">Yum

If you want the coding right now, I'm currently redoing the entire thing. All the coding is located here. Thank you for your cooperation! I truly appreaciate it. Okay, now back to work on REDOING THIS CODING GUIDE SO I CAN FULFILL MY PROMISE!!!

EDITORS/PARTNERS

<div style="position: fixed; bottom: 20px; left: 101px; overflow:visible;text-align:center" class="overlay"> <div id="toc" class="toc;" style="border: 1.5px solid #ffffff; background: #7ea3a3;margin-left:auto; margin-right:20; margin-top:50px; opacity: .9;padding:10px"> <font face="Times New Roman">DISCORD / ANNOUNCEMENTS

Tribe of the Flere (Fictional)
<div style="border: 7px double #788096; -moz-border-radius: 0px; -webkit-border-radius: 10px; border-radius: 10px;">(Picture) <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,#6D84C3 5%, #7085BF 10%, #4C855B 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-size:70pt;font-family:Zapfino;small-uppercase">The Tribe Of The Flere


 * -|The Flere=
 * -|The Foreigners=
 * -|The Rivals=


 * -|The Helpful=

<div style="border: 7px double #788096; -moz-border-radius: 0px; -webkit-border-radius: 10px; border-radius: 10px;"> <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,#6D84C3 5%, #7085BF 10%, #4C855B 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-size:70pt;font-family:Zapfino;small-uppercase">Hierarchy

<div style="border: 7px double #788096; -moz-border-radius: 0px; -webkit-border-radius: 10px; border-radius: 10px;"> <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,#6D84C3 5%, #7085BF 10%, #4C855B 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-size:70pt;font-family:Zapfino;small-uppercase">Forms

Countryhumans Roleplay page.
<div style="border: 7px double #788096; -moz-border-radius: 0px; -webkit-border-radius: 10px; border-radius: 10px;"> <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,#4331CE 5%, #D3CEF6 10%, #4331CE 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-size:70pt;font-family:Zapfino;small-uppercase">CountryHumans Roleplay

https://soundcloud.com/yannickmaurice/dappy-good-intention-present

https://soundcloud.com/muzzamurray/dappy-good-intentions-vicmix

https://soundcloud.com/charlotte-gough-1/sets/dappy-bad-intentions-deluxe

https://soundcloud.com/amandine-walter/dappy-good-intentions

<soundcloud url="https://soundcloud.com/smoke-and-mirrors-5/18-warriors" color="#000000" height="20" width="21">