Step 1. Necessary BasicsEdit

At first you need a place when you can start creating your signature! Create a page named User:Your Name/Sig1. This will be your canvas on which you create it! If you want to check what it looks like click Preview!

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, which starts the code of our signature and </span> is like a dot at the end of the sentence. "style" is an attribute of your signature. Property are types of fonts, color of fonts, border, background and all that stuff

Keeping up? Great! Let's move forward!

Step 2. Property!Edit

Font FaceEdit

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</span>. Don't forget about ";" between the two Properties!

Font SizeEdit

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

1. You can use x-small/large

<span style="font-size:large;">Natsu</span>

<span style="font-size:x-small">Natsu</span>

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

<span style="font-size:125%;">Natsu</span>

<span style="font-size:50%">Natsu</span>

3. You can just use pixels

<span style="font-size:20px;">Natsu</span>

<span style="font-size:10px">Natsu</span>

Font ColorEdit

There are two ways to add a color:

1. Write color's name

<span style="color:red;"></span>

2. Put a hexadecimal codes code

<span style="color:#ff0000;">Natsu</span>

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

Text DecorationsEdit

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

<span style="text-decoration:underline;">Natsu</span>

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

You can also mix them together!

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

It will look like that: Natsu

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

Text above and text belowEdit

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

Natsu<sup>Dragneel</sup>

Natsu<sub>Dragneel</sub>

Step 3. Background!Edit

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.

<span style="background-color:red;">Natsu</span>

<span style="background-color:#BEBEBE;">Gajeel</span>

Step 4. Border!Edit

BasicsEdit

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

<span style="border:3px solid red;">Natsu</span>

<span style="border:3px dotted red;">Natsu</span>

<span style="border:3px dashed red;">Natsu</span>

<span style="border:3px double red;">Natsu</span>

<span style="border:3px groove red;">Natsu</span>

<span style="border:3px ridge red;">Natsu</span>

<span style="border:3px inset red;">Natsu</span>

<span style="border:3px outset red;">Natsu</span>

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 CornersEdit

{{border-radius}}

<span style="border:3px solid red; {{border-radius|1em}}"> Natsu</span>

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!

<span style="border:3px solid red; {{border-radius|2em 1em 1em 0em}}">Natsu</span>

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!Edit

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!

<span style="padding-left:7px; border:3px solid red; {{border-radius|2em 1em 1em 0em}}"> Natsu</span>

Step 5. Images!Edit

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:Chibi_Pantherlily.png|120px|Lily]]

But on a signatures you're not allowed to put pictures any bigger then 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:Chibi_Pantherlily.png|0x35px|Lily]]

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

If you add:	You will gain:
[[File:Chibi_Pantherlily.png|120px|Lily|link=Pantherlily]]

Step 6! Final creation!Edit

Now its a time to put it togeter!!!

For example I'm Ishthak and I wanna have my signature black with gray dotted border, with Times New Roman font, one corner rounded and Pantherlily on it!

1. A first I put My name which is Ishthak with the infos about border and background:

2. Then I will make some round corners:

3. Doesn't look good, add some paddings:

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

5. In the end I will add Pantherlily

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

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!Edit

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

1. 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!
2. Create another sub page ending in /Sig, then put there:

   {{User:Your Name/Sig1}}

   Save it!
3. 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!
4. When you sign your opinions, texts etc. Add three "~" instead of four, or you will double time and date part!