About a year ago, I had very little knowledge of HTML and CSS. In fact, I didn't even know what these languages were. I thought it was all just a part of one big Mediawiki language that automagically did everything you wanted it to do. Given this, when I decided that I'd like to make a signature, I didn't know where to begin. Googling "how to make a signature mediawiki" was of no help. I eventually ended up copying Monchoman's signature and mangling it into something that I could call my own. If you're like I was, this guide was written for you.

Note - this blog post details how a signature can be made, in addition to some tips. It's not a selector reference or anything like that. You must be willing to do the work and much of the research involved yourself.


Before you continue, I recommend going to Special:Preferences#mw-prefsection-editing and disabling the visual editor. You may not be as comfortable with the real editor as you were with the visual one, but when you become accustomed to editing Mediawiki pages the way they were meant to be edited, I guarantee you'll find the visual editor inoperable. If you simply aren't down with that, you can leave it enabled and switch to the source editor by clicking "source" at the top right of the editor. However, be aware that editing your signature with the visual editor enabled, even though you aren't making any changes using it, may completely botch your hard work.

You should also know some basic signature etiquette:

  • Typically, a signature shouldn't make the line containing it any taller than it would be without the signature present. While in some places nobody minds if it does, in others you might be asked to make it shorter.
  • Images usually aren't a good idea. Animations are usually an even worse idea. This is another one of those things that are totally fine in a lot of places.
  • People may not appreciate it if you put a three-line-long quote from your favorite author in your signature.
  • Your signature probably shouldn't violate the Terms of Use.
  • If your signature is more than a couple of lines long, put it in a template. This is covered in the final section of the guide.

Making the signature

Familiarizing yourself with your tools

There are three core "languages" that you will be using to build your signature. These are:

  • HTML. This is a basic formatting language that forms the structure of everything you see on this site. HTML is represented by what are called tags - such as <b> </b> (bold) and <i> </i> (italic). You may have seen some of these before - you simply place whatever content you want formatted within the tags and you're done.
  • CSS. This is a markup language that is used to style elements created with HTML. You'll be combining this language with your HTML tags to create your signature.
  • Mediawiki. This is just a markup system that is converted by Wikia's servers into another, much more complex and much more powerful language called PHP (but that has nothing to do with this tutorial). You'll be using this for simple [[links]], or possibly a timestamp or image.

Now that you know what these are, familiarize yourself with the HTML <span> tag: this turns your signature into a stylable object without making any other changes to it. You can then use the style attribute to apply CSS. By mixing the HTML span tag with the CSS background property and Mediawiki internal link formatting, I can do this: Dzylon (Talk). When I add a couple more properties, I get this: Dzylon (Talk). Here's what I used to get these results - the former:

<span style="background: Moccasin">[[User:Dzylon|Dzylon]] ([[User talk:Dzylon|Talk]])</span>

And the latter:

<span style="background: Moccasin; border: 2px solid blue; padding: 3px">[[User:Dzylon|Dzylon]] ([[User talk:Dzylon|Talk]])</span>

Getting to it

Now you know what you're working with, the possibilities are endless. Knowing what language does what allows you to research them. Say you want to give your username a shadow - you know that a shadow is a stylistic element, so you know that the applicable language is CSS. You might end up searching "css word shadow". One of the first results is exactly what you're looking for -

Development resources should have absolutely everything you could want to know about CSS and HTML, and is your definitive resource for Mediawiki markup. If something isn't clear to you, post a comment below! You're sure to find help from either myself or any of the awesome wiki people that patrol this place. I'll also try to incorporate your problem's solution into this post so as to help others.

Development tips

Colors are most often defined by what are called hex codes. Red is #FF0000, blue is #0000FF, and orange is #FFA500. When it comes to background colors, text colors, and the like, you have almost seventeen million different colors to choose from. You can find a pretty extensive list of colors at Wikipedia:List of colors - the hex codes are in the third column. Need to tweak a color? You might find this tool helpful.

Trying to color a link? Wrapping [[it]] in styled span tags won't help. You need to pipe the link and then color the alternate text, like this:

[[User:Example|<span style="color:#33CC33">Example</span>]]

Which gives you this: Example

If the code of your signature is stacking up, you might find it preferable to break it up into multiple lines, like this:

<span style="
  color: green;
  background: #CCC;
  border: 1px solid black;
  font-size: small;">
    You might find this
    <span style="
      color: blue;
      background: green;">
        more maintainable.

You can then plug that into this tool to get something you can use:

<span style=" color: green;background: #CCC;border: 1px solid black;font-size: small;"> You might find this <span style=" color: blue;background: green;"> more maintainable. </span></span>

If you want, you can keep a "development" copy of your script saved in a text file on your computer. You can minify it whenever you're ready to update the copy you have on your wiki.

Enabling your signature

If you've done any of the fancy stylistic things mentioned earlier, you should probably put your signature inside of a template within your user space. Special:Mypage/sig is a good idea. Just put it all in there. Make note of its location.

Now create another page like Special:Mypage/sig2. Put this inside of it:


So, if your name is Example and you put your signature in User:Example/sig, you would put {{User:Example/sig}} in your sig2 page.

Now you're ready. Go to Special:Preferences and tick the check next to "I want to use wikitext in my signature". Now enter this in the box above it:

{{SUBST:#ifexist:User:Example/sig2 | {{SUBST:User:Example/sig2}} | [[User:Example|]] ([[User_talk:Example|talk]])}}

Replace all four instances of "Example" with your username, and both instances of "sig2" with whatever subpage you put your second signature page in. What this does is substitute the contents of your sig2 page if it's available, transcluding your real signature. If it's not available, a default signature is used instead (which can, of course, be customized as well). As before, sign using four tildes (~~~~).

I'll post another blog sooner or later detailing more advanced concepts, such as the use of an interior timestamp or a signature that's presented in a different color depending on when you posted it.