Fandom

Community Central

Comments5

Wiki Signatures - How they Work

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

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:


ModIcon.png Hello World! How are you today? ModIcon.png   02:01, December 8, 2016 (UTC)


The Parts of a SignatureEdit

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:

 <span style="border-top-right-radius: 14pt; border-bottom-right-radius: 14pt; padding: 7px;box-shadow: 2px 2px 5px #99aaff; color: #ffffff;background-color: #6677ff">http://img1.wikia.nocookie.net/__cb20140626173343/gamedezyner/images/8/89/ModIcon.png [[User:Gamedezyner|<span style="color: #ff6677; text-shadow: 0px 0px 2px #ffccdd;" title="Profile">'''''Hello'''''</span>]] [[User_talk:Gamedezyner|<span style="color: #77ff66; text-shadow: 0px 0px 2px #ddffcc;" title="Talk Page">'''''World!'''''</span>]] '''''How are you today?''''' http://img1.wikia.nocookie.net/__cb20140626173343/gamedezyner/images/8/89/ModIcon.png</span>  

That's a little messy, so let's break it down into parts:

HTML and CSSEdit

In this example I use three <span> 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:

WikitextEdit

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:

[[User:Gamedezyner|<span>Hello</span>]]

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.

ImagesEdit

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 [[File:ModIcon]]), 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 SignatureEdit

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:

 <span style="border-top-right-radius: 14pt; border-bottom-right-radius: 14pt; padding: 7px;box-shadow: 2px 2px 5px #99aaff; color: #ffffff;background-color: #6677ff">http://img1.wikia.nocookie.net/__cb20140626173343/gamedezyner/images/8/89/ModIcon.png [[User:Gamedezyner|<span style="color: #ff6677; text-shadow: 0px 0px 2px #ffccdd;" title="Profile">'''''Hello'''''</span>]] [[User_talk:Gamedezyner|<span style="color: #77ff66; text-shadow: 0px 0px 2px #ddffcc;" title="Talk Page">'''''World!'''''</span>]] '''''How are you today?''''' http://img1.wikia.nocookie.net/__cb20140626173343/gamedezyner/images/8/89/ModIcon.png</span>  

And in my signature in Special:Preferences I have:

 {{:User:Gamedezyner/Signature}}

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 SubstitutionEdit

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.

Also on Fandom

Random Wiki