User blog:Gamedezyner/Wiki Signatures - How they Work

Hi everyone! This is my first blog post here on Community Central!

So by now we've all seen some really cool signatures around Wikia. Ever wondered how those users made them? It's actually pretty easy to do!

Here's a random signature I threw together as an example for this blog: - http://img1.wikia.nocookie.net/__cb20140626173343/gamedezyner/images/8/89/ModIcon.png Hello   World!  How are you today? http://img1.wikia.nocookie.net/__cb20140626173343/gamedezyner/images/8/89/ModIcon.png  , August 28, 2024 (UTC) -

The Parts of a Signature
Let's start by talking about what that signature is made up of. Most signatures use a combination of HTML tags, inline CSS styling, and some wikitext to achieve the look they are going for. The entire code for that signature looks like this: http://img1.wikia.nocookie.net/__cb20140626173343/gamedezyner/images/8/89/ModIcon.png Hello   World!  How are you today? http://img1.wikia.nocookie.net/__cb20140626173343/gamedezyner/images/8/89/ModIcon.png That's a little messy, so let's break it down into parts:

HTML and CSS
In this example I use three   tags to separate the signature into pieces, so that they can be styled differently. The first span tag creates the blue box around the text. Inside that first span tag are two more span tags containing the words "Hello" and "World!".

I then put some CSS into the style attribute of the tags in order to change their appearance.

Here's a quick list of the HTML tags and CSS attributes I used, with external links to pages that explain a lot more about them:
 * border-top-right-radius
 * border-bottom-right-radius
 * padding
 * box-shadow
 * color (This one is pretty obvious but I'll include it anyway.)
 * background-color (Also rather obvious)
 * text-shadow

Wikitext
Along with the HTML and CSS above, I also used some wikitext to make the words "Hello" and "World!" link to my profile and talk page (message wall) respectively. In the example above I wrapped the two span tags in a link like this: Hello Note: You can place the span tags around a link instead, but it will turn all the text within the link blue. Placing the span tag inside the link overrides the default link color.

Images
I also included two stars as images in the example. To do this, simply paste the URL of the image you want to use directly into the signature: http://img1.wikia.nocookie.net/__cb20140626173343/gamedezyner/images/8/89/ModIcon.png

By pasting the url of the image instead of linking it (like ), I make it so the images aren't clickable. This prevents confusion.

An image or two in the signature can make it great if you pick the right ones, but can also make it look terrible if you use them wrong. Keep in mind that your signature will likely appear several times on the same page when you are having a conversation with someone. If you use huge images, it takes up unnecessary amounts of space on the page and makes things look rather sloppy. Try to keep your images small enough to fit within 1-2 text lines.

Using an HTML Signature
So the new signature looks nice, but Special:Preferences won't accept it. If you want to use more advanced code in your signature, you'll need to create a page with that code on it, and link the signature to it. I did this for my account by creating the page User:Gamedezyner/Signature with my signature on it, and then "transcluding" that page in my signature.

''Note: I see a lot of people creating their signature in the template namespace. While there's nothing technically wrong with this, making the signature a sub-page of your user page is much more organized.''

Here's how this works:

On the page User:Gamedezyner/Signature I have: http://img1.wikia.nocookie.net/__cb20140626173343/gamedezyner/images/8/89/ModIcon.png Hello   World!  How are you today? http://img1.wikia.nocookie.net/__cb20140626173343/gamedezyner/images/8/89/ModIcon.png

And in my signature in Special:Preferences I have: ''Note:The leading colon is not a typo. This tells wikia not to look in the Template: namespace''

What this ends up doing is making it so signing a page (Putting ~ before publishing) always uses the content of the User:Gamedezyner/Signature page located on the wiki I'm currently editing. When set up this way, you will need a User:YOURNAME/Signature page on each wiki you use a signature on.

A Note About Substitution
In the examples above I used "transclusion" with the signature pages. This makes it so that all the pages with my signature are linked to the signature page. If I make a change to the signature page, it changes on all the pages I've signed. Substitution makes it so the content of the signature page gets written directly to the signed page instead of linking to the signature page. This makes it so your old signatures stay on old edits, even if you change your signature later. It comes at a cost of making the pages difficult to edit, as signature code takes up a lot of space on a talk page.