User:CatalinMetro/HowtoDo

=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 where you want to add it. If you only use numbered parameters- (,  ,  , etc.), the first parameter will resembol the  , the second will resembol  , etc. for example, here's an example template called PenguinInfo: My username is, and he is 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, and he is 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: Now, let's fill in the parameters. I want that: So, this is what i will add: Which will give:
 * 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

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 colorzilla.com. 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:

This will be the title for our navbox. On this example- i chose List of main pages. Now, to add the first row, add: Let's add it to our main template, name the group add some items. Between each item, we will add: · :
 * group1 = group name
 * list1 = items in group

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: And now let's add it:
 * 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 and  for doing this (see template for full instructions).

For example:

Will give:

=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: 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.
 * 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.

=Rotating HTML elements= In case you want to rotate an HTML element, such as a simple  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:  Would give: 

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

=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)).

{| class="collapsible collapsed" style="border: 1.5px solid #cccccc; border-bottom: 0px; background: #f2f2f2; padding: 2px; width: 100%" !style="background: #cccccc; text-align: center; padding: 2px;"|Expansion: making your custom toolbar (not updated) =Tool Bar/Image Map = This page will help you creating your own ToolBar for your userpage:

What is Toolbar?
I guess that if you read this, you play Club Penguin, too! :) If so, you probably know what the toolbar is. It's the blue bar at the buttom of the page, which contains the Chat Box, Speed Chat, Friend List, Igloo Icon, etc.

So what am i supposed to do?
Well, for making a basic toolbar, you need 3 things:
 * 1) A picture of a toolbar.
 * 2) some basic knowledge about wiki code (making links, etc).
 * 3) Being patient.

and how it's done?
I am giving you guidelines for making the ToolBar. all you have to do is to replace the bold words with your details. for example: will be replaced by:
 * user:USERNAME
 * User:Penguin-Pal (example)

Step 1
The first step for creating an Image-Map is to make some free space in a page. click where you want to place it, and press Enter a few times, in order to create a clean place to start creating the Image-Map.

Step 2
at the top of the space you've made for the Image-Map, add   at the buttom.

It should look like this:

Step 3
Now you need to choose a base image. The image mast be already uploaded to the wiki. if not, make sure to upload it first.

After choosing an image, add it a line below the '

for this example, i used This File, which can be seen in my user page.

Step 4
Now, you must decide from which corner your Image-Map would stard. you will need to add ' desc bottom-left ' It means you will have to set the corner, on which you will set the link's locations. It will be placed one line above the ' This it the most importand step of making the Image-Map: not doing it, the Image-Map wouldn't work.

Step 5
Now, after you chose the image file ant the corner, you need to find the Coordinate of the links. At start it sounds complecated, but believe me, it will all get clear after a few tries.

What you need to do is to add 4 numbers, that will, eventually, be the exact spot of the links you are about to make.

For adding Coordinates, you will have to add the word  rect  first. it is used for adding rectangle shaped areas that link from the picture to another page. After, tou will have to choose.

If you chose desc bottom-left (from step 4), each nomber will look like this resimbul:

rect 20 15 47 45


 * rect= the code that says "keep adding links" (rmember)
 * Left number (20)= the left side of the link.
 * Middle left number (15)= the upper side of the link.
 * Middle right number (47)= the right side of the link.
 * Right number (45)= the buttom side of the link.

After adding rect and the four numbers, add a link for the page: (example)

rect 20 15 47 45 [[Club Penguin Wiki