Customizing Your Signature.

Step 1. Basics[]

At first, you don't have to know how HTML works! A basic signature is easy to create even for those who don't even know what HTML is!

Before you begin, you need a place where you can create your signature! Most users do this as a subpage to their userpage. To create a subpage of your userpage for your signature, go to your userpage, add /Sig1 to the address in your address bar, and press enter. Voila! You are at your subpage. This will be the page you use to create your signature. If at any point while you're creating your signature, you want to see how you're doing, then press the Preview button on the editing tool bar that will be on the right when you edit your subpage.

This is our base:

<span style="property1:variable; property2:variable; property3:variable;...">TEXT</span>

What does it mean?! ~<span> is one of the HTML elements, it starts the code of our signature and ends the code. Think of it as a period at the end of the sentence. ~"style" is an attribute of your signature. ~property are the types of fonts, font colors, borders, background, etc.

Keeping up? Great! Let's move forward!

Step 2. Property![]

Font Face[]

At first you should choose your favorite font! Whether it be Times New Roman or any other, it's good! To add this property you have to write:

<span style="font-family:Times New Roman;">Your text</span>

	As you can see: <span> is on this place at the start, then you put "style=" and the thing you want to change. At the end put. Don't forget about ";" between the two Properties!

Font Size[]

You can change a size of your font in many different ways:

1. You can use x-small/large

If you add:	You will gain:
<span style="font-size:large;">Mudkip</span>	Mudkip
<span style="font-size:x-small">Mudkip</span>	Mudkip

2. You can put a %: 125% is large, and 50% is small

If you add:	You will gain:
<span style="font-size:125%;">Mudkip</span>	Mudkip
<span style="font-size:50%">Mudkip</span>	Mudkip

3. You can just use pixels

If you add:	You will gain:
<span style="font-size:20px;">Mudkip</span>	Mudkip
<span style="font-size:10px">Mudkip</span>	Mudkip

Font Color[]

There are two ways to add a color:

1. Write color's name

If you add:	You will gain:
<span style="color:red;">Mudkip</span>	Mudkip

2. Put a hexadecimal codes code

If you add:	You will gain:
<span style="color:#ff0000;">Mudkip</span>	Mudkip

Don't forget about "#" before the number!

Text Decorations[]

If you want to decorate you text by using underline or line through it's of course possible:

If you add:	You will gain:
<span style="text-decoration:underline;">Mudkip</span>	Mudkip
<span style="text-decoration:line-through;">Mudkip</span>	Mudkip

You can also mix them together!

<span style="text-decoration:underline line-through;">Mudkip</span>

It will look like that: Mudkip

As you can see between underline and line-through isn't any punctuation mark just space!

Text above and text below[]

If you want to add a special look to your signature you can put text above (superscript or sup) or text below (subscript or sub).

If you add:	You will gain:
Mudkip<sup>Pokémon</sup>	Mudkip^Pokémon
Mudkip<sub>Pokémon</sub>	Mudkip_Pokémon

Step 3. Background![]

Wow! Now your text look great! It's time for a background!

Adding a background doesn't bring anything new. You can use a color's name or hexidecimal codes just like in the case of font's color.

If you add:	You will gain:
<span style="background-color:red;">Mudkip</span>	Mudkip
<span style="background-color:#BEBEBE;">Mudkip</span>	Mudkip

Step 4. Border![]

Basics[]

Now when you have a border it's time to frame it!

If you add:	You will gain:
<span style="border:3px solid red;">Mudkip</span>	Mudkip
<span style="border:3px dotted red;">Mudkip</span>	Mudkip
<span style="border:3px dashed red;">Mudkip</span>	Mudkip
<span style="border:3px double red;">Mudkip</span>	Mudkip
<span style="border:3px groove red;">Mudkip</span>	Mudkip
<span style="border:3px ridge red;">Mudkip</span>	Mudkip
<span style="border:3px inset red;">Mudkip</span>	Mudkip
<span style="border:3px outset red;">Mudkip</span>	Mudkip

As you can see, after "border" property is (in order) size of your border (in px), type of border and color. Don't use punctuation between those three!

Round Corners[]

If you want to change corners to something more rounded, you have to change the radius of the border! Don't worry, it's easy, you just have to do the simple task of adding:

{{border-radius}}

If you add:	You will gain:
<span style="border:3px solid red; {{border-radius\|1em}}"> Mudkip</span>	Mudkip

Oh you're not satisfied?! You want to change every part of the corner?! Done!

As in the previous example you have to add it, not with one variable, but four!

If you add:	You will gain:
<span style="border:3px solid red; {{border-radius\|2em 1em 1em 0em}}"> Mudkip</span>	Mudkip

Each number represents different part of the frame, if you want to call it it will looks like that: {{border-radius\|top-left top-right bottom-right bottom-left}}

Step 4. Center the text![]

You now have a border and a background! Still you you realize that you're text should be a little bit more removed from the frame. You have to add some paddings!

If you add:	You will gain:
<span style="padding-left:7px; border:3px solid red; {{border-radius\|2em 1em 1em 0em}}"> Mudkip</span>	Mudkip

Step 5. Images![]

You wanna add a picture? No problem! Adding a picture is the same as putting one on the page:

If you add:	You will gain:
[[File:Pokémon_Mudkip_art.png\|120px]]

But on a signatures you're not allowed to put pictures any bigger than 35 px, how you should do this without losing its quality? Simple! Instead of 120px you put 0x35px.

If you add:	You will gain:
[[File:Pokémon_Mudkip_art.png\|0x35px]]

You can of course add a link to wikia or other external link:

If you add:	You will gain:
[[File:Pokémon_Mudkip_art.png\|120px\|link=User:Reinforced Cookies]]

Step 6! Final creation![]

Now its a time to put it togeter!!!

For example I'm Reinforced Cookies and I wanna have my signature black with teal dotted border, with Times New Roman font, one corner rounded and Mudkip on it!

1. A first I will put My catchphrase which is Cookies? with the infos about border and background:

If you add:	You will gain:
<span style="background-color:black; border:3px dotted teal;">[[User:Reinforced Cookies\|Cookies?]]</span>	Cookies?

2. Then I will make some round corners:

If you add:	You will gain:
<span style="background-color:black; border:3px dotted teal;{{border-radius\|1em 0em 0em 1em}}">[[User:Reinforced Cookies\|Cookies?]]</span>	Cookies?

3. Doesn't look good? Add some paddings:

If you add:	You will gain:
<span style="padding-left:6px; background-color:black; border:3px dotted teal;{{border-radius\|1em 0em 0em 1em}}">[[User:Reinforced Cookies\|Cookies?]]</span>	Cookies?

4. I'm changing the font (look WHERE I put it! Right before the text!)

If you add:	You will gain:
<span style="padding-left:6px; background-color:black; border:3px dotted teal;{{border-radius\|1em 0em 0em 1em}}">[[User:Reinforced Cookies\|<span style= "font-size:15px; font-family: Times new roman;">Cookies?</span>]]</span>	Cookies?

5. In the end I will add Mudkip

If you add:	You will gain:
<span style="padding-left:6px; background-color:black; border:3px dotted teal;{{border-radius\|1em 0em 0em 1em}}">[[User:Reinforced Cookies\|<span style= "font-size:15px; font-family: Times new roman;">Cookies?</span>]][[File:Pokémon_Mudkip_art.png\|0x35px]]</span>	Cookies?

Remember! If you want to modify your text, put your <span></span> with information about it right before the text you wanna change!

Step 7! Go! To the page![]

You have your code... What's next?! I will put everything in points:

You have to create a sub page of your User Page. You can do this by going to your user page and adding /Sig1 to the end of the url. After that, put all your code there. Save it!
Create another sub page ending in /Sig, then put there:
```
{{User:Your Name/Sig1}}
```
Save it!
Go to My Preferences and there on Signature part mark Custom signature and in the window put:
```
{{SUBST:User:Your Name/Sig}}{{SUBST:#time: H:i,n/j/Y}}
```
Save it!
When you sign your opinions, texts etc. Add three "~" instead of four, or you will double time and date part!