User:Insaneular/Signature Tutorials

Hey guys! Since I noticed a lot of people don't know how to make custom signatures at all, this tutorial will go through the ins and outs of not only how to make them, but how to make them look good. XD It's gonna be kinda long and detailed, cause you know me, I like to ramble, and like my editing tutorial, I've written it to explain to people who have no experience with this whatsoever, so they can learn. If you know the basics, you can just skip to the code examples. But anyways. Here we go.

'''Please don't edit this page except the Sandbox, thank you. Also note that all the example sigs are made by their respective users, you can't just copy them with your username. They are there as examples only, not templates.'''

While making your sig, be sure you are familiar with the Signature policy!

Want a faster way to make a simple sig, without learning lots of coding? Check out Grayravenpaw's Signature Template!

=How to set up and Use a Signature=
 * Okay, here are the simple steps to set up a custom signature:


 * 1) Create a subpage to your userpage to store your signature coding. To do this, click this redlink which will let you create your subpage. This page is where you will be putting all your signature coding that you learn from this tutorial.
 * 2) On your Signature page, be sure to place the following code:  This will categorize your page properly. Make sure there are no extra linebreaks or blank spaces before or after this code!
 * 3) Now go to your preferences page, and check the box that says "Custom signature (Check this box to create a custom signature in the field above. The signature uses the same wiki markup that a regular page does, including links.)"
 * 4) In the signature input box, put this code:  and replace USERNAME with your username. This code, though it might look strange to you, will take whatever is on the signature page you just made, and use it as your signature when you type ( ~ ) or press the button that looks like this: [[File:Signa.jpg]] Now that you've gotten your signature set up, let's move on the the important part: Customizing!

=Customizing it=

What do you want each bit of text to link to?

 * The first thing you need to decide is what you want your sig to say, and what it should link to. One thing you need to have is your username (or a variation on it) link to your user page, and then some other text link to your talk page. Some people go farther, as to link to their editcount, contributions page, or any user sub pages they have (such as tutorials :P). It's up to you to decide what to link to but the User and User talk links are required for easy communication.
 * When deciding what text to put, a lot of people either have their username link to their userpage, then some other text link to their talk page or other pages; an alternative is to have part of your username link to your user page, another part to your talk page, or you could break it up letter by letter... The possibilities are endless. Just think of something, play around with it, till you like it. Anyways, now that you've decided that, let's move on to the more fun stuff.

Font Colors, Faces, Backgrounds and Borders

 * The simplest thing to add to your signature and the thing that pretty much every custom sig has. You can pick literally any color you want, you just need to find the specifications for it (but these depend on which code you're using). There are two different ways to specify color and font face (Font face is the style of the letters, what you'd call a font in Microsoft Word). They are the tag and the tag - The Font tag is from HTML if you're familiar with it, I think span might be from CSS or something (?) but I'm not sure. There aren't many differences between the two, but I'll go over them both. I personally find the font tag easier to use since I know HTML, and it is simpler, but some people prefer the span tag. It's down to your preference, as depending on what is going to be in your sig, some things are easier to do with each one. It's nice to know both if you're good at learning them :P

  :
 * As I said, if you already know HTML, this code is exactly the same. But for those who don't, it's pretty straightforward. With this, if you want to change the color of the font, you need to use the hexadecimal color code (With the exception of a few basic colors, like Red, blue, etc. that you can just type their names). Hex codes, for those who don't know, are just a way to specify colors to a very specific degree in coding. You don't need to memorize all the numbers, just use a color chart like this one to generate the code for you. Here's the code you would use, if, say, you wanted to make some blue text link to your userpage:

USERNAME
 * It comes out like this: USERNAME Just replace USERNAME with your username (duh) and if you want a color other than blue, just replace #3300CC with the hex code for your color. (Also: NEVER forget the at the end, or it will make all the text after your signature on the page turn a different color as well! Closing the tag makes sure that only your specified text is altered.)

Now that you know colors, to change the font face with this tag, You do something similar to changing color, here's an example: USERNAME
 * This would show up as: USERNAME Again, if you want a different face, replace the Tempus Sans ITC with your font title. I don't know all the fonts that work, but here are some you can use: (Note that some don't work on some computers, for unknown reasons) Curlz MT, Mistral , Teen , Papyrus , Century Gothic , Segoe Script , Goudy Old Style , BatangChe , Eras Medium ITC , Freestyle Script , and Comic Sans MS . (If you know any I've missed just message me and I'll add them)


 * If you want to add a background to your text, this is how you do it:

<font style="background:yellow">USERNAME
 * This would come out as <font style="background:yellow">USERNAME . As always color can be changed.

If you want to add a border around it as well, do this: <font style="background:yellow; border:2px solid -moz-border-raiuds: 1em; orange;">USERNAME This would show up as: <font style="background:yellow; border:2px solid">USERNAME You can change the thickness of the border by changing the number before px (<font style="background:yellow; border:5px solid">USERNAME ) or the style of the border to dashed (<font style="background:yellow; border:2px dashed">USERNAME ) Unfortunately, I don't know how to change the border color with the font tag, that is one advantage the span tag has. (If anyone knows the problem please tell me XD)


 * Note that if you're changing, say, color and font face, you don't need separate font tags, you can combine them, like so!

<font color="#3300CC" face="Tempus Sans ITC" style="background:yellow">USERNAME
 * This comes out as: <font color="#3300CC" face="Tempus Sans ITC">USERNAME.

 <Span> :
 * As I said, to me, the Span tag seems more complicated... but to others it might be easier. Also, it does have the advantage of a few fancier effects, but if you're going for something simple, the HTML codes are easier in my opinion. Anyway, here's how you change color with Span:

USERNAME
 * This comes out to: USERNAME . Note that with Span you can still replace the color with a hex code if you want to get more specific, but it has the advantage of having MANY more colors that you can just type in their names for so you probably won't need to use hex codes with this one. here's a list of a lot of colors (not sure if it's all) that you can use with span: <font color="#ffffff" style="background:Black">White, Silver, Thistle, Violet, Orchid, Fuchsia, Magenta, Crimson, Red, Tomato, Salmon, Orange, Goldenrod, Wheat, Khaki, Yellow, Olive, Green, Lime, Aquamarine, Cyan, Aqua, Turquoise, Teal, Blue, Navy, Purple, Chocolate, Brown, Maroon, Saffron, Black.


 * To change the font face with span, type the following:

USERNAME
 * This will be: USERNAME  Once again, you can use any of the faces listed in the above section instead of Tempus Sans ITC.


 * To change the background with span:

USERNAME
 * Will show up as: USERNAME  This one is basically the same as the font tag for it, as you've probably noticed. Works the same way, too.


 * To a border with a background:

USERNAME It will look like: USERNAME. The border's thickness is changed the same way as in with the HTML tag, and the color is just changed the same was as for changing the text color, just in the different place. The border can be changed to a dashed or dotted style by replacing the "solid" with those words. Note that with more than one thing being changed in the span tag, you just put one right after the other, with a semicolon separating them.
 * You use that same method when combining all the elements with the Span tag, so if you were changing all the attributes, it might look like this:

<span style="color:red;font-family:Tempus Sans ITC;background:yellow;border:1px solid; -moz-border-raiuds: 1em; color:red;">USERNAME And come out to: <span style="color:red;font-family:Tempus Sans ITC;background:yellow;border:1px solid; -moz-border-raiuds: 1em; color:red;">USERNAME

Examples...
 * Obviously people's signatures don't usually just say their username, they also link to their talk page or something, so here are some real examples made with only what you've learned so far. (They are from other users, past sigs)

Sa nd  y! Sa nd  y!  (Made with the Span tag)

Bramble -san Bramble -san  (Made with the Span tag)


 * <font color="#00ff00" style="background:Black">Sky <font color="#ffff00" style="background:Black">feather <font color="#00ff00" style="background:Black">1995 (made with the Font tag)

Sizes, Superscript and Subscript

 * These tags change the size and/or orientation of your text, and they're separate from font and span, meaning that if you change color and size, you'll need to have multiple tags- but it's really not that complicated, I'll get to it in a minute, first, let me just explain them.
 * If you want to change the size of your text, the wiki makes it very simple.

USERNAME and  USERNAME
 * those will come out to USERNAME  and  USERNAME  respectively.

These can also stack, if you want bigger or smaller text, but I don't reccommend it for sigs since it will make them HUGE or TINY. Anyways, if you need to for some reason it's like this: USERNAME
 * This will be  USERNAME , and same thing if you want to do it with Small.


 * Now, Superscript and Subscript are similar to Small, in that they make the text smaller, but they also change the orientation. They are commonly used for the talk page text, to differentiate it from the User page text, like this:

USERNAME My Talk! and USERNAME My Talk!
 * These become USERNAME My Talk! and USERNAME My Talk! respectively.
 * Sub and Sup can also be stacked, and they create a nicer effect than stacking big and small:

USERNAME My Talk! and USERNAME My Talk! These look like USERNAME My Talk! and USERNAME My Talk!. You can stack them essentially as much as you want with more and more tags, (remember to close all of them!) but I'd say don't do it more than 2 times at most because it will disrupt the rows of text on whatever page you sign and people will get annoyed.


 * When using any of these tags along with font or span, just use both tags, but remember to close all of them, and do it in an inside-out way, like so:

USERNAME  My Talk!  and  USERNAME   My Talk!
 * To get: USERNAME   My Talk!  and  USERNAME   My Talk!  (You do it the same way for Big or Small).

More examples!!!
 * Here are more examples of signatures, now using size changes or sup/subscript as well.

<font color="#33ccff">Skyfeather <font color="#33ccff" style="background:white;"> '95 <font color="#33ccff">Skyfeather <font color="#33ccff" style="background:white;"> '95

<font color="#CC0000">insan <font color="#FF6600">TA <font color="#FFCC33">STE  <font color="#00CC33">THE  <font color="#0033CC">RAIN <font color="#6633FF">BOW  <font color="#660099">eu lar <font color="#CC0000">insan <font color="#FF6600">TA <font color="#FFCC33">STE  <font color="#00CC33">THE  <font color="#0033CC">RAIN <font color="#6633FF">BOW  <font color="#660099">eu lar  (That's mine, XD I know the code is long, but that's just 'cause I used a lot of colors).

-- Ic et hr o at   Happy  Valen  tine's   Day! -- Ic et hr o at   Happy  Valen  tine's   Day! (Another long one, but same reason.)

Special Characters

 * So, you want your sig to be even more unique? Well, there are a few more things you can add to spiff it up- Special characters.
 * Special characters are little text characters that are, well, special, because you can't normally type them, they have to be copied and pasted into your sig box. But they're usually pretty neat. To find some to copy and paste, use this generator (For some good ones put 9000 as the start number and 10000 as the end number), but for your convenience I'll list a few good ones here that you can just copy and paste instead of looking for them: ★ ☆ ◼ ◻ ◯ ☀ ☯ ☹ ☺ ☻ ☼☽☾☮ ♀ ♂ ͢ ♥ ♫ ♪ As I said, you can find many, many more cool ones on that generator.

'''Even More examples using Sp. chars or Images:''' <font color="#000066">☛ <font color="#006699">ⓘⓝⓢⓐⓝⓔⓤⓛⓐⓡ <font color="#000066">☚ <font color="#000066">☛ <font color="#006699">ⓘⓝⓢⓐⓝⓔⓤⓛⓐⓡ <font color="#000066">☚ (This demonstrates just how crazy you can get with Special Characters! Not a single normal letter in there :P)

<font color="lime" style="background:Black">♫ insaneular ♫ Down at Fraggle Rock! <font color="lime" style="background:Black">♫ insaneular ♫ Down at Fraggle Rock! (A more simple approach, but still has the musical notes)

Hд₩ ₭₮д  £O₦ Hд₩ ₭₮д  £O₦  (Another alternative with special characters, use ones that look like letters for an exotic look :P)

When I try to use my Sig, it just shows my code as a giant link to my user page!

 * This is an annoying problem, but easy to fix: It just means that you have forgotten to check the box in your preferences that says "Use Custom Sigatures". (Located directly under the signature input box) Simply checking this box and saving your preferences should remedy the problem.

It's given me the error: "Invalid Raw Signature, check HTML tags"

 * This means that you've mis-typed some coding, check over your whole sig code and make sure that you have closed all your tags, didn't miss any brackets or quotation marks, and didn't mis-type any coding. Once you fix your mistake (usually it's something very minor, so look closely) try again and it should work.

Open Sandbox

 * Here's a space for you to test any coding for your sig, if you need a place to. (But always remember to then put the coding on your sig page!) Please don't edit any other parts of the page though.

I think i got this! 15:33, August 21, 2010 (UTC)

TESTING! <span style="color:purple;font-family:Tempus Sans ITC;backround:lime;border:1px solid -moz-border-radius: 1em; color:purple;">MOSSLEAP:) <span style="color:purple;font-family:Tempus Sans ITC;backround:lime;border:1px solid -moz-border-radius: 1em; color:purple;">

<span style="color:purple;font-family:Tempus Sans ITC;backround:lime;border:1px solid -moz-border-radius: 1em; color:purple;">Testing ={D Frostheart  ♥  Greenleaf!!!

<span style="color:purple;font-family:Tempus Sans ITC;backround:lime;border:1px solid -moz-border-radius: 1em; color:purple;">Testing, testing... (Is this thing on?) Shadowpaw

<span style="color:purple;font-family:Tempus Sans ITC;backround:lime;border:1px solid -moz-border-radius: 1em; color:purple;">Oh yeah. I have a siggy! <font color="red" style="background:black; border:2px dashed -moz-border-raiuds: 1em; orange;">Zorth Master of txt tlk and shrthnd 01:25, June 26, 2010 (UTC)

<span style="color:purple;font-family:Tempus Sans ITC;backround:lime;border:1px solid -moz-border-radius: 1em; color:purple;">Testing - Again. Just because I want to. -- Shadowpaw ❦  - Sea Girl at Heart  18:58, July 2, 2010 (UTC)

Testing... <font color="981f1f" style="background:Gold">Cherryfur123 <sup style="line-height: 1em; "> Just stick with the script... 11:43, July 16, 2010 (UTC)

Let's hope this works...<span style="color:red;font-papyrus:Tempus Sans ITC;background:cyan;border:1px solid; -moz-border-raiuds: 1em; color:magenta;">Fawnspirit 03:14, July 22, 2010 (UTC)

Testing...hope this works!! <span style="color : aqua; front-family : Comic Sans ITC;background:aqua;border :1px  solid;  -moz-border-raiuds:  lem;  color:magenta;">♫☯Poppysky☯♫ 14:48, July 23, 2010 (UTC) Mossleap✐ᖱ

&lt;references/&gt;&#91;&#91;User:Sunnyfrost&#124;&lt;span style=&quot;font-family: Bradley Hand ITC;color:red;background:lightblue&quot;&gt;&#39;&#39;&#39;Sunny&#39;&#39;&#39;&lt;/span&gt;&#93;&#93;&#91;&#91;User talk:Sunnyfrost&#124;&lt;span style=&quot;font-family:Bradley Hand ITC;color:lightblue;background:red&quot;&gt;&#39;&#39;&#39;frost&#39;&#39;&#39;&lt;/span&gt;&#93;&#93; 13:56, July 21, 2010 (UTC)

Testing... -- Cl ov er he art   Summer's  almost   over!

Kittypet1 04:39, August 15, 2010 (UTC)

Testing... 1, 2, 3..... 18:40, August 16, 2010 (UTC)

testing (again) 18:41, August 16, 2010 (UTC)

testing again (i. hate. coding.) 18:45, August 16, 2010 (UTC)

think i have this time 18:49, August 16, 2010 (UTC)

<font color="aquamarine" style="background:Black">♫SpOtTeD ♫ May StarClan light your path!

<font color="Aqua" style="background:White">Willowheart May StarClan light your path!

Testing...<font face="freestyle script"><font color="#FFCC99"><font style="background:#000033"> Light <font face="freestyle script"><font color="#CCCCFF"><font style="background:#000033"> moon StarClanwilllightourpath!

<font face="freestyle script"><font color="#FFCC99"> 13:09, August 29, 2010 (UTC)