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

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 here on Community Central with my signature on it, and then substituting that page in my signature.

There are a few ways to do this:

Per-wiki Signature
If you want your signature to be different on every wiki you edit, you will need to create a signature page on each of those wikis.

Here's the example: 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 second 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.

Wikia-wide Signature
If you want your signature to be the same across every wiki you edit, you will only need to create a signature page here on Community Central (or on your home wiki if you wish).

Here's the example: 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 second colon is not a typo. This tells Wikia not to look in the Template: namespace.'' The w: tells Wikia to go to Community Central to get the specified page.

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 Community Central wiki. When set up this way, you will only need a User:YOURNAME/Signature page on one wiki.

Using Templates
Another method that some people like to use is creating templates. You can create different template pages with different signatures if you wish, and then substitute them in by hand instead of signing the page using the built in method. I'm not going to cover how to do this here because it's not what this post is about.

A Note About Substitution
In the examples above I used substitution with the signature pages. 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.

If you would prefer that your signature changed everywhere when you edit your signature page, you can use transclusion instead. To do that, simply remove the SUBST: (make sure to remove one and only one colon) from your signature setting on Special:Preferences.