User blog:EvergreenFir/Signature Tutorial

A lot of people don't know how to make custom signatures at all, so this tutorial will go through the ins and outs of not only how to make them. If you know the basics, you can just skip to the code examples. If you don't know what a signature is or how to sign things, please read Help:Signature.

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

Feel free to test signatures in your sandbox or in the comments below.

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) Create another subpage to store your signature template. To do this, click this redlink which will let you create your subpage. On this page, copy-paste the following text:""
 * 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: "" Be sure to click the "I want to use wikitext in my signature" button too. When you are done, scroll to the bottom of the page and click "Save".

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. You should have your username somewhere in it. The signature should at least link to either your userpage or your message wall. Some people go farther, as to link to their editcount, contributions page, or any user sub pages they have. It's up to you to decide what to link to but the User or Message wall 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 signature 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-radius: 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-radius: 1em; color:red;">USERNAME And come out to: <span style="color:red;font-family:Tempus Sans ITC;background:yellow;border:1px solid; -moz-border-radius: 1em; color:red;">USERNAME

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

Images
You can add images in two ways:
 * 1) If the image is on this wiki (which means it's Gravity Falls related), you can use normal Wiki syntax to include the image. For example, Gf3.PNG.
 * 2) If the image is not Gravity Falls related, it must be uploaded to another wiki. To include it in your signature, copy-paste the specific URL of the image. You can find this right-clicking the image and selecting "view image"; the URL will be in the address bar of your browser. Unfortunately, you cannot alter the size of the image, so make sure if follows the guidelines before you upload it. You can change the size of the image in any image editor.

In either case, you can easily change the image by uploading new versions (I alternate between a snowy tree for winter, a pumpkin for Halloween, and a normal tree for the rest of the year).

When I try to use my signature, 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 Signatures". (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 mistyped some coding, check over your whole signature code and make sure that you have closed all your tags, didn't miss any brackets or quotation marks, and didn't mistype any coding. Once you fix your mistake (usually it's something very minor, so look closely) try again and it should work.

When I use my signature template, the time and date show up in a funny blue box.
This is due to spaces being left after the signature coding on your signature template page. Make sure there are no spaces or line breaks between the end of your signature coding and the tag.

Example coding
Here are more examples of signatures, now using size changes or sup/subscript as well. EvergreenFir #1 "http://images.wikia.com/adventuretimewithfinnandjake/images/e/e9/Evergreen-Tree.png Ever green Fir  http://images2.wikia.nocookie.net/adventuretimewithfinnandjake/images/e/e9/Evergreen-Tree.png"
 * gives http://images.wikia.com/adventuretimewithfinnandjake/images/e/e9/Evergreen-Tree.png Ever green  Fir  http://images2.wikia.nocookie.net/adventuretimewithfinnandjake/images/e/e9/Evergreen-Tree.png

EvergreenFir #2 "<ul class='wikia-menu-button' style='list-style: none; margin:0px'><li style='margin-left: 0px; margin-top: 0px;'> [ EvergreenFir] <ul style='list-style: none; border-radius:4px; border-top-right-radius: 1px; border-top-left-radius: 1px; margin:0px'><li>[ Talk]</li><li>[ Contributions]</li></li></ul></li></ul>"
 * gives <ul class="wikia-menu-button" style="list-style: none; margin:0px"><li style="margin-left: 0px; margin-top: 0px;"> [ EvergreenFir] <ul style="list-style: none; border-radius:4px; border-top-right-radius: 1px; border-top-left-radius: 1px; margin:0px"><li>[ Talk]</li><li>[ Contributions]</li></li></ul></li></ul> (note, this one glitched a lot)

YazzyDream #1 "<span style='border:2px solid black; padding: 0px 0px 0px 5px;border-radius: 1em 1em 1em 1em; background-color: black; background: -webkit-linear-gradient(20deg, black 50%, black 52%, #ff0000 54%, #ff0000 56%, #ff8000 58%, #ff8000 60%, #ffff00 62%, #ffff00 64%, #008000 65%, #008000 68%, #0000ff 69%, #0000ff 72%, #4B0082 74%, #4B0082 76%, #9400D3 78%, #9400D3 80%, white 82%); background: -moz-linear-gradient(20deg, black 50%, black 52%, #ff0000 54%, #ff0000 56%, #ff8000 58%, #ff8000 60%, #ffff00 62%, #ffff00 64%, #008000 65%, #008000 68%, #0000ff 69%, #0000ff 72%, #4B0082 74%, #4B0082 76%, #9400D3 78%, #9400D3 80%, white 82%); background: -ms-linear-gradient(70deg, black 50%, black 52%, #ff0000 54%, #ff0000 56%, #ff8000 58%, #ff8000 60%, #ffff00 62%, #ffff00 64%, #008000 65%, #008000 68%, #0000ff 69%, #0000ff 72%, #4B0082 74%, #4B0082 76%, #9400D3 78%, #9400D3 80%, white 82%); background: -o-linear-gradient(20deg, black 50%, black 52%, #ff0000 54%, #ff0000 56%, #ff8000 58%, #ff8000 60%, #ffff00 62%, #ffff00 64%, #008000 65%, #008000 68%, #0000ff 69%, #0000ff 72%, #4B0082 74%, #4B0082 76%, #9400D3 78%, #9400D3 80%, white 82%); background: linear-gradient(70deg, black 50%, black 52%, #ff0000 54%, #ff0000 56%, #ff8000 58%, #ff8000 60%, #ffff00 62%, #ffff00 64%, #008000 65%, #008000 68%, #0000ff 69%, #0000ff 72%, #4B0082 74%, #4B0082 76%, #9400D3 78%, #9400D3 80%, white 82%);'> YazzyDream          ☆"
 * gives <span style="border:2px solid black; padding: 0px 0px 0px 5px;border-radius: 1em 1em 1em 1em; background-color: black; background: -webkit-linear-gradient(20deg, black 50%, black 52%, #ff0000 54%, #ff0000 56%, #ff8000 58%, #ff8000 60%, #ffff00 62%, #ffff00 64%, #008000 65%, #008000 68%, #0000ff 69%, #0000ff 72%, #4B0082 74%, #4B0082 76%, #9400D3 78%, #9400D3 80%, white 82%); background: -moz-linear-gradient(20deg, black 50%, black 52%, #ff0000 54%, #ff0000 56%, #ff8000 58%, #ff8000 60%, #ffff00 62%, #ffff00 64%, #008000 65%, #008000 68%, #0000ff 69%, #0000ff 72%, #4B0082 74%, #4B0082 76%, #9400D3 78%, #9400D3 80%, white 82%); background: -ms-linear-gradient(70deg, black 50%, black 52%, #ff0000 54%, #ff0000 56%, #ff8000 58%, #ff8000 60%, #ffff00 62%, #ffff00 64%, #008000 65%, #008000 68%, #0000ff 69%, #0000ff 72%, #4B0082 74%, #4B0082 76%, #9400D3 78%, #9400D3 80%, white 82%); background: -o-linear-gradient(20deg, black 50%, black 52%, #ff0000 54%, #ff0000 56%, #ff8000 58%, #ff8000 60%, #ffff00 62%, #ffff00 64%, #008000 65%, #008000 68%, #0000ff 69%, #0000ff 72%, #4B0082 74%, #4B0082 76%, #9400D3 78%, #9400D3 80%, white 82%); background: linear-gradient(70deg, black 50%, black 52%, #ff0000 54%, #ff0000 56%, #ff8000 58%, #ff8000 60%, #ffff00 62%, #ffff00 64%, #008000 65%, #008000 68%, #0000ff 69%, #0000ff 72%, #4B0082 74%, #4B0082 76%, #9400D3 78%, #9400D3 80%, white 82%);"> YazzyDream           ☆

YazzyDream #2 <font style="font-size: 88%;"><span style="border: 1px solid #738C41; -moz-border-radius:1ex; border-radius:1ex; border-top-right-radius:0ex; border-bottom-right-radius:0ex; -moz-border-radius-bottomright:0ex; -moz-border-radius-topright:0ex;"><span style="background-color:#FFF; border-top-left-radius:1ex; border-bottom-left-radius:1ex; -moz-border-radius-topleft:1ex; -moz-border-radius-bottomleft:1ex;">  YazzyDream  <span style="background-color:#B1D864; color:#FFF; border:1px solid #738C41; border-top-left-radius:1ex; border-bottom-left-radius:1ex; -moz-border-radius-bottomleft:1ex; -moz-border-radius-topleft:1ex; border-top-right-radius:0ex; border-bottom-right-radius:0ex; -moz-border-radius-bottomright:0ex; -moz-border-radius-topright:0ex;"> Ducktective   <span style="border: 1px solid #738C41; -moz-border-radius:1ex; border-radius:1ex; border-top-left-radius:0ex; border-bottom-left-radius:0ex; -moz-border-radius-bottomleft:0ex; -moz-border-radius-topleft:0ex; background-color:#F75278; color:#FFF">
 * gives <font style="font-size: 88%;"><span style="border: 1px solid #738C41; -moz-border-radius:1ex; border-radius:1ex; border-top-right-radius:0ex; border-bottom-right-radius:0ex; -moz-border-radius-bottomright:0ex; -moz-border-radius-topright:0ex;"><span style="background-color:#FFF; border-top-left-radius:1ex; border-bottom-left-radius:1ex; -moz-border-radius-topleft:1ex; -moz-border-radius-bottomleft:1ex;">  YazzyDream  <span style="background-color:#B1D864; color:#FFF; border:1px solid #738C41; border-top-left-radius:1ex; border-bottom-left-radius:1ex; -moz-border-radius-bottomleft:1ex; -moz-border-radius-topleft:1ex; border-top-right-radius:0ex; border-bottom-right-radius:0ex; -moz-border-radius-bottomright:0ex; -moz-border-radius-topright:0ex;"> Ducktective   <span style="border: 1px solid #738C41; -moz-border-radius:1ex; border-radius:1ex; border-top-left-radius:0ex; border-bottom-left-radius:0ex; -moz-border-radius-bottomleft:0ex; -moz-border-radius-topleft:0ex; background-color:#F75278; color:#FFF">

Missmelody: "<span style=' background-image:-moz-linear-gradient(top, #993 35%, #444 65%); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #937), color-stop(65%, #444)); border:1px solid #eb0; -moz-border-radius-topleft:1ex; border-top-left-radius:1ex; -moz-border-radius-bottomleft:1ex; border-bottom-left-radius:1ex; border-right:0;'><span style='border-top-left-radius:1ex; border-bottom-left-radius:1ex; -moz-border-radius-topleft:1ex; -moz-border-radius-bottomleft:1ex;'> | Miss <span style=' background-image:-moz-linear-gradient(top, #444 35%, #745 65%); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #444), color-stop(65%, #745)); color:#fff; border:1px solid #eb0; border-top-left-radius:1ex; border-bottom-left-radius:1ex; -moz-border-radius-bottomleft:1ex; -moz-border-radius-topleft:1ex;'> Leave a message!  <span style=' background-image:-moz-linear-gradient(top, #00C 35%, #FF0 65%); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #008080), color-stop(65%, #000)); color:#fff'>  Edits  <span style=' background-image:-moz-linear-gradient(top, #444 35%, #000 65%); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #C0C0C0), color-stop(65%, #9966CC)); color:#192; border:1px solid #eb0;'>  Fairy type   <span style='border:1px solid #eb0; border-left:0; border-top-right-radius:1ex; border-bottom-right-radius:1ex; -moz-border-radius-bottomright:1ex; -moz-border-radius-topright:1ex; background-image:-moz-linear-gradient(top, #444 35%, #192 65%); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #255 240 245), color-stop(65%, #000 000 000)); color:#eb0'>"
 * gives <span style=" background-image:-moz-linear-gradient(top, #993 35%, #444 65%); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #937), color-stop(65%, #444)); border:1px solid #eb0; -moz-border-radius-topleft:1ex; border-top-left-radius:1ex; -moz-border-radius-bottomleft:1ex; border-bottom-left-radius:1ex; border-right:0;"><span style="border-top-left-radius:1ex; border-bottom-left-radius:1ex; -moz-border-radius-topleft:1ex; -moz-border-radius-bottomleft:1ex;"> | Miss  <span style=" background-image:-moz-linear-gradient(top, #444 35%, #745 65%); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #444), color-stop(65%, #745)); color:#fff; border:1px solid #eb0; border-top-left-radius:1ex; border-bottom-left-radius:1ex; -moz-border-radius-bottomleft:1ex; -moz-border-radius-topleft:1ex;"> Leave a message!  <span style=" background-image:-moz-linear-gradient(top, #00C 35%, #FF0 65%); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #008080), color-stop(65%, #000)); color:#fff">  Edits  <span style=" background-image:-moz-linear-gradient(top, #444 35%, #000 65%); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #C0C0C0), color-stop(65%, #9966CC)); color:#192; border:1px solid #eb0;">  Fairy type   <span style="border:1px solid #eb0; border-left:0; border-top-right-radius:1ex; border-bottom-right-radius:1ex; -moz-border-radius-bottomright:1ex; -moz-border-radius-topright:1ex; background-image:-moz-linear-gradient(top, #444 35%, #192 65%); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(35%, #255 240 245), color-stop(65%, #000 000 000)); color:#eb0">