Cool *.gif animations · Creating Templates · Opacity for colors: using the RGBA model · Rotating HTML elements · Image Map · Tool Bar/Image Map

Cool *.gif animations


Creating Templates

To make a template, you need to create a page starts with the word Template: before the template name. For example, Template:Penguin Color.
In order to add parameters- for adding custom info in some places on the template, add {{{1}}} where you want to add it. If you only use numbered parameters- ({{{1}}}, {{{2}}}, {{{3}}}, etc.), the first parameter will resembol the {{{1}}}, the second will resembol {{{1}}}, etc. for example, here's an example template called PenguinInfo:

My username is {{{1}}}, and he is {{{2}}} days old.

Meaning the first parameter to come after the template name would be the penguin name, and the second would be the age of the penguin.:


This is just an example (and indeed- rockhopper is much older, but it was for the example).

For parameters with name, insert instear the parameter name instead of the number in the parameter. For example:

My username is {{{name}}}, and he is {{{age}}} days old.

Should look like this (although you don't have to go to the next line for each parameter- its just for the convenience):


Create Userboxes

As mentioned above, templates work on several parameters, that you can choose what to add to each one of them. Userboxes are small templates that give info about the user. This is the basic look of a userbox- it is made from a square on the left, a rectangle on the right (that contains the content), and a border:

|id= this parameter includes the content that will appear in the left square
|id-c= background for the square on the left
|info= this parameter includes the content that will appear in the right rectangle
|info-c= background color for the rectangle on the right
|border-c= border color

Now, let's fill in the parameters. I want that:

  • The square background will be the color aqua
  • The square will contain an image of a puffle
  • The rectangle background would be lightblue
  • The rectangle would say: This user loves puffles!
  • The border color will be black

So, this is what i will add:

|id= [[File:Puffle Portal.png|48px]]
|id-c= aqua
|info= This user loves puffles!
|info-c= lightblue
|border-c= black

Which will give:

Puffle Portal This user loves puffles!

Remember that if you add an image to the ID (square) pat, it should be 48px or smaller, otherwise the square will be too big.

Also, if you want to create a template, you create it like any other page, but remember to add Template: before the template name. For example:
A template called Puffle lover would be called Template:Puffle lover

Advanced options

You can also pick gradient colors for your ID and/ or Info boxes of the template. You can find a quick way for doing it via Just remember to remove the filter and xml gradients, that only work with CSS (i don't recommend using the filter in CSS either, as in the close future IE 8 and earlier versions will rarely be used, so it will be pointless to use it from the first place).

Navbox-based templates

Navbox is a special table that allows adding rows with a title on the left, and listed items on the right. Navbox is the basis for a large number of templates (full list). A good example for a small template is Template:EPuffles, that uses 1 row onle, and lists the Elite Puffles.

How to create a navbox-based template:

First of all, add to your template:



All the content will go in the middle.

Now, add:


| title = 


This will be the title for our navbox. On this example- i chose List of main pages. Now, to add the first row, add:

|group1 = group name
|list1 = items in group

Let's add it to our main template, name the group add some items. Between each item, we will add: {{·}}:

| title = List of main pages
|group1 = Mascots
|list1 = Rockhopper{{·}}Cadence{{·}}Gary

You can also replace some names with linke, like:
Rockhopper{{·}}Cadence{{·}}Gary → [[Rockhopper]]{{·}}[[Cadence]]{{·}}[[Gary]].

Now, we will add a second row. The parameters are: group2 and list2:

|group2 = Pffles
|list2 = Yarr{{·}}Lolz

And now let's add it:

| title = List of main pages
|group1 = Mascots
|list1 = Rockhopper{{·}}Cadence{{·}}Gary

|group2 = Pffles
|list2 = Yarr{{·}}Lolz

You can keep adding more rows and items as well.

Thumb animations

As you may know, when trying to create a thumb image of an animation, the server replaces it with a static image (unless the thumb size is very close to the original file. However, it is still not possible to do this in any size.

Howerver, you can sue the templates {{Thumb}} and {{SRC}} for doing this (see template for full instructions).

For example:

|image= {{SRC|1/1d/Cookie_emoticon_animation.gif}}
|file= File:Cookie emoticon animation.gif
|caption= Your image.

Will give:

Your image.

Opacity for colors: using the RGBA model

Making backgrounds with opacity is done using RGBA color, instead of the usual HEX code (such as #ff0000, which is in HEX). In order to make a background with RGBA color, add to any element the next background (for this example, i used the color red):

background: rgba(255,0,0,1);

The RGBA color is made from 4 important parts:

  • The brackets- where you insert the RGBA code.
  • The RGB code, which is the 3 first numbers inside the brackets. The numbers can be from 0 to 255- 256 options a total per color (red green and blue), means there are 2553 different colors available.
  • The Alpha color setting- which is the fourth number in the brackets, which is from 0 to 1. 1 is 100% opacity, and 0 is 100% transparent. In case you want opacity- just type (for example, if you want 30% opacity): 0.3
  • The word rgba, that HAS to come before the brackets, in order to use it.

You can find a basic color convertors/ generators here, however, if you have an advanced program in the computer, such as Photoshop, GIMP or Inkscape, th wwil be helpful for generating the colors you want.

Rotating HTML elements

In case you want to rotate an HTML element, such as a simple <div> element with background, you can do it by adding:

-webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg);

It will rotate it in 30 degrees. For example:

<div style="width: 30px; height: 30px; background: #ccccff; border: 1px solid navy; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg);"></div>

Would give:

font vs span

The <font> tag will not be supported in HTML 5, so here's a guide for you to be ready on time ;)

Technique <font> <span>
Text color <font color="red"> <span style="color: red;">
Font family <font face="Sans"> <span style="font-family: Sans;">
<span style="font-face: Sans;">
Font size <font size="4"> <span style="font-size: 20px;">
Other <font style="property: attribute;"> <span style="property: attribute;">

Image Map

In order to make image maps, you can use the following 3 sorts of links:
1. Rectangle: for making a rectangle-shaped areas for linking. For example:

rect 11 85 43 10 [[User:Ultimate Legend Star Kirby12]]
  • The first number is the distance in pixels from the left side of the link to the left side of the image.
  • The second number is the distance in pixels from the top side of the link to the upper side of the image.
  • The third number is the distance in pixels from the right side of the link to the left side of the image.
  • The fourth number is the distance in pixels from the buttom side of the link to the top side of the image.

2. circle: for making round shapes for the links. For example:

circle 525 30 15 [[User:Ultimate Legend Star Kirby12]]
  • The first number is the distance in pixels from the left side of the image to the center of the circle.
  • The second number is the distance in pixels from the upper side of the image to the center of the circle.
  • The third number is the radius of the circle (in pixels).

3. polygon: by using an ingredient called "polly" you can make custom shapes. Each two numbers that come after it resembols a coordinate- a corner in the polygon.For example:

poly 335 430 515 410 585 470 575 525 345 534 [[Town]]

You can read more about imagemaps Here (Mediawiki help pages). An example for an image map in the wiki can be found Here.

How do i determine the numbers of the image map?

The best way is to estimate the distance between the borders of the image to the border of the link (left and right borders to the left side of the link, and tup and buttom borders from the buttom part of the link). You can also open the image in an editing program, create a square in where you want the link to be, and then measure the distance in pixels using a special tool, if available.

Remember! if you use a smaller version of the imae, you must set the coordinates as if the image was in the fool size (therefor, in an image 1200px width and 700px height, if you set the width to 600px, the farthest corner will still be (1200, 700), and not (600, 350)).

Community content is available under CC-BY-SA unless otherwise noted.