Guide to Coding (Credit: Fubsy)

Update Log

Any suggestions of what to add to the guide are heavily appreciated! Please send them here if you would like.

Do you like the new format? Yes No No preference

Source Mode in Classic Editor
1. Start by clicking on the arrow of the "Edit" button in the top left corner of an article.

2. Select "Classic Editor" from the options that will appear.

3.In the top right corner, you'll see "Source", click this and it will automatically switch to this mode. To switch back to Visual, simply click the "Visual" next to it. Sometimes, if your page is heavily coded, you may be taken directly to Source Mode.

Source Mode in Visual Editor
1. Click the "Edit" button in the top left corner of an article.

2. Select the button shown above located in the top right next to the "Save" and "Cancel" buttons.

3. Select "Source Mode" from the list of options that will appear. That's all there is to it!

Editing Comments and Threads in Source Mode
Believe it or not, you can also edit comments as though you were to edit any page, although excessively coding every comment is not recommended and highly discouraged.

To enter Source Mode simply click this button in the bottom left corner of the comment:

That's all there is to it! To return to the Visual Editor simply click the button with an eye on it next to it!

Important Things to Note About Coding

 * 1) All coding is done in source mode.
 * 2) Coding is easy to mess up, considering all extra symbols/format of the code counts towards it functioning.
 * 3) Considering that most coding is taken from a source, if you mess up, don't get frustrated! Just start over with the original code, and try again.
 * 4) Although you shouldn't take somebody's exact coding without their permission, it's okay to take it and edit it or change something, such as the colors, to make it your own. That's not stealing coding, it's repurposing it.
 * 5) Before contributing, you should read the Policy and Editing Guidelines if you haven't.

Keeping Coding Simple
Ever been stuck in source mode because your coding is too complex? Although with some types of coding, this is inevitable, this can be very easily avoided if you just simplify your coding.

Understanding Tag Elements
There is no need to code each line of text individually. By understanding tags, you can limit the amount of formatting you need to do on your pages.

All hail.

No, really. This little tag is going to make your life so much easier, if you use it correctly. is meant to apply code to divisions. This means, it will apply the code you add to it to everything below it until you close it off with a. Of course, this can get a little confusing if you use  every time you want to code a single line of text, it should be saved for when you want to code a section of the page, as there is a different tag for that.

, a tag of select talents but of great use.

is used to code one line of text specifically. I like to remember it as something that spans over one line. It's great for formatting titles and such for your pages. It's kind of like the more personal version of , a tag that thinks about specific lines of code more than the overall picture.

Ah, the notorious.

Many pages are absolutely riddled with. is your "friend" with a bad influence. Commonly, it will seemingly "appear on pages by itself", and that's because sometimes it does through automated functions, usually because people use  and then don't close it with a (and then   spreads across your page's code like the plague). It pretty much is a weirder version of  that codes paragraphs and is less reliable and more likely to mess itself up. It's probably better to avoid  and stick with   and.

Keeping Your Coding Functional
Of course things like images aren't going to majorly contribute to the disruption and complexion of code, but commonly on AJCW there are many overly-complex coding elements without any particular function, and are kind of just there. Here are some questions to ask yourself when trying to make a simply coded page.


 * 1) Are all aspects of the coding functional?
 * 2) Is any aspect too bright, overwhelming, or distracting from the rest of the content?
 * 3) Am I prioritizing code over page content?

Types of Pages
Article = Any page created that doesn't qualify as one of the below. Create here.

User Page = Pages that have User:(Username) at the beginning. Do not count as articles. They are created in the same way as articles, but with the information stated previously, here.

Sub-Page = A page that links to another page, and is created to do so, almost like a page inside a page. For example, User:FunkySunky/Sandbox, is a sub-page of User:FunkySunky. The sub-page of the user page, is also considered a user page. Another example, would be a sub-page such as DarkClan/Religion, and since DarkClan is an article, DarkClan/Religion would be considered one as well. Sub-pages are often used by groups to describe information about them not on their main page, and this is how such should be formatted.

Blog Posts = Blog posts are pages that will appear under your "blog" section aka User blog:. They can be made here.

Templates = See Templates Section. You can create a template by creating a page titled "Template:Template Name Here". Please do not create any templates that are not intended for personal use, but use by the wiki (ex: a "WIP template" or a "Swearing template") without permission from a staff member.

Centering
Centered Text Text Here

Using
Maximum size using this method is 7.

Text Here

Text Here

Using
Text Here

Text Here

Using
(Makes the font a set larger size)

Text Here

Text Here

Using
(Makes the font a set smaller size)

Text Here

Text Here

Font Family Code
Text Here

Text Here

Font Family List
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.

Font Color Code
Text Here
 * Text Here

HTML Colors
For even more colors use an HTML Color Code, which consists of a # and 6 numbers, for example, #FFFFFF (White). You can make HTML Color Codes here:

http://htmlcolorcodes.com

Or get HTML Color Codes from an existing image: http://html-color-codes.info/colors-from-image/

Bold
Bold Text Bold Text

Italicized
Italicized Text Italicized Text

Bold + Italicized
Italicized Bold Text Italicized Bold Text

Superscript
The text shown is Superscript Superscript

Subscript
The text shown is Subscript Subscript

Striked
This is Striked Text striked text

Underlined
This is Underlined Text Underlined Text

Preformatted Text
Any text that is preformatted will show up in a scrolling bar as raw text, including coding.

Preformatted Text

Preformatted Text

Hidden Text
Using this means you will be unable to edit your page from visual mode in classic editor.

Using
can be used to show coding in visual mode. Any code by  will appear as text.

nowiki is useful for coding guides

nowiki is useful for coding guides

Opacity
Opacity refers to the transparency of something. The opacity code can also be used on backgrounds, borders, etc. It is expressed through a number between 0 and 1. Think: 50% of 1 = 0.5; therefore, 0.5 = 50% visible.

This is completely visible.

This is only half-visible.

This is invisible.

This is completely visible.

This is only half-visible.

This is invisible.

Text Shadow
Text Here Text Here

Highlighted Text
Text Here Text Here

Images
Basic file format in Source Mode:



Using Art and Copyrighted Photos
Art that is drawn by someone else can only be used with proper credit and permission. This doesn't just mean saying "credit to the artist", you must credit them and ASK them for permission for them to be used on your articles unless it is explicitly stated that it is free to use.

You can easily filter these images on Google Images by clicking "Tools" and then "Permission Rights". Any image that is listed as "Free for noncommercial reuse" or "Free for reuse" are free game. There are also websites that do this for you, a personal favorite being photosforclass.com.

For more information, see this chart:



File Size








Captions
Visible Caption



Hidden Caption



Place your mouse over the picture and wait to see the caption!

File Alignment
Center



Right



Left

Default Gallery
If you don't want a gallery to be centered simply remove the position="center" from the code, or change it to right or left.

Slideshow
If you don't want a gallery to be centered simply remove the position="center" from the code, or change it to right or left.

Sliders
Type 1

Soundcloud (Audio Player)
Although soundcloud is allowed anywhere on the wiki, autoplay, which causes the soundcloud to automatically start when a page is viewed, is banned across AJCW.

 

 

   

Colored Soundcloud




The color MUST be an HTML Code. It will not work otherwise.

Videos (Media Player)
Press this button:



How it looks in Classic Editor, where it can be located to the right in the "Add features and media" section.



How it looks in Visual Editor, where it can be located in the bar shown in the top left corner.

It's self-explanatory from there, but by the end of it you will have a video like this:

Links
Linking consists of  Text Displayed  which would then show up as Text Displayed. For example,  Linked Text Here .

Images that Link
To keep an image from redirecting to the file page/source, you can insert "link=" without an actual redirection itself

Usually images look like this in source mode:.

To link something to a picture, simply do this: . It should turn out like this:

Try clicking on it, it will take you to User:Fubsy!

Customizing Links
Links will display like this, as mentioned earlier: Text Displayed

But what if you wanted to make the Text Displayed a different color, font, size, etc? That's quite simple:

Text Displayed

Text Displayed

Positioning
Positioning is setting certain elements to act a specific way or stay in a specific place. The code commonly looks something like this:



Bottom and left can be replaced with top and right respectively. The larger the number (coordinates) on left, the more to the right it is. The larger the number on bottom, the farther up it is.

Overflow can be set to visible or invisible. When it is set to visible, nothing will be hidden. If it is assigned a width and a height, and the overflow is set to invisible, anything pixels that pass the set height/width pixel (px) limit will be hidden.

Fixed
Anything that is fixed in a certain position will remain in the coordinates it is assigned no matter what, and will be visible even as you scroll through the page. See the bird to the left for an example. It is fixed to the bottom left.





Absolute
Similar to fixed positioning, anything that is positioned to be absolute will remain in the coordinates it is assigned no matter what. However, if the positioning is absolute it will not be visible when scrolling, it won't follow essentially.

text or whatever

Relative
Relative positioning positions objects not starting from the top left of the page like Fixed or Absolute does, but from the line they are placed on in the coding. It's useful for small tweaks and adjustments.

text or whatever

text or whatever

Backgrounds
Keep in mind backgrounds are not allowed on articles or article sub-pages.

Gradient Backgrounds
Rounded Borderless Gradient Background  TEXT



Gradient Borderless Background

TEXT

Gradients


Linear Gradient (To Bottom)

<div style="background: white; background-image:linear-gradient(to top, white, silver); border: 5px; color: black">

Linear Gradient (To Top)

<div style="background: white; background-image:linear-gradient(to left, white, silver); border: 5px; color: black">

Linear Gradient (To Left)

<div style="background: white; background-image:linear-gradient(to right, white, silver); border: 5px; color: black">

Linear Gradient (To Right)

<div style="background: white; background-image:radial-gradient(white, silver); border: 5px; color: black">

Radial Gradient

Solid Backgrounds
Borderless Solid Background

TEXT

Borderless Rounded Solid Background

TEXT

Solid Background with Border

TEXT

TEXT

Rounded Solid Background with Border

Borders
Keep in mind the four border of 25px total limit on articles. Box shadows do not add to the limit if they are included in the border code.

<div style="border: 7px double white; -moz-border-radius: 0px; -webkit-border-radius: 10px; border-radius: 10px;">

Rounded Border

<div style="border: 7px double white; -moz-border-radius: 0px; -webkit-border-radius: 10px; border-radius: 10px;">TEXT Border TEXT <div style="background-color: none; padding: 30px; border: none;margin: 3px;box-shadow: inset 0 0 50px azure;">Box Shadow <div style="background-color: none; padding: 30px; border: none;margin: 3px;box-shadow: inset 0 0 50px azure;"> TEXT <div style="background-color: none; padding: 30px; border: none;margin: 3px; -webkit-border-radius: 10px; border-radius: 10px;box-shadow: inset 0 0 50px lavenderblush">Rounded Box Shadow <div style="background-color: none; padding: 30px; border: none;margin: 3px; -webkit-border-radius: 10px; border-radius: 10px; box-shadow: inset 0 0 50px lavenderblush"> TEXT

Border Styles
Solid

Solid

Double

Double

Dashed

Dashed

Dotted

Dotted

Groove

Groove

Inset

Inset (Lighter color on the bottom.)

Outset (Lighter color on the top.)

Outset

Tabbers
Text Text Text Text
 * -| Title Text Here =
 * -| Title Text Here =
 * -| Title Text Here =
 * -| Title Text Here =

Scrolling Text
Borders and backgrounds can be added into the code to make a scrolling box.

Up/Down (Y-Axis)
This must have a height in the code to work.

(Try Scrolling!)

This

text

will

scroll

across

the

y-axis

pretty nice

huh

This text will scroll

Left/Right (X-Axis)
This must have a width in the code to work

(Try Scrolling!) This text will definitely scroll across the x-axis!

This text will scroll

Buttons
Linked Text Here

Linked Text Here

Display Titles
It is recommended yet not required that you do not use these on regular articles.

This will appear at the top of the page on as the title on articles. On user pages, it is what the tab will say when viewed from a different one.

Hiding the Table of Contents
Simply paste this:

anywhere on the page. Then the TOC will not show up.

Positioning the Table of Contents
Simply paste this:

where you want the TOC to appear.

Removing the Edit Symbol Next to Titles
Simply paste this:

and will not appear.

Polls
Is this helpful? Yes! No! Could be more specific. Was missing what I needed. If the guide was missing what you needed, please contact Fubsy about it, so it can be added. Is this helpful? Yes! No! Could be more specific. Was missing what I needed.

Lines
Above is a line. Below is the code for it.

Adding Categories
Adding Categories is easy! Simply use this code:

OR

Enter categories into the section shown in the side-bar of Classic Editing mode.

Important Aspects Concerning Categories

 * 1) Categories are case-sensitive (Ex: Packs ≠ packs)


 * 1) You should not be creating new categories without consent and permission from the staff.


 * 1) Only articles should be categorized. User pages, blog posts, etc. should not be categorized.


 * 1) You should always try to PROPERLY categorize your pages! Don't just throw categories onto it, try and follow the guidelines and categories listed below.


 * 1) Only attempt to categorize others pages if you know the AJCW categories well.

Group Page/Subpage Categories
Groups 

For any group pages that do NOT classify under Clans, Packs, or Tribes.

Group Subpages 

For any subpage where the original is categorized "Groups".

Clans 

For any group pages that are clans.

Traditional Clans 

For any clans directly based off the books.(Such as ThunderClan, RiverClan, SkyClan, etc.) Used with the Clans category.

Nontraditional Clans 

For any clans indirectly based off the books. (Such as made up names like FireClan or LavenderClan.) Used with the Clans category.

Clan Subpages 

For any subpage where the original page is categorized "Clans".

Packs 

For any group pages that are packs.

Pack Subpages 

For any subpage where the original page is categorized "Packs".

Tribes 

For any group pages that are tribes.

Tribe Subpages 

For any subpage where the original page is categorized "Tribes".

Multi-species 

Used on group pages for groups that allow multiple species. Used with one of the group categories. (Clans, Packs, Tribes, or Groups)

Systems 

Used on System pages, this should be the only category unless the page is a sub-page.

Light-Realmed

Used on Light-Realmed group pages with a group category. Not used on sub-pages.

Neutral-Realmed

Used on Neutral-Realmed group pages with a group category. Not used on sub-pages.

Dark-Realmed

Used on Dark-Realmed group pages with a group category. Not used on sub-pages.

OC Page Categories
Original Characters 

Used on any page about a character.

Cats 

Used on any OC page where the character is a cat. Used with the "Original Characters" category.

Wolves 

Used on any OC page where the character is a wolf. Used with the "Original Characters" category.

Dogs 

Used on any OC page where the character is a dog. Used with the "Original Characters" category.

Big Cats 

Used on any OC page where the character is a big cat. Used with the "Original Characters" category.

Nontraditional Species 

Used on any OC page where the character is not a species listed above (Cat, Dog, Wolf, or Big Cat). Used with the "Original Characters" category.

Other Categories
Guides 

Used on any page that serves as a guide to roleplay or something else AJCW- related.

Roleplay Elements 

Used on any page that describes an element of roleplay outside locations or characters.

Religion and Beliefs 

Used on any page that describes a religion or belief of a group.

Locations 

Used on any page that describes a location.

Medicine 

Used on any page that describes subjects related to healing and medicine.

Article Management Categories
(Often added with templates, see the template section below for more info on those)

Disambiguation 

Used on pages that serve as a Disambiguation, along side the Disambigation template. This is an example of a Disambigation page in its correct format.

Article stubs 

Used on pages that lack content. Should only be applied through the template. (Add the stub template and it will automatically appear.)

Candidates for Deletion 

Used on pages that should be deleted for a valid reason. Should only be applied through the template. (Add the deletion template and it will automatically appear.)

Candidates for Speedy Deletion 

Used on pages that should be deleted quickly for a special valid reason stated on the template. Should only be applied through the template. (Add the speedy delete template and it will automatically appear.)

Some categories are not listed, but are not intended for use on a regular basis, such as the "Policy" category, which is strictly for the AJCW Policy pages. If you are unsure if a category should exist or not, contact a content moderator or administrator.

User Talk Template
It may be easier to paste the talk bubble into source mode and then edit it through visual mode. Access it in visual by double-clicking it!

Username Template
While it may seem like I've just written your username here, the template does change based off whose reading it.

Quote Template
"Quote here.

-Credit here"

"Quote here.

-Credit here"

You should always add credit to a quote, if it's not yours. If you don't know the name of the creator of the quote, you can always put "Anonymous".

Family Tree Template
See here for the format: Template:Familytree

See here for more information on the symbols: https://en.wikipedia.org/wiki/Template:Family_tree

Notice Templates
Click any for more details!

Making Forums
1. Start by going to the forums! You probably know how to do this, but here's a reminder just in case. All you have to do is look to the top right corner in the navigation bar, it should be on the very right.

You'll come to a page with a variety of boards.

Tutorials Forum, Debate Forum, Roleplay Forum, Your OC's', Fun and Games, Questions and Answers, News and Announcements, and finally General Discussion.

Wow! That's a lot of boards, but don't let it intimidate you, the next step is much easier than it may seem.

2. Choosing a board for your post.

This may seem difficult, but it's really not. A brief description of the topics of the boards is actually provided just beneath it, so you can always check that for reference. Still confused? Here, we'll tell you what they're for:

Tutorials Forum
"Do you have something to teach another user about wiki-ing, or do you need help?"

If you have a guide, or something you want to say that may teach/help others accomplish something, this is a great board to post it! However, if you're confused or need help with something, you can also post your question here, or on the Questions and Answers board.

Debate Forum
"Have something great you wanna say but others don't agree? This is the forum for you!"

This is the best place to start a discussion about topics on the wiki such as coding, rules, art theft, etc. It's basically a place where you can really state your opinion and have others share theirs in return. It is also where the revamps are posted.

Roleplay Forum
"Sometimes it's hard to roleplay on Animal Jam. Roleplay here instead!"

The most popular board on AJCW by far, this is where you can create a thread and roleplay. Pretty self-explanatory honestly.

Your OC's
"The name says it all, the board for your OC's."

This board is all about you! Or.. your character that is. Want to tell others about your great new OC through the forums? Go ahead. This is also where users that create "Sign-Ups" for their roleplays, post them.

Fun and Games
"This board is for off-topic conversation -- a place to hang out with your Animal Jam Clans Wiki friends."

Ever wanted to just hang out with your friends without having to keep to the wiki topic? Do so here! You can literally do anything on this board, as long as it keeps with the policies, that is. This board is often used for unrelated discussions threads for groups.

Question and Answers
"Got a question about the wiki, or the topic? Ask your questions here!"

The name says it all! Ask us anything about the wiki or a topic concerning it.

News and Announcements
"Breaking news and information!"

Do you have a big announcement? Go ahead and post it here! This board is often user by users and staff to post announcements.

General Discussion
"This board is for general conversations about the wiki."

Does your thread still not belong in one of the boards above, or are you just unsure? If it's still related to the wiki, just go ahead and put it in the General Discussion board.

3. Once you click on one of the boards, you should see a box at the top that says "Start a discussion". Click it. Something like this should appear:



When you set a topic as a page name, the forum then appears in a section on bottom of the page, like the one shown below:

Creating a Message Wall Greeting
Simply copy this url into your search bar, and create the article when it says it doesn't exist.

http://animal-jam-clans-1.wikia.com/wiki/Message_Wall_Greeting:

Keep in mind that if your username has a space, for the link to work you must have a _ in the place of the gap. (Ex: This_Is_A_Username

Viewing/Editing a Message Wall Greeting
You can view or edit your Message Wall Greeting (if it has been created already) by typing in Message Wall Greeting: in the search bar. Alternatively, you can

Activating Chat Hacks
First, go to this page.

Next, create the article, and copy either or both of these into the page:

importScriptPage('User:Monchoman45/ChatHacks.js', 'c');

Allows you to:
 * 1) Allow you to manually set your status to away anytime.
 * 2) Clear the chat of all messages.
 * 3) Set words that will ping you (beep), when one appears in a message.

importScriptPage('User:Joeytje50/ChatPMs.js', 'c');

Allows you to:
 * 1) Create a group pm with anyone else who has chat hacks.

Save the page, and follow the instructions to bypass your browser's cache that will automatically appear. '''Make sure your personal javascript (JS) is on. You can enable it in your preferences.'''

See here for more detailed instructions.

Keep in mind chat hacks have a notorious reputation to lag and break pms (both regular pms and group), and cause them to glitch. Keep this in mind if you plan on using them. This is mostly the group pm code, but users experience issues with the regular one as well.

Chat Tags
These are codes that will format your message in the Live!Chat. They can be closed off as well. (Ex: [b]Text here[/b] more text.)

[big] = larger font

[small] = smaller font

[c="color name"] = color

[b] = bold text

[i] = italic text

[s] = text w/ slash through it

[u] = text with underline

[sub] = subscript

[sup] = superscript

[c="#DEDBC6"] = "Invisible" Text

[font="font name"] = Font

[bg="color"] = Highlighted text

Linking Things In the Live!Chat
Although it may seem like linking something in chat would be difficult, it's actually not!

Simply copy the link and paste it, and it should automatically work.

When linking things in chat you must keep in mind:


 * 1) The URL cannot contain any swearing before 7:30 CST without a language warning.
 * 2) If the content of the URL contains swearing, before 7:30 CST you must give a warning. (Ex: Hey guys this is cool but it does have some swears in it!)
 * 3) The URL cannot contain extreme NSFW content.
 * 4) You should give a warning to any content that may upset or offend users.

Didn't know this? You should probably read the Chat Policy if you intend to chat in the near future.