Aaron9999's Guide to Source Mode

Recognized by the Administrators of this site as an exceptional guide!

This page is a guide. Guides are essays covering various game topics in more detail and to aid players. As these guides are created by fellow players and wiki users, the POTCO Wiki offers no guarantee of their validity, point of view, or specific approach to a subject. To view all the guides on the wiki, please visit Category:Guides.

Source Mode for Dummies

Source Mode is a synonym to View Source, or the Source Editor, where the majority of Wikia Coding has to be used in order to function properly. Wikia Coding is used to customize pages to have different variations of layouts and colors. Before learning how Source Mode works, it can seem like a bunch of letters and symbols that are impossible to understand. But once one learns how it works, its not very complicated at all, and is easy to understand when there's a problem with Visual Mode, a complication on preview, or when published.

Benefits of having knowledge of Source Mode include being able to:

• Create userboxes and have them judged for approval.
• Quickly add font weights, like bold, italic, or both.
• Add color boxes on pages and box shadows.
• Add a different color and font type to text on pages.
• Understand how to add Background Music coding to template pages, with the help of an admin or bureaucrat if your an unpromoted user or rollback.
• Turn your information into a tabview for tabs on each branch of information about you.
• Make tables/charts for a topic's statistics.
• Add polls to a page.
• Resize and add pictures to a specific spot on your page.
• Insert Bulleted lists, Numbered, or Indented sections of text.

Note: Some Wikia coding forms are much more complex than other's, but can prove more effective. Another Note: Click the arrow on the top right corner of this chart cutoff to view the full chart.

Tips before proceeding to learn Wikia Coding

Note: Disregard this section if you already have experience with Wikia Coding.

• You don't always have to type the coding, you can copy and paste from somewhere on the wiki. However, you should only do this sparingly.
• You will encounter complications with Preview and when you Publish a page, occasionally.
• Learning Wikia Coding takes effort if you don't have experience with coding, you don't learn it in one day. It can take weeks for some people, so don't get frustrated if you don't understand it the first few days.
• Some Coding will be to complex to edit Visual Mode, so Preview will become your 'Best Friend' when learning Wikia Coding.
• Once you know Source Mode, you'll likely edit in that even for just plain text.

Types of Source Mode Coding

Let's say there's 3 levels of Wikia Coding. Basic, Average, and Advanced Wikia Coding. If you follow this guide correctly, and don't try to wing it, you'll likely learn something, even if you already knew most Wikia Coding.

Basic Wikia coding

When you start to learn Source Mode, you likely have no understanding of it whatsoever. But, this guide will teach you how it works. Let's start with the basics.

Horizontal Dividing Lines

This is arguably, the easiest coding in Source Mode. Below is the coding that is needed for Horizontal Dividing Lines.

Example:

Sword
----
Dagger
----
Doll
----
Staff

What it should look like:

Sword

---

Dagger

---

Doll

---

Staff

Note: These should not be used to substitute a section heading, as the section will not show up in the Table of Contents without a Section Heading.

Bold Text

When editing in source mode, the easiest way to make text bold is by putting three apostrophes by the start and end of each sentence.

Example: 
'''I found me a Legendary Blade earlier, when the sun was still risin'.'''

What it should look like:

I found me a Legendary Blade earlier, when the sun was still risin'.

Italic Text

Like Bold Text, the easiest way to make text italic is by putting apostrophes by the start and end of each sentence, except you put two apostrophes, instead of three.

Example: 
''I found me a Legendary Blade earlier, when the sun was still risin'.''

What it should look like:

I found me a Legendary Blade earlier, when the sun was still risin'.

Bold And Italic

Like Bold Text and Italic Text, the easiest way to combine these font weights in Source Mode is with apostrophes at the end and start of each sentence, but instead you put five apostrophes.

Example: '''''I found me a Legendary Blade earlier, when 
the sun was still risin'.'''''

What it should look like:

I found me a Legendary Blade earlier, when the sun was still risin'.

Bulleted List

This is quite easy to do. It's simply done with asterisks at the beginning of each source mode coding line. A bullet is indented further with more

Example:

*1 Skull Chest
**2 Skull Chests
***3 Skull Chests

What it should look like:

• 1 Skull Chest
  • 2 Skull Chests
    • 3 Skull Chests

Numbered List

This is similar to Bulleted Lists, except you use Number signs (#) instead of Asterisk signs (*). The number increases with the number of # signs.

Example:

#1 Skull Chest
##2 Skull Chests
###3 Skull Chests

What it should look like:

1. 1 Skull Chest
   1. 2 Skull Chests
      1. 3 Skull Chests

Definition List

These are good for defining a word or term to somebody, should they ask you about it, and you know what that term they ask about is. Below is the coding required To do this.

Example:

;Loot Container: consists of items that may be dropped by a enemy or enemy ship.
;In a Loot Container, I found me a Legendary Blade earlier, while the sun was
still risin.
;A Loot Container can contain anything lootable, from clothes, weapons, to ammo.
In this case, it was a Legendary Blade.

What it should look like:

Loot Container

consists of items that may be dropped by an enemy or enemy ship.

In a Loot Container, I found me a Legendary Blade earlier, while the sun was still risin'.

A Loot Container can contain anything lootable, from clothes, to weapons, to ammo.

In this case, it was a Legendary Blade.

Breaking Lines

Breaking Lines is very simple in source mode, and can be used to break a line without starting a new paragraph. It is preferred you do this sparingly.

Example:
I found me a Legendary Blade earlier, when the sun was still risin', <br>
and also found a Famed Cursed Blade, under the creakin' cave ceiling of 
Isla Tormenta's Cursed Caverns.

What it should look like when published:

I found me a Legendary Blade earlier, when the sun was still risin',
and also found a Famed Cursed Blade, under the creakin' cave ceiling of Isla Tormenta's Cursed Caverns.

Indenting

Indenting is simple to do. It is triggered by a colon sign (:) at the beginning of a line of coding. Lines indent further with more colons.

Example:
:1 Skull Chest
::2 Skull Chests
:::3 Skull Chests

What it should look like when published:

1 Skull Chest

2 Skull Chests

3 Skull Chests

Sections and Subsections

Sections and Subsections are used, and are used to divide text into sections. Below is how to use them.

Example:

==Section Heading==
===Subsection==
====Smaller Subsection====
=====Even Smaller Subsection=====

What it should look like:

Average Wikia Coding

After learning the basics of Source Mode, you should have a little bit of understanding about Source Mode. Longer lines of letters and symbols won't be as complicated from here on out.

Redirecting Links

This is useful for allowing to include a link within a few letters of information, or text.

1. Put a [bracket at the start of the link.
2. Type the link.
3. Type a forward slash at the end.
4. Type a space.
5. Type what text you want to show on the link redirection.
6. End the redirection with a ] bracket.

Example:

[http://piratesforums.co/ Our Sister Site.]

What it should look like:

Our Sister Site.

Font Color

Font Color can be added by inserting the following coding below.

Example: 
<span style= color:Red>I found me a Legendary Blade earlier, 
when the sun was still risin'.</span>

What it should look like:

I found me a Legendary Blade earlier, when the sun was still risin'.

Font Type

Font type enables you to change the font on a page, but only font's that you have or the user viewing has, will be come up a different font to you/them.

Example: 
<font face="Monotype Corsiva">I found me a Legendary Blade earlier,
when the sun was still risin'.</font>

What it should look like:

I found me a Legendary Blade earlier, when the sun was still risin'.

Font Size

This is good for when you have a huge page with multiple sections of different importancy.

Example: 
<font face= size="4">I found me a Legendary Blade earlier, 
while the sun was still risin'.

What it should look like:

I found me a Legendary Blade earlier, while the sun was still risin'.

Combining the 3 Font Codings

It's recommended to use just Font Type and Font Color if your editing a page, preferrably your profile page. However, it isn't mandatory for blogs and profile pages.

Example:
<font face="Monotype Corsiva" size="4" color:Red>
I found me a Legendary Blade earlier,
while the sun was still risin'.</font>

What it should look like:

I found me a Legendary Blade earlier, while the sun was still risin'.

Galleries

Galleries are better alternatives for slideshows. Each picture shows separately without changing, instead of 1 at a time.

 Example:
<gallery widths="170" captionalign="center">
Red Color Gallery.png|Red
Orange Color Gallery.png|Orange
Yellow Color Gallery.png|Yellow
</gallery>

What it should look like:

Red

Orange

Yellow

Polls

Polls are for asking yer mates their opinion on a specific topic. They can be about anything POTCO related, or about something else. Note: It's recommended you only use topics related to POTCO.

Example:
<poll>What's yer favorite color?
Red
Orange
Yellow
</poll>

What it should look like:

Note: This poll is only meant for show, not to be voted on.

Tabviews

Tabviews are for user profile pages and work by creating links for each tab. They can be inserted in background boxes.

Example:
<tabview>
User:Aaron9999/About Me|About Me
User:Aaron9999/Userboxes|Userboxes
User:Aaron9999/Loot|Loot
</tabview>

What it should look like:

• About Me
• Userboxes
• Loot

Note:The text after the | symbol doesn't have to be the same as the text after the forward slash (/). To prevent unused pages, I used a few tabs from the tabview on my Profile Page. Also, there won't be the colored text. Just the tabview.

Inserting Images into a Corner of your Screen

This is not very hard to do, if you understand what each part of the coding does. It inserts an image into a corner of your screen.

Example:
<div style="position:fixed; bottom:0; left:0">[[File:EPICNESS.png|250px]]</div>

What it should look like: Go here to see what it should look like.

Note: It is recommended that images no larger than 250px are inserted on the screen.

Fitting Userbox Babels and Pictures in Background Boxes

Many people have the issue that userboxes babels and pictures show up outside the background box or tabview. This simply coding fixes that, and fits it with the tabview.

Example:
[[File:BabelSpacer.png|center|link=]]

Note: The Babel Spacer is only necessary if you have a background box.

Advanced Wikia Coding

This is where coding gets complicated if your learning source mode. It has to be done in certain layouts, otherwise one of few things will happens, including not showing up, or showing up as a bunch of plain text. From here, it turns into multiple lines of coding for types of Wikia Coding of equal or bigger difficulty.

Babel (Improved)

Although seeming the same, the coding provided below gets rid of random spaces between userboxes in the regular {{Babel template.

Example:
{| align="left" border="0" cellpadding="1" cellspacing="1"
|-
|{{Babel|
}}
|}

Note: if you want the Babel to the right, switch "left" with "right and add Right in front of |{{Babel. This is only visible with a list of userboxes under |{{Babel.

Background Box Color

Background Color Boxes are only preferred for User's profile pages on this wiki, and it is very likely that's the only way it will be used on this wiki.

Example: <div style="-webkit-border-radius: 3px; background: #EDEDED; 
color: Black;">I found me a Legendary Blade earlier, 
when the sun was still risin'.</div>

What it should look like:

I found me a Legendary Blade earlier, when the sun was still risin'.

Box Shadows

Box Shadows can be used to make something really "Pop Out", or make a page look more decorated with color. It can be used by itself in a coding piece.

Example: <div style="-webkit-border-radius: 3px; box-shadow: 0 0 8px 5px 
 Gray;">I found me a Legendary Blade earlier, when the sun was still risin'.
</div>

What it should look like:

I found me a Legendary Blade earlier, when the sun was still risin'.

Borders

Like Box Shadows, Box Borders can be used to make something really "Pop Out". The difference is, Box Shadows attach to the Box Border. It can be used by itself as well.

Example:

<div style="-webkit-border-radius: 20px; position: relative; right: 0.6em;
width:650px; border: 3px solid gray;">I found me a Legendary Blade earlier,
when the sun was still risin'.
<div>

What it should look like:

I found me a Legendary Blade earlier, when the sun was still risin'.

Background Music

Many users have Background Music by using a playlist from youtube. Below is the coding from my MediaWiki Background Music page. Note that this needs to be followed by the Bulleted List.

• This requires a youtube account, or help from somebody with a youtube account.

1. Go to Add To on a video.
2. Click the "Enter new Playlist Name" in the box below any playlists you may have.
3. Type the name you want for the playlist, then click Create. The video you created the playlist on will automatically be added.
4. Get the songs you want on the playlist.
5. Go to share, click Embed.
6. In the coding below, put the embedding link between the two quotation marks in front of src= and behind &autoplay=1".
7. If your not an admin or bureaucrat, have one paste the coding into a MediaWiki page. Preferably a name you go by on the wiki then Music. Example: AaronMusic

Example:
<div style="width:0px; overflow: hidden; height: 21px; margin-top: 0px; 
margin-bottom: 5px; margin-right: 5px; position: relative; top: 108px; 
border: 0px outset #0f0f0f"><iframe width="0" height="23" src=
"http://www.youtube.com/
embed/Xwga7lbnSe0?list=PL-
voViqtt5ZB2F-chcNx8pgrY73YKeL64&autoplay=1" frameborder="0"
 allowfullscreen=0></iframe></div>

Note: This only works if the videos are not copyright, and if the coding is pasted into a MediaWiki page.

Tables

Tables are great for displaying data over different calculations. An example would be a weapon's damage over ranks.

Example:

{| align="center" border="1" cellpadding="1" cellspacing="1" 
style="height: 200px; width: 400px; "
! scope="col" style="color; Black" style="background-color: Firebrick; "|Skill 1
! scope="col" style="color; Black" style="background-color: Firebrick; "|Skill 2
! scope="col" style="color; Black" style="background-color: Firebrick; "|Skill 3
|-
| style="text-align: center; "|Rank 1
| style="text-align: center; "|Rank 2
| style="text-aling: center; "|Rank 3
|-
| style="text-align: center; width: 50px; "|Little Damage
| style="text-align: center; width: 50px; "|Fair Damage
| style="text-align: center; width: 50px; "|Heavy Damage
|-
| style="text-align: center; width: 50px; "|Little Damage
| style="text-align: center; width: 50px; "|Fair Damage
| style="text-align: center; width: 50px; "|Heavy Damage
|-
| style="text-align: center; width: 50px; "|Little Damage
| style="text-align: center; width: 50px; "|Fair Damage
| style="text-align: center; width: 50px; "|Heavy Damage
|-
| style="text-align: center; width: 50px; "|Little Damage
| style="text-align: center; width: 50px; "|Fair Damage
| style="text-align: center; width: 50px; "|Heavy Damage
|-
| style="text-align: center; width: 50px; "|Little Damage
| style="text-align: center; width: 50px; "|Fair Damage
| style="text-align: center; width: 50px; "|Heavy Damage
|}

What it should look like:

Skill 1	Skill 2	Skill 3
Rank 1	Rank 2	Rank 3
Little Damage	Fair Damage	Heavy Damage
Little Damage	Fair Damage	Heavy Damage
Little Damage	Fair Damage	Heavy Damage
Little Damage	Fair Damage	Heavy Damage
Little Damage	Fair Damage	Heavy Damage

Gradients

Gradients are possibly the most advanced in coding you can get outside of mediawiki. It takes several lines to code in source mode, and are too complex in coding to edit in the visual editor.

Example:
{| style="width:100%; padding:0.5em; margin:0.5em; background-color:#ED1A1A; color:black; font-size:8pt;-moz-border-radius:3ex; border-radius:3ex; -moz-box-shadow: 0 0 10px 3px #0a1233; -webkit-box-shadow: 0 0 10px 3px #0a1233; box-shadow: 0 0 10px 3px #0a1233; padding:10px; padding-bottom:15px; background:#0a1233; color:red; background-image:-moz-linear-gradient(top center , red 0pt, orange 16%, yellow 16%, green 16%, blue 16%, purple 16%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, red), color-stop(16%, orange), color-stop(32%, yellow), color-stop(48%, green), color-stop(60%, blue), color-stop(76%, indigo), color-stop(1.00, violet)); background-image: -moz-linear-gradient( left top, right bottom , from(red), color-stop(16%, orange), color-stop(32%, yellow), color-stop(48%, green), color-stop(60%, blue), color-stop(76%, indigo), to(violet)); {{Roundy|20px}}" cellspacing="2" cellpadding="3"
|I found me a Legendary Blade earlier, when the sun was still risin'.
|}

What it should look like:

I found me a Legendary Blade earlier, when the sun was still risin'.

Note: the rest of the coding is on the farther right of the scroll view,

Guide Notes

• For users trying to learn source mode, it's highly recommended you learn the coding from the basics first. Don't make a huge jump and try to learn Advanced coding right when you start.
• Some coding may require skipping lines in order to function properly.
• If you don't understand something on the guide, after following my advisements, it's ok to ask me for help here or in the comments below.