Wikia

Community Central

Comments5

Introduction to editing with the Source Editor

Other Blogs
Editing Introduction to editingEditing with the Source Editor
Infoboxes Creating Portable Infoboxes
Misc.

I haven't written a blog in 2 years so here goes.
Also be forewarned the my writing style is very bland, so if it gets boring, take a break, do something else, come back and start reading again. :)

In this blog we will be exploring the features of the (much better, in my opinion,) source editor and how to do things in this editor much more efficiently than the visual ones. The source editor allows us to directly modify the "source" of the editor, hence its name.

Editing Text (Plain Text, Bolding, Italicizing, Headers)

The difference between source and visual when editing pure textual things is virtually no difference. Plain text is plain text.

However, more "advanced" things (in comparison to just plain text) like bolding, italicizing, formatting text require more than just a few button clicks. Also, in visual, there is a dropdown for headers, while in source, it's much easier to modify.

Bolding & Italicizing

For quick reference, italicizing and bolding:

  • ''Sample text'' italicizes the text
    • Simply put two apostrophes (not quotation marks) before and after the text you want to italicize.
  • '''Sample text''' bolds the text
    • Similar to italicization, you use apostrophes, but use three this time.

Headers

Creating headers is easy!

  • Header 2 (<h2> in HTML): ==Your Header Title==
  • Header 3 (<h3> in HTML): ===Your Header Title===
  • Header 4 (<h4> in HTML): ====Your Header Title====
  • Header 5 (<h2> in HTML): =====Your Header Title=====
  • Header 6 (<h2> in HTML): ======Your Header Title======

Creating Links

This is one of the more commonly used things: links. The syntax itself is very simple:

  • [[Sample page]]
  • [[Sample page]]s
    • This also links to "Sample page" but it displays as "Sample pages" (Sample pages)
    • This is useful when the page name is singular, but you want to display it as plural
  • [[Sample page|replace]]
    • This also links to "Sample page" but is displayed as "replace" (replace)
    • This is useful when there is no need to display the page's actual title; fits well when what is displayed flows well with the sentence

As you can see, all three link to "Sample page" but display differently

External links are done so:

  • [https://www.google.com]
    • Links to [1], nothing after the external link just returns [x], x being a numerical digit
  • [https://www.google.com Google]
    • Links to Google, adding word(s) after the external link makes them show up instead

Images, Videos and the sort

The general syntax of displaying files is very similar to links, as they both use square brackets.

For most purposes, the following model should do well for any situation:

[[ File: Filename . fileextension | thumb | caption | size | alignment | link= ]][1]

I will now being to explain all the elements of this model:

  • Filename - Just your file's name, verbatim (REQUIRED)
  • fileextension - This is your file's extension (png, gif, jpg, jpeg, ico, pdf, svg, odt, ods, odp, odg, odc, odf, odi, odm, ogg, ogv, oga), should be in the title of your file along with the name (REQUIRED FOR IMAGES AND SOUNDS)
  • thumb - This makes the file a thumbnail
  • caption - This adds a caption to the file, it only works when "thumb" is present
  • size - This sets the size of the file, either in px (pixels) or percent (introduced since Darwin); I believe if you only put one dimension, it sets the height width[2], if you put both (as in 10x10px), it scales the file according to it's height width as well, without modifying the image in any way (stretching, etc.).
  • alignment - Self explanatory, either align the file, left, right, or center
  • link= - Add the name of the page which the image will link to; leaving it blank will make the image unclickable

In the model, it is required to have at the very least [[File:Filename.fileextension]] for images and sound files, and [[File:Filename]] for videos.

Next will be how to combine several images into a gallery, slideshow, or slider.

Galleries, Slideshows, and Sliders

Galleries, Slidershows, and Sliders are very similar in the fact that they all use the <gallery> tag. This means that they share similar modifiers, in which some cases they do. For example: To add images you will not need to use square brackets or add the prefix "File:" and captions and links work the same as previously mentioned above about files. For modifiers, a good tip is to never put modifiers that aren't needed! Start out with a <gallery> tag! (And don't forget to end it with a </gallery> tag!)

Galleries

You can modify this gallery in several ways, namely the widths, position, columns, spacing, and orientation. All of these can be added like "widths=" and adding things in quotes ("") after the equals sign, and make sure they are inside the gallery tag!

  • Widths (widths=) - The value can be any number from 50 to 310, it automatically will be in pixels
  • Position (position=) - right, left, or center
  • Columns (columns=) - any number from 1 to 6, leaving it blank will automatically fit to the page
  • Spacing (spacing=) - small, medium, or large
  • Orientation (orientation=) = none, square, landscape, portrait

Slideshows

In order to make your gallery a slideshow, add type="slideshow" inside the <gallery> tag. Slideshow has similar modifiers, but they are slightly different.

  • Crop (crop=) - Set the value to either true or false; true enables wikia's smartautocrop, while false disables it
  • Widths (widths=) - Similar to the one in galleries, but is from 200 to 500
  • Position (position=) - right, left, or center; same as generic galleries

Sliders

To make a gallery a slider, add type="slider" inside the <gallery> tag.

  • Orientation (orientation=) - right or bottom, this sets the slider previews to be either on the right or the bottom.

Tables

Tables are far simpler in visual editors no doubt, but the biggest restriction is styling the tables, as it is very hard to do such things visually if there is not function to do so (at least, last time I used visual mode, there was no such thing). The table code is actually really simple once you get the hang of it.

The more basic table looks something like this:

Wikitext Table
{| class="wikitable"
|Hi!
|Hi!
|Hi!
|}
Hi! Hi! Hi!

Tables must start with a {| and end with a |}. Table headers have a ! before the header text. Regular table cells use | instead of the ! used for headers. To separate rows, you'd use a |- between the two rows you need to split. An extremely useful technique for making all cells on the same line instead of having each on their separate lines, is using || between each cell's content and not putting a line break between cells and their content; this allows us to conserve space in case the table has many columns. You can style tables with CSS classes and elements in either one of these places the starting "tag" {| or before cells/headers, but you need to put the styles first add yet another | between the styles and the cell/header content.

Quick Reference:

  • Start tables with {|
  • End tables with |}
  • Start header cells with !
  • Start regular cells with |
  • Use || between two cells' content to save space if need be
  • Always add a "dividing" | between the styles and the cell/header contents

Next we'll explore some more interesting and perhaps, more useful things about table customization. First off declaring a table class, by default you should use the "wikitable" class or the "wikitable sortable" class (which allows you alphanumericize[3]) the cells. A table with the "wikitable sortable" class needs to have headers present or else it will look identical to a table with the class "wikitable".

But wait, what if I want a row or column to span more than one row or column?

Well you're in luck, since you can do things like colspan and rowspan, they tell the cell how many columns or rows to cover, respectively. So next time you need something that takes up multiple columns or rows, you can use colspan and rowspan. Now colspan and rowspan are basically modifiers mentioned earlier in the tables "umbrella section" and follow the same rules, you have to put them between the cell and their starting symbol (! or |). Remember: rowpsan counts how many rows it takes up, including the one the cell with this property is in.

Wikitext Table
Colspan
{| class="wikitable"
! colspan="3" | Hi!
|-
| Hi!
| Hi!
| Hi!
|}
Hi!
Hi! Hi! Hi!
Rowspan
{| class="wikitable"
| rowspan="4" |Hi!
|-
|Hi!
|-
|Hi!
|-
|Hi!
|}
Hi!
Hi!
Hi!
Hi!

Templates

The best thing about most templates (infoboxes in particular) is that they are basically tables, actually scratch that, they are tables. Other templates, like warning templates or notification templates, may use HTML's <div> and <span> tags. Templates are found the "Templates:" prefix, and can be used anywhere on the wiki it is resides. What makes a template different from a table is that it uses parameters. When looking at the source of Wikia's default infobox, we see things like {{{title}}}, and that is a parameter. You can create your own parameters with three curly braces around a word or words.

Making the template

Infoboxes

So how do you go on about making a template, well specifically an infobox? If you aren't experienced in styling tables, or CSS[4], then just use the class "infobox".

Simple steps to make a simple infobox (With title, image, caption, and content:

  1. Create the most basic table (starting and ending "tags" {| |}), and then add "class="infobox" style="width:250px" after the first "tag"
  2. Inside the two "tags" add a "row break": |-
  3. Add a a pipe[5] and add the parameter "title" ({{{title|}}})
  4. Now add "colspan="2" style="text-align:center; font-size: large; background:#ccccff;"" before the title parameter (with another pipe of course)
  5. Add another "row break": |-
  6. Make another row, with a pipe of course, and add {{{image|}}}, with "colspan="2" style="text-align:center;""
  7. To add a caption's parameter, after the image parameter, add <br /> {{{caption}}}
  8. Add another "row break": |-
  9. Add the title of the first "trait" or "descriptor" like {{{desc1|}}}, and don't forget, since this is a "header", use ! in front
  10. On another line, add the first value parameter {{{value1|}}}, and use the regular pipe
  11. Add as many rows or {{{desc1|}}} and {{{value1|}}}, but remember, always change the parameter name so that there aren't two {{{value1|}}}'s, or else that'll make every value the same!
Wikitext Infobox
{| class="infobox" style="width:250px"
|-
|colspan="2" style="text-align:center; font-size: large; background:#ccccff;"|{{{title}}}
|-
|colspan="2" style="text-align:center;"|{{{image}}} <br /> {{{caption}}}
|-
!{{{desc1}}}
|{{{value1}}}
|-
!{{{desc2}}}
|{{{value2}}}
|}
{{{title}}}
{{{image}}}
{{{caption}}}
{{{desc1}}} {{{value1}}}
{{{desc2}}} {{{value2}}}

Others

Templates aren't strictly just infoboxes, they may be used for other things, as mentioned above, notification templates, and still they require parameters. For more simple ones, they can be things with <div>, <span>, images, headers, tables, or collections of them.

Using Templates

I've made my template, now how do I use it? Well, all templates start out as so {{Template Name (template name being the name of your template of course) and end with }}. Parameters, mentioned above when creating templates, follow a format of "|ParamName = YourValue" (ParamName and YourValue, the name of the parameter and it's value, respectively). So to put it all together, to use an infobox like Wikia's, do this:

{{Infobox
|name         = 
|title        = 
|image        = 
|caption      = 
|header1      = 
|label1       = 
|data1        = 
|header2      = 
|label2       = 
|data2        = 
|header3      = 
|label3       = 
|data3        = 
|header4      = 
|label4       = 
|data4        = 
|header5      = 
|label5       = 
|data5        = 
|below        = 
}}

The End

You made it?! Nice! Maybe I wasn't so boring after all. ;)

Well to the readers, I hope you've learned something, or at the very least, reviewed some things[6]. Well even if nothing made sense (which is highly possible), rereading and trying things on your own helps alot. :)

Related (and helpful articles and blogs)

References/Side Comments

  1. Don't include the spaces, they are unnecessary, I've included them just so it is easier to read
  2. Corrected by Digifiend in their comment.
  3. I made up this word.
  4. With CCS you can make a class and set your template as that class.
  5. "Pipes" are really just | or {{!}}, I'll start calling them by their proper name instead of just typing it out.
  6. Especially if you're one of those Wikia Veterans

↓ Questions? Comments? Concerns? Mistakes? Write a comment below ↓

Around Wikia's network

Random Wiki