Wikia

Community Central

Templates Overview

Talk0
91,052pages on
this wiki

From Ooyala

993 Views

Description

A deep dive tutorial into how to use templates on Wikia.Templates are one of the most commonly used features on a wiki, yet they can be complex and confusing. This webinar overviews how to use, create and update templates on your wiki - with a special focus on infoboxes.

Aired April 26, 2013

Slides & Transcript

Templates Webinar April 2013 Slide01
Welcome to the April Webinar - Templates Deep Dive


Templates Webinar April 2013 Slide02
Presenters


Templates Webinar April 2013 Slide03


Templates Webinar April 2013 Slide04


Templates Webinar April 2013 Slide05
Standard Wiki Page - Marvel Database Wiki

Let’s start by looking at standard wiki page. Here is a screenshot of the Captain America page on the Marvel Database Wiki. You can see on the right side that there is a section detailing facts and an image of Captain America. This blue colored box is a template, and is used for all characters within the Marvel Wiki.

The editors there add this to provide facts in a clean and concise fashion on each of the character pages. This style of templates is one very common on wikis, and is called an infobox. Many wikis use these for characters, episodes, and other topics that are helped by a standardized format. Templates are used for many other situations as well, including welcome messages, licensing info, user pages and much much more.

Templates Webinar April 2013 Slide06
Infobox Template

This infobox is designed and controlled by the infobox template code - one that is standard for all characters on the marvel wiki. Here you can see the code that controls this. Don’t let this worry you yet, we will dive deeper later into how to create something similar for your wiki.

Templates Webinar April 2013 Slide07
Goal of Templates

So in essence, a template is a special type of page that has been designed so its content can be included in other pages. This helps to standardize what and how information is presented on your wiki pages. Since a given template can be included in many pages, it can help reduce duplication and promote a uniform style between pages.

Here you can see another screenshot from marvel, but this time from the Iron Man page. This is using the same character infobox as Captain America, so you can see the color, design and basic content it displays is the same, but with iron man’s specific details. There is an image, the characters real name, alias and other parameters that have been defined by the marvel community.

Using templates lets you standardize content, design, size, placement and much more. It also means that if you want to update any of these elements, you just need to update the template page and all pages using that template will be updated. This saves a lot of time, and is more efficient. It allows you to keep more complicated code on the template page, and keep your wiki page less cluttered.

Templates Webinar April 2013 Slide08
Adding a template in visual mode

When you hit edit, and are using the visual editor, templates are represented by green puzzle pieces. If you hover over icon, the template it represents will load.

The popup will show you the name of the template, as well as a preview of its current state on the article. Template names begin with Template:, such as Template:Character, which is also the URL where the template is pulled from. Here you can see we are on the Game of Thrones Wiki, on the Arya Stark page. There is an infobox about Arya, and the template it is using is Template:Character. If you would like to edit the template, you click on the edit link on the bottom of the popup.

Templates Webinar April 2013 Slide09
Adding a template in source mode

Here you can see the same article, but now we’re editing it in source mode, with the template information fully presented and editable. In source mode, you can tell its a template because it starts with two curly brackets and then the name of the template. Here you can see that - the first line contains {{Character and is then followed by various details about Arya Stark. Each parameter is listed on a separate line, and contains specific wikitext which we will get into later.

Templates Webinar April 2013 Slide10
Editor & Templates

When you add a template to an article, in the editor you can choose from one of the four default choices provided in the right rail of the editor or search for others on your wiki by clicking on the ‘Add other templates’ link below.

The list of four templates shown can be edited by an admin at MediaWiki:Editor-template-list. So if your community uses a template very frequently, it might be a good idea to add it directly to the editor here.

Templates Webinar April 2013 Slide11
Searching for Default Templates

So, say for example your wiki contains spoilers, you may want to warn your audience prior. Many wikis put up a spoiler template to warn readers. Spoiler is a default template, so all you have to do is click “Add other templates” and then type in the name of the template you want to use, as I did here with spoiler. Click the name, and it will automatically be added into your editing window. When you hit Publish, it will then be on the page. This template can be edited on its template page, so at Template:Spoiler. You can go to there to adjust what spoiler text says, as well as the style.

Templates Webinar April 2013 Slide12
Template Editor

If the template has parameter information, as in this example infobox, a second dialog called the ‘Template editor’ will appear. This allows you to add specific content to the infobox and get a visual representation before it’s added to the article. This editor is also what appears when you click edit on the template popup in the visual editor.

Templates Webinar April 2013 Slide13
Adding Infobox Details

Here you can see an example I created for my orchid garden wiki. I am adding an infobox for the orchid type Vanda. I’ve added a title and image, have defined the image size, and have included a variety of other information for the infobox. I then clicked preview, and saw how the template will appear. Once I’ve added all that I wanted to, I clicked OK. The template will then be added to the edit page. You will still need to click Publish from within the editor to put the template on the article. To edit the template again using the template editor popup, simply hover over the puzzle piece, and click edit.

Templates Webinar April 2013 Slide14
Adding Parameters in Source Mode

If you are editing in source mode, you start the template with {{ followed by template name. Then each corresponding parameter goes on a new line, with a | at the start of the line. This tells the system to enter the information provided into the corresponding template line.

So here you can my infobox for the Vanda orchid again but in source mode. At the start is {{ Infobox, and then on the next line there is a | [pipe] with text ‘Box title’ following it. This is the line for the title of the infobox. So after the statement box title, there is an equal sign, after which, you add the text you want to appear. So there I put the name of the orchid type Vanda. This is then followed by other parameters including the image I want displayed and other details.

Templates Webinar April 2013 Slide15
Hi George!


Templates Webinar April 2013 Slide16
Default Templates

When a wiki is created we include a number of default pages. This includes quite a few template pages, some of which you can see listed here. These can be found by visiting the Templates category on your wiki or by filtering Special:AllPages by the template namespace.

These are generally basic templates to give you something to start with, and we highly recommend you customize them to match your wiki’s topic and theme.


Templates Webinar April 2013 Slide17
Editing a Template

Anyone can use a template, and most of the time anyone can edit them, although heavily-used templates are sometimes protected by a wiki’s admins. To start, visit the template page. For most default templates on Wikia you will see documentation below the template, helping to explain how the template works.

Templates Webinar April 2013 Slide18
Editing a Template

Here we are looking at the default template for a character infobox, found on Template:Infobox_character, with an example of how it would appear in an article on the right.

What can you modify? There are two main areas - the design, which uses simple wikitext HTML and CSS, and the parameters. Parameters are what allow you to customize a template for the article it is placed on. For example, they can be used to define various aspects of a character’s attributes, or to choose a specific image.

In this example here you can see that the basic parameters for Infobox character include: title, image, imagecaption, position, age, status, height and weight.

Templates Webinar April 2013 Slide19
Editing a Template

If we click edit, we can now see the template code itself. The editor always uses source mode in the template namespace, since the concept of a visual editor there simply makes less sense. Though this page may look complex, we will walk you through each line now so you are more comfortable when you see this on your own wiki.

Templates Webinar April 2013 Slide20
Editing a Template

The first line we see begins the infobox. Let’s review some terminology you will see and cover which you should adjust, and which you can simply leave be.

onlyinclude - highlighted in blue here - tells the software to only put a specific part of the template page on the article.

{| - highlighted in orange here - indicates that infobox is made from a table, and this tells the system that the table is starting. You can see its opposite at the other end of your infobox, |}, which will close the table. Infoboxes often use tables, which is evident in their design, and so often have the same general wikitext code.

class=‘wikia-infobox’ - highlighted in green - calls in the standard Wikia CSS for infoboxes, giving the infobox a basic layout and theme. Some wikis apply specific CSS for specific templates, and they do so by adjusting which class is named. Whenever you see class listed like this, it means that the template is calling CSS code either from Wikia itself, or from the wiki’s own custom CSS pages.

Templates Webinar April 2013 Slide21
Editing a Template - Parameters

Next you begin to see the parameters starting to be defined in the infobox, highlighted in orange. Again this infobox is made from a table, so you will see the wikitext for a table row, followed by the parameter itself. You can recognize a parameter because it is contained within a set of three curly brackets ({{{) - for example, {{{title}}} is a parameter here, along with {{{image}}}, {{{imagecaption}}} and more below.

The other thing you can see on the Infobox character parameters is a ‘default’ setting. For example writing Unknown it means that if you don’t specify the title parameter when including the template on an article, ‘Unknown’ will appear instead. Similarly, 210 means that the default width of the image in the template will be 210px wide. These are all defaults that can be adjusted locally on your wiki by simply editing the template.

When you put a template on an article and write the various inputs, basically all that is happening is that it takes this Infobox character page, puts it on the article, and replaces the stuff in triple brackets with the corresponding inputs you chosen. You can do a few different things with parameters. Infobox character uses ‘named’ parameters. Essentially this means the parameter has a name, such as “title”, which is how you refer back to it when putting the template on an article.

If you want to change the order of what appears in the infobox, all you have to do is change the order on this template page. Remember all of these changes take place live, so it will affect articles using the template immediately.

Templates Webinar April 2013 Slide22
Editing a Template

Here again is the default character infobox - you can see the parameters we just called out. The top unknown on left, is the title, which you can see has been replaced with ‘superman’ in the right example. The Image is below, and then the remaining parameters including the position, age, status and so on.

Templates Webinar April 2013 Slide23
Template sections & columns

Most infoboxes are broken into sections, such as name, vital statistics and physical attributes. This helps to organize the infobox. Here, you can see the code to create a section highlighted in green. The div with a class, wrapped around the section title, tells the system to create a separator line above the name of that section.

The start of the line, colspan, refers to how many columns are in that section - and in this case there are two - the column with the labels on the left, and the column with the character information itself on the right.

Templates Webinar April 2013 Slide24
Example

So here is the same slide again, and the arrows show you the separator line and the two column layout.

Templates Webinar April 2013 Slide25
Editing a Template

The next row includes an ‘if’ statement. #if statements are something that a lot of bigger templates use, because it lets you drastically alter how a template functions based on the inputs written on an article page.

For example, one use might be to hide a whole section of the template unless a certain input was defined. In this template the effect is that if you don’t write an ‘imagecaption’ input, that whole table row is skipped.This helps to combat having to show blank cells or “unknown” if a parameter isn’t defined.

The basic form of an ‘if’ statement is then show this (orange)

Templates Webinar April 2013 Slide26
Editing a Template

To adjust a parameter name, simply adjust the text that is listed within the {{{ as well as the label before it. So in the example here, if you wanted to change Age to Birthdate, you would adjust the text on the two lines that say Age, highlighted in blue.

If you would like a parameter removed, you will need to remove the start of the table row, so the |-, the name and the {{{. So here, if you wanted to remove age, you would remove all 3 lines highlighted in blue.

If you would like to add a parameter, you can simply copy all 3 lines, add them in the location you would like, and adjust the name. So you would copy the |-, age, and {{{ rows and then adjust the text to say, perhaps, Family.

Templates Webinar April 2013 Slide27
Template Style

If you want to add more color to your infobox, you can, via the use of more CSS or inline styles. We’ll cover inline styles in this webinar, because they are simpler to explain.

Almost every aspect of an infobox can be adjusted - the style of the box, the style of the text, the background, the size, placement and more. Each element can be controlled on the template page, and can be applied to a particular section or the entire template.

It’s important to keep in mind that templates are meant to be included on many pages, across your wiki. Remember this as you customize the style.

Templates Webinar April 2013 Slide28
Template Style

To change the look of the template, you will want to add style elements within the section of the template you want to modify. To apply it to the entire Infobox character table, add it to the first line of the table, where the wikia-infobox class is written.

For example here you see on the first line the class = “wikia-infobox”, followed by the style definition style="background-color:#DDEEFF;" This defines the color for the background of the infobox. The color code is a hex code for light blue. You can find a big list of corresponding hex codes on our color help page.

Templates Webinar April 2013 Slide29
Template Style Example

Here you can see the results of adding the color style. The infobox background has become light blue.

Templates Webinar April 2013 Slide30
Template Style

Individual rows can also be customized in a similar fashion by applying styling to those specific rows. For example, you can change the title text blue with this code: style="color:#3366FF;" The result can be seen on the right - ‘Unknown’ is now written in bright blue.

Templates Webinar April 2013 Slide31
Style Adjustments

If you want to make further line style adjustments, you can keep adding attributes on the same table row in the infobox code. Here you can see for the title row style, we now adjusted the text alignment to center and increased the font size to 250% of standard. These adjustments could be applied to all elements of the infobox, and to do that you would add them to the first infobox line, along with the background color. Again, if you wanted to just row specific adjustments, such as for the image, you add the adjustments to the line that controls images.

Templates Webinar April 2013 Slide32
Examples

Infoboxes and templates come in all shapes and sizes on Wikia. Some wikis use the default with small adjustments, others make more major changes. Here you can see a couple of examples.

Here we have a weapons template from Wowwiki, showing Sulfuras, and the old & young man templates on Runescape Wiki. Runescape have done a great job of actually allowing you to click and see the characters in older and younger states. This an advanced customization, and a fun one to discover on our site.

Templates Webinar April 2013 Slide33
Examples

Some wikis have even modified their infoboxes to look completely different. For example, the Arrested Development Wiki uses a banner design to great effect, such as seen on the Tobias Funke article.

It has a large, high-resolution screen capture of the show as the background, with a semi-transparent banner across the bottom showing the basic details of the character.

Templates Webinar April 2013 Slide34
Navbox Template

We have mostly talked about infobox templates so far, but there are of course many other kinds. Another popular type of template is a ‘navigation box’, which are generally used at the bottom of pages to aid navigation between related articles. For example, Fallout Wiki uses navboxes to make it easy to switch between major locations from the various games.

Templates Webinar April 2013 Slide35
Other Templates

Wikis that have a wide variety of sources might have a template that helps refer to the various sources. For example, Scrubs Wiki has a template simply called ‘L’ which is used to replace the short name for an episode - such as ‘3x19’, the nineteenth episode of the third season - with the full name of the episode - ‘My Choosiest Choice of All’

One of the great benefits of templates is their amazing flexibility. I talked about if statements earlier, but there are other related abilities. For example, other special codes can let you change how the template works based on whether an input matches one of several specific choices, or whether a certain article exists. Collectively these are generally called ‘parser functions’, and you can read more about them on our parser functions help page.

Templates Webinar April 2013 Slide36
Best Practices

Given all this wondrous variety, the resulting templates can sometimes be overwhelming to newer users - and sometimes even the very experienced! However, there are some fairly simple things one can do to try and make sure more people can read and understand a template.

Good documentation is probably the easiest and best improvement one can make. You could either use the Template:Documentation setup that comes with new wikis, or simply include some text within noinclude tags on the template page. Anything contained within this tag won’t be used when the template is put on an article, but will still be shown on the template page itself.

Using line breaks and comments to help separate sections can make the code much easier to read. Text contained with the comment markers will only ever show when viewing the wikitext of that page, and means you can also use them to include some documentation within the template wikitext itself.

Templates Webinar April 2013 Slide37
Best Practices

More generally, it is also a good idea to try and keep templates fairly simple in scope. For example, it’s probably best to have separate infobox character and infobox episode templates - while you could use advanced code to combine them, the resulting wikitext may be much harder for a user to read and understand.

Another pitfall is using lots of templates within templates - we call this nesting templates. While there are sometimes good reasons for doing so, doing it too much can make the results really difficult to follow as the user has to try and understand five templates at the same time rather than just the one he or she is looking at.

Another top tip is to try and test big template changes on a separate page - that way, if you happen to accidentally break something, it won’t affect all the articles using that template.

Templates Webinar April 2013 Slide38
Q&A


Templates Webinar April 2013 Slide39
Resources



Other Webinars

Appears on these pages
of

  • Webinars

    Wikia Webinars are monthly presentations provided by the Community Support team to provide live...

  • Help:Templates

    A template is a special type of page that has been designed so its content can be included in...

  • Help:Video tutorials

    Below are some helpful videos for Wikia trainings, tips, and tricks. Be sure to check out Wikia...

See full list >

Appears on these wikis
of

File history

Click on a date/time to view the file as it appeared at that time.

Date/TimeThumbnailDimensionsUserComment
current20:00, April 29, 2013Thumbnail for version as of 20:00, April 29, 201325:301,080 × 607 (28 KB)Sarah Manleycreated video

Around Wikia's network

Random Wiki