Community Central

Templates 101 Tips for editing & creating templates on Wikia

86,604pages on
this wiki

From Youtube



Aired February 10, 2012

This webinar provides a detailed instruction on embedding and customizing templates, with a specific look at infoboxes. Watch this recording to learn how to adjust a template to match your wiki's content and design.

Slides & Transcript

Templates Webinar Slide01

Welcome to the February Webinar, Templates 101: Tips for using & editing templates on Wikia. I am Sarah Manleya community manager here at Wikia and I want to thank you all for joining us.

Templates Webinar Slide02
Types of Wiki Pages

On wikis, there are many types of pages, including content pages, main pages, user pages, talk pages, forum posts, blog postsand more. Most of these pages have different purposes and are used in different ways. And with the variety of wikis found across Wikia, depending what wiki you are on, you will see even more diversity.

Templates Webinar Slide03

With the variety of pages and a multitude of users, this can lead to many different page designs, formats and layouts. Mismatched pages can get a bit confusing, so in order to keep a consistent look we recommend using Templates.

Templates Webinar Slide04
Intro to Templates

Templates are a special type of element that are designed so they can be included on many pages. They provide a basic layout with standard colors, formatting, borders and attributes - all decided by the community to match its theme and topic.

Templates Webinar Slide05

Intro to Templates

Templates have additional benefits beyond creating just a consistent look, they also allow you to:

  • Insert recurring messages to pages in a consistent way
  • Easily add a large amount of information that is frequently used
  • Update multiple pages at once

Templates Webinar Slide06

Across Wikia there are many types of templates - including welcome messages, user page templates, and character templates. They can be as large as taking up a whole page, or a small as a couple of lines. They are often used to ask for help, request a change to a page or as a means of making specific content stick out.

Templates Webinar Slide07

Today, we will be chatting all about templates. The objectives of this webinar are to :

  • Introduce the basic elements of templates
  • Overview how to add a template to a wiki page
  • Learn how to adjust the basic parts of an infobox

Templates Webinar Slide08

To help us meet those objectives today, we have with us Tim Quievryn, a community manger here at Wikia. I will start by taking us through how to add templates to your wiki pages, and Tim will show us how to modify infoboxes to better match your local wiki’s theme and topic. At the end we will hold a Q & A, so feel free to submit questions throughout the session.

Templates Webinar Slide09
Default Templates

When you create or join a wiki, you will see that you already have a number of templates that come automatically with your wiki. There are in fact over 120 basic templates available. You can jump right into using any of them or adjust them to better match your wiki. To find them, visit Special:Allpages. Here you will find a list of all pages that exist on your wiki. In order to see just the templates, use the namespace dropdown and select the template namespace. You will then see all of the available templates, and can click through on each one to access it.

Templates Webinar Slide10

With all of these templates you might wonder which are the most popular? The answer is infoboxes!

An infobox template is used most often as a quick summary for the page. Infoboxes are like fact sheets or sidebars seen in magazine articles. They quickly summarize important points into an easy-to-read format. Here you can see an infobox of Jeff Gordon the race car driver. The infobox provides a picture, and lists where he is from, his birthday and awards he has won.

Infoboxes can be used for characters, episodes, albums, books and much more. You can adjust them to fit what works best for your wiki. They help to make it easier to quickly find important information and to compare it with other similar pages.

Templates Webinar Slide11
Embedding a Template

So how do you add a template to your wiki page? Start by clicking the edit button. Once the visual editor loads you will notice on the bottom of the right rail a module called Templates. In this module you will see the 4 most popular templates including an Infobox. This is most basic infobox template. Here we want to add an Infobox for a character, so we will click on “Add other templates”

Templates Webinar Slide12

Embedding a Template

Once you click on add other templates, a pop up will appear that lists all other available templates. Find the one you would like, and click on the link. Today we are going to choose Infoxbox character.

Templates Webinar Slide13

Embedding a Template

Once you choose your infobox, a popup will appear that allows you to easily input content relevant to your character. The input fields are determined by the design of the infobox. Here you can see we are creating an infobox about Mona Lisa. We are able to add her name, a picture and much more information.

Once you have added the relevant information into the fields, you can hit the preview button and a preview of your infobox will appear on the right. This is a great way to see how it will look before its live on your page.

Templates Webinar Slide14

Once you hit ok, you will notice that while you are editing in visual mode, your infobox will appear as a puzzle piece. Don’t let this worry you. If you hover over it, you will be able to get a preview of the infobox, and have quick access to editing it.

Templates Webinar Slide15
Source Mode

Source mode is a bit different then visual mode. Infoboxes here will appear as written content with special wiki text code around them. Its important to maintain this code to get the template to appear correctly. Things you should note:

  • Use {{ }} at the start and end of the template - this basically opens & closes the template, telling the software where it starts and ends and what information to include.
  • Start with the name of the template - its important to list it right after the first brackets
  • To fill in an attribute, add new line with the attribute’s name & the specific content - such a gender then female.

Here you can see an example of our mona lisa character infobox in source mode.

Templates Webinar Slide16
Page Layout

Once you’ve hit save, you will see your infobox live on the page. Infoboxes generally align to the right of the page, but you can adjust if that is desired on your wiki. The content will wrap around the box to give a nice flow to the page. As with all wiki content, you can edit and update it at any time.

Templates Webinar Slide17

Now we will move onto Tim’s segment where he will walk us through how to adjust an infobox to match your wiki theme and needs.

Templates Webinar Slide18
Customizing a template

So you might be wondering what can you adjust to an infobox to match your wiki’s theme? Here you can see a list of options which are pretty much endless! You can adjust the infobox’s size, color, font, alignment number of attributes, and much more.

Templates Webinar Slide19
Customizing a template

Once you get an idea of what you want to adjust, how do you do it? First you need to find the template. As Sarah mentioned earlier, you go to Special:Allpages, filter by the template namespace, pick the infobox you want, then hit edit. The example we provided here is Template:Infobox_character, which is by default on every wiki.

So what can you modify? There are 2 main areas - the parameters, which are the attributes in the infobox and the design, which is the inline css and html

Parameters refer to the attributes listed in the infobox, so for example the character’s age, gender, birthplace or physical attributes. These provide a place in the infobox where you can list the content that’s specific to that character/person. So as we see here with Jeff Gordon’s infobox, the parameter was birthplace, and the specific content listed was Vallejo, California. You could adjust this to whatever it is.

You can also adjust the infobox’s design. As I mentioned in the slide previous, you can adjust the number of columns, image, colors, font and much more in your infobox. I will now walk you through how to make some of these adjustments.

Templates Webinar Slide20

So lets start by looking at the code that comes with your wiki for Character Infobox. Now at first this looks a bit scary - I know - but don’t be scared! We are going to break down what all of this means, and take a step by step approach on showing you how to adjust it.

Templates Webinar Slide21

Let’s start from the top. You’ll probably notice if you’ve been on Wikia for a while that infobox code looks very similar to a table code. Thats because an infobox is in fact just a simple table. The very first line, which is highlighted here, controls the entire infobox - so making adjustments to it will affect the infobox as a whole.

Templates Webinar Slide22

The next section controls the first header. You know this is a new line because of the pipe and dash, which I have encircled in red here. The code listed here controls the title, size, color and font seen in the header. We will overview how to tweak all of this once we review all the lines.

Templates Webinar Slide23

The next down controls the design for just the image – allowing for adjustment to the image width, padding, background color & caption.

Templates Webinar Slide24

The next section of code refers to the second heading, which is very similar to the first heading, and you are able to adjust the same type of attributes - the background color, font size, alignment, padding and much more.

Templates Webinar Slide25

The last section controls the style of the parameters, which remember lists the attributes for the character. Here you can set what the design will look like, as well as add and remove parameters that are appropriate for your wiki. In this example we are showing just two parameters. One thing we want to draw your attention to is the width, we have it defined here to make sure that long pieces of information display well.

Templates Webinar Slide26
Template Codes

Within the code you will notice a couple of terms that might not be familiar to you. These include:

  • Class – This tells the code to check the local CSS to see if any style has been set there - if it has been set it will be pulled into the infobox design

Templates Webinar Slide27

As you can see here, the class for this code is infobox

Templates Webinar Slide28

The next is colspan. Colspan refers to the number of columns a certain cell will take up.

Templates Webinar Slide29

In the infobox shown here, the headers takes up 2 columns, so it would has a colspan of 2.

Templates Webinar Slide30

And lastly style – This is the term used in the code to define specifics styles such as the size of the font, width, colors, etc

Templates Webinar Slide31

Here you can see the styles defined, including the background and font color. We are now going to spend the next couple of slides focusing on how to make adjustments to the design.

Templates Webinar Slide32

So now let’s look at adjusting the first line, which controls the default design.

Templates Webinar Slide33
Adjusting Font Size

Let’s start by adjusting the font size, which you can see in red here. The standard is 89%, which you can see on the left hand screenshot. You can adjust the number to be bigger or smaller and it will impact all text within the infobox that doesn’t have extra customization. Here on the right I set it to 189%, which made all of the text larger.

Templates Webinar Slide34

Adjusting width

The next option is the width of the infobox. This will determine how much of the content area the infobox will take up. The standard width is 300 pixels, which you can see on the left. On the right, I made this wider to 500px. You can also use percentage points, which is sometimes easier to visualize what 25% or 50% of a page is. So just replace “300px” with “50%”

Templates Webinar Slide35

Adjusting header

Now lets look at adjusting the header, which is the next line of code. This code affects ONLY the header, and no other parts of the infobox. It also overrides the default code from the first line, so allowing for specific changes to only that area.

Templates Webinar Slide36

Let’s start with color. If you want to change the color of the header, you need to adjust the background color, highlighted here in red. The numbers and letters after the number symbol are what determine that color. These numbers and letters are what are called a hex code. We have a giant list of these colors and corresponding hex codes on our color help page, found on our help wiki. In the pictures here, you can see I adjusted the color by changing the hex code of the background color to FF00FF - which you can see in bright pink.

Templates Webinar Slide37
Font Color

You can also adjust the the font color. To do this, you need to simply change the hex code listed after the word “color”. Here you can see I went from white text to yellow text by changing the hex code to FFFF00.

Templates Webinar Slide38

The next area you can adjust is the padding. Padding is the amount of space around the content, meaning the area around the text or an image. 1em is the default padding. “em” is a bit tricky to explain but 1em is equal to one character in the current font size. So if the font size was 12, 1em would be the equivalent size of one letter in 12-point font. If the font-size was 14, 1em would be the equivalent size of one letter in 14-point font.

If you increase this number, as I did here on the right, the header area becomes larger around the text. This area is now 4 times the size of the font. If em is a bit hard to understand, you can always use pixels (px).

Templates Webinar Slide39
Image Adjustments

Now we will move onto code that controls the design of the image. To start, lets look at alignment - which can be added or used throughout the infobox - but because its listed in this line it will affect only the image.

The standard to align the image in the center. This is default across all infoboxes and personally I would recommend leaving it center-align to keep a good flow. But if you did really want to change it, you are more than free and here is how. In the right screenshot I changed it to right alignment, and you can now see that the image is aligned to the right. If you would like left aligned, you simply need to change where it says center to left.

Templates Webinar Slide40

You can also change the placeholder image to have an image that better matches the theme or topic of your wiki. In this example, we are replacing the placeholder image of Mona Lisa with a placeholder image of flowers, which might be a nice touch for a gardening wiki for example. You can see from the highlighted line that the Mona Lisa is Image:Placeholder person.png, so to insert the flowers image you can upload a new version of Placeholder person.png or you can upload an image to your wiki called Placeholder flowers.png and then change that part of the code to match.

Remember, when actually adding the template to a page, you should try to define the image parameter with an image that matches the character. The placeholder will only appear if the person adding the template to the page does not define a custom image.

Templates Webinar Slide41

You can also make the default image size larger or smaller by simply changing the number of pixels in the code. The standard shown on the left is at 250px, whereas the right screenshot shows it adjusted to 150px. Because imagewidth is a parameter, users are always free to override the default size and make the size of the image however they want.

Templates Webinar Slide42

The next line of code refers to the second header, and allows for the same adjustments as the first header - simply change it on that line.The difference in design you can see, is that the first header has more padding than the second header. So if you were to want them to match, you would just need to adjust the padding.

Templates Webinar Slide43
Content Parameters

The last but certainly not least section is the parameters. These are obviously important because this is where the bulk of the information is displayed.

Templates Webinar Slide44

To adjust what content is listed as a parameter, simply adjust the text both within the quotations marks and the brackets. (illustrate)

Templates Webinar Slide45

These can be can also easily be added or removed, as seen here. Make sure you are adding and/or removing both lines, and that content will appear as you desire.

Templates Webinar Slide46

You might have noticed the styling at the beginning of this area - this controls how wide each column will be within the infobox. It does not change the width of the infobox as a whole, but rather what percentage of the box each column will take up. Here you can see the standard shows that the attribute is listed at 30% and then the character specific attribute takes up the remaining 70%. In the adjusted example, this was changed to 50-50.

Templates Webinar Slide47

That is the conclusion of the most important aspects of adjusting infobox code. I hope it covered some basic tips to help you make a standard infobox into one that works well for you wiki. A couple of things to remember:

  • Leave in all code in place, for example, any {{ }} | or -, these all indicate certain actions to the software and so make sure to not leave any out. If your infobox looks a bit off, double check that these are all in place - since they often are the cause of a breakage
  • Be careful to not add extra spaces - adding an extra space can lead to problems and not display your adjustments properly.
  • Preview your edits - Preview is one of the most helpful wiki tools - so make sure to use it to ensure the changes you made are ones you like.

Templates Webinar Slide48

As you work through these we know it can be tough - but just remember that your hard work will pay off. You can go from this basic template

Templates Webinar Slide49

To one with better colors, content and settings to match your wiki.

Templates Webinar Slide50

To ones that are completely customized like these. The options are endless so don’t feel worried and jump right in.

Templates Webinar Slide51

A couple of last steps you might want to consider:

  • Protect highly used templates - since a change to a template will change all the pages it’s included on, you may want to consider protecting highly used templates so only admins can make those adjustments
  • Talk with community when making changes - chat with folks on your wiki so they know changes are coming and can offer input
  • Check out what other wikis are doing - there are lots of amazing templates around wikia - so don’t be afraid to contact other wikis to ask how they made theirs great
  • Don’t be afraid to test in a test environment - test and test again - templates can take a while to master, so don’t be afraid if everything doesn’t work out perfectly on the first try, simply test in a place where it won’t affect other editors.

Templates Webinar Slide52

Templates Webinar Slide53

Other Webinars

File history

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

current23:11, April 5, 2012
Thumbnail for version as of 23:11, April 5, 2012
480 × 269 (10 KB)Sarah Manley (wall | contribs)

Around Wikia's network

Random Wiki