FANDOM


Elite's request finished

Welcome to the Official AJCW Guide!

It's Voltaire again. Whether you're a first-time-coder, or a senior looking to refresh your memory, please read! Feel free to take any coding from this page- which contains a vast amount of information on the topic. My image was drawn by the lovely Sparklepet1356.

Let's jump straight into it, shall we?

How to get into Source Editor

Other

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

User Speech Bubble

What about that thing that we started the page with? That's a user speech bubble. People say they're complicated and hard to do but truly, they're not.










Elite's request finished

Welcome to the Official AJCW Guide!

It's Volitare again- did you miss me? This is what a user talk/speech bubble looks like. My image was drawn by the lovely Sparklepet1356.

To do this, copy and paste: <div style="font-family:georgia;">{{User Talk Bubble |image= your photo here! |color= #ce00ff |color= "black" |textcolor= #ce00ff |line= #ce00ff |name= enter header here! |text= enter text here! }}

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

Jefferowan12
  • Click this icon once in Classic Editor.
  • Click "Choose File", "Browse" or whatever else this button says on your device.
  • Select your licensing, file size, and file name. Click "Add Photo" and you're all set!


Adding YouTube Players

SUMV Love Like You COMPLETE Animation-0

SUMV Love Like You COMPLETE Animation-0

Very simple to add, similar to a photo.

  • Once in Classic Editor, select this icon.
  • Paste your video's URL and select "add".
  • Now, click "Add A Video." And then you're all set!

"How do I make it so your username is displayed?"

Well, Insert name here, it's not coding at all!

It's a "magic word" called USERNAME.

To do this, copy and paste:

 {{USERNAME}} 

Coloring Tables

Look
At
This
Table
That
Is
Colored!
Isn't
It
Amazing?
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>
                                                            | style="text-align:center;" |More Text
                                                            |-
                                                            ! scope="row" style="text-align:center;background-color:#00008B;" |<div style="font-size:12pt;color:#FFFFFF;">Some more text</div>
                                                            | style="text-align:center;" |lots of text
                                                            |-
                                                            ! scope="row" style="text-align:center;background-color:#000080;" |<div style="font-size:12pt;color:#FFFFFF;">So much text</div>
                                                            | style="text-align:center;"|Little Bit more 
                                                            |-
                                                            ! scope="row" style="text-align:center;background-color:#00008B;" |<div style="font-size:12pt;color:#FFFFFF;">S'more</div>
                                                            | style="text-align:center;" |Text
                                                            |-
                                                            ! scope="row" style="text-align:center;background-color:#000080;" |<div style="font-size:12pt;color:#FFFFFF;">Lots of text</div>
                                                            | style="text-align:center;" |Text
                                                            |-
                                                            ! scope="row" style="text-align:center;background-color:#00008B;" |<div style="font-size:12pt;color:#FFFFFF;">Text!</div>
                                                            | style="text-align:center;" |Last text!
                                                            |} 

Tabbers

Tabbers are extremely simple to code.

This is a tabber.

Organize information.

To create a tabber, copy and paste:

                                                                 <tabber>
                                                                 |-| First heading here =
                                                                 Content
                                                                 |-| Second heading here =
                                                                 Content
                                                                 |-| Third heading here =
                                                                 Content
                                                                 </tabber> 
                                                            

You can add as many headings as you want.

Collapsibles


This is a collapsible.
They're commonly used for "member counts."

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;" |''Your Text Here'' |- |''Your Text Here'' |}

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

</center>



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>










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

Georgia Comic Sans MS
Arial Impact
Palatino Times New Roman
Arial Black Lucida Grande
Courier New Gill Sans MT
American Typewriter Brush Script MT
Verdana Webdings (Webdings)
Trebuchet MS Wingdings (Wingdings)
Arial Narrow Arial Rounded MT Bold
Andale Mono Papyrus
Herculanum Marker Felt
Osaka Tahoma
Copperplate Futura
Skia Zapfino
Times
Apple Chancery Optima
Big Caslon Hoefler Text

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>
Shades Yellows Reds/Pinks Oranges Greens 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

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.

Is this guide helpful?
 
1540
 
232
 
71
 

The poll was created at 11:39 on September 26, 2016, and so far 1843 people voted.

To create a poll, copy & paste:

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

Delete the space in the first tab to create <poll>.


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