How to code

Credit to AJCW

How to get into Source Editor

1/4
Other

These are things I see scattered around the wikia-that don't belong in any other categories.

Audio

\*\*PLEASE NOTE:

Audio *is* allowed on articles. What ISN'T allowed is autoplay. Autoplay is strictly prohibited on AJCW, so please do not set your players to autoplay, even if it is on an article/blog post/profile/comment.

**!!NEW!!**

SoundCloud Players

To create a SoundCloud player, copy and paste:

 <soundcloud url="https://soundcloud.com/old-hermit/love-like-you" height="100"></soundcloud>

You can replace my URL with any URL from SoundCloud.

Adding Images/Gifs

 File:Shadowed Malachite.png
* Imagesks1.jpegClick this icon once in Classic Editor.
* Ssis2image.jpegClick "Choose File", "Browse" or whatever else this button says on your device.
* Image333.jpegSelect your licensing, file size, and file name. Click "Add Photo" and you're all set!
1/3

Adding YouTube Players

 File:SUMV Love Like You COMPLETE Animation-0
Very simple to add, similar to a photo.

* Imagexjs.jpegOnce in Classic Editor, select this icon.
* Imagesjsjs.jpegPaste your video's URL and select "add".
* Imagesms.jpegNow, click "Add A Video." And then you're all set!
1/3
"How do I make it so your username is displayed?"

Well, Template:USERNAME, it's not coding at all!

It's a "magic word" called USERNAME.

To do this, copy and paste:

```
 {{USERNAME}}

```

Coloring Tables

 Here's the | Code!

To create this, copy & paste:

```
 {| class="article-table" border="2" style="margin: 0px auto; width: 200px; height: 200px;border:4px inset white;"
                                ! scope="row" style="text-align:center;background-color:#000080;" |<div style="font-size:12pt;color:#FFFFFF;">Text</div>
                                ! scope="row" style="text-align:center;background-color:#00008B;" |<div style="font-size:12pt;color:#FFFFFF;">Some more text</div>
                                ! scope="row" style="text-align:center;background-color:#000080;" |<div style="font-size:12pt;color:#FFFFFF;">So much text</div>
                                ! scope="row" style="text-align:center;background-color:#00008B;" |<div style="font-size:12pt;color:#FFFFFF;">S'more</div>
                                ! scope="row" style="text-align:center;background-color:#000080;" |<div style="font-size:12pt;color:#FFFFFF;">Lots of text</div>
                                ! scope="row" style="text-align:center;background-color:#00008B;" |<div style="font-size:12pt;color:#FFFFFF;">Text!</div>

```

Tabbers

Tabbers are extremely simple to code.

* Hey look
* It's used to

This is a tabber.

Organize information.

To create a tabber, copy and paste:

```
                                     <tabber>
                                     Content
                                     Content
                                     Content
                                     </tabber>

```

You can add as many headings as you want.

Collapsibles

To create this, copy and paste:

{| class="mw-collapsible mw-collapsed" style="border: 3px solid lavenderblush; -moz-border-radius: 6px; -webkit-border-radius: 10px; border-radius: 5px; padding: 4px; margin: 2px; width:85%; align:center;"

```
   More will be added later - expect rewriting and new entries soon!

```

Borders

This is a **standard** border.

To create this, copy and paste:

```
 <span style="border:1px solid black;">Insert Your Text Here</span>

```

This is a standard rounded border.To create this, copy and paste:

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

This is a **double** border.

To create this, copy & paste:

```
 <span style="border:3px double blue;">Your Text Here</span>

```

This is an **outset** border.To create this, copy and paste:

<div style="BORDER:10px outset #89565e;">Your Text Here</div>

This is an **inset** border.To create this, copy and paste:

<div style="BORDER:10px outset #89565e;">Your Text Here</div>

This is an **ultra thick** border.To create this, copy & paste: <div style="border: 7px solid black;"> Your Text Here</div>

This is a **groove** border.To create this, copy & paste:

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

This is a **ridge** border.To create this, copy and paste: <div style="width:200px;height:100px;padding:10px;border:10px ridge yellowgreen;"> Your Text Here </div>

This is a **dotted** border.To create this, copy & paste: <div style="border: 2px dotted black;">Your Text Here</div>

This is a **box shadow** border.To create this, copy & paste:

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

This is a **rounded box shadow.**To create this, copy and paste:

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

This is **dashed** border.To create this, copy & paste: <div style="border: 2px dashed black;">Your Text Here</div>

This is a **shadow** border.To create this, copy & paste: <div style="border: 2px solid black; box-shadow: 0 0 5px 2px red;"> Your Text Here</div>

This is a nice, non-excessive combination of solid, dashed and dotted.

Just in case, here's the coding for that: <div style="border: 3px solid black;">
 <div style="border: 4px dashed red;">
 <div style="border: 4px dotted black;">
 Your text here!
 </div></div></div>Fonts & Colors To change a font, simply use:

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

List Of Fonts

*Note: Some fonts are only visible from certain computers, any font that appears as Times New Roman, that isn't it of course, is not compatible with your computer. Not all fonts may be listed here as well.*

Credit to Fubsy for font list

Changing Color

This text is red.

To create red text, copy & paste:

```
<font color=red>Insert Text Here</font>

```

Credit to Fubsy for font list,  original here .

Floating Images

**Floating images are NOT allowed on articles!**

*Fixed to Bottom Right*

Copy & Paste:

 <div style="position: fixed; bottom: 60px; right: 10px; overflow:visible;" class="overlay"> Insert Text or Image Here </div>

*Fixed to Top Right*

 <div style="position: fixed; top: 60px; right: 10px; overflow:visible;" class="overlay">Insert Text Or Image Here</div>

*Fixed to Bottom Left*

 <div style="position: fixed; bottom: 60px; left: 10px; overflow:visible;" class="overlay"> Insert Text Or Image Here </div>

*Fixed to Top Left*

 <div style="position: fixed; top: 60px; left: 10px; overflow:visible;" class="overlay">Insert Text Or Image Here</div>

Headings

Most pages use [[1]] for their "headings", but what about pages like LavenderClan and Fox Haven?
Coding for headings comes in many different colors, fonts, shadows & sizes. So let me teach you a bit about text coding before we go in depth about headings.

This text has a **blue** text shadow.

To create this, copy & paste:

```
<span style="text-shadow: blue 0 3px 3px;">Your Text Here</span>

```

You can also make text risen and dropped.

This text is risen.

To create this, copy & paste:

```
<sup>Your text here</sup>

```

This text is dropped.

To create this, copy & paste:

```
<sub> Your text here </sub>

```

So what about sizing text?

This text is in size 1.

This text is in size 5.

To create this, copy & paste:

```
<font size="3">Your Text Here</font>

```

You can alter the size by replacing the "3" with your number, sizes 1-5.

So now that we know about text coding, how do we make headings?

Simple, combine them.

💫Welcome to ImaginaryClan!💫

See how nice that is?

In case you're wondering, copy & paste:

```
 <font size="5"><span style="text-shadow: blue 0 3px 3px;">💫Welcome to ImaginaryClan!💫</span></font>

```

Backgrounds

Backgrounds are a *very* beautiful addition to any page. So why aren't they that common?

Backgrounds are considered excessive coding and these are only to be used on profiles, blog posts, another wiki, comments or threads. **Not articles.** An article is a standard page such as the one you're on now.

This is a gradient black and white background.To create this, copy & paste: <div style="background: linear-gradient(to right, black 0%, white 100%); color: white;">Your text here</div>

This is a rounded gradient background.To create this, copy and paste:

<div style="background: INVISIBLE COLOR; background-image:linear-gradient(to bottom, plum, violet, purple, lavenderblush, lavender); border: 5px; color: FONT COLOR=white;-webkit-border-radius: 50px; padding: 10px;"> Your Text Here </div>

Polls

Polls are one of the easiest things to code.

To create a poll, copy & paste:

 <poll>
 Your Question Here
 Answer
 Answer
 Answer
 </poll>

This guide was/is created and maintained by TheDarkestSpirit. Ask them if you need help.