Help:Customising your signature

This page is to help you customise your signature! It is important when doing so to realise that other users will often need to access your talk page and perhaps your user page or contributions. Therefore ensure that these links are obvious.

Reference

Many of these snippets use common HTML elements, the most common of which is . Visit the HTML section at w3schools.com:HTML reference.
Much of the flashy, custom effects are done using CSS. For a complete CSS reference, vist the CSS section at w3schools.com:CSS reference

Basics

Almost all signatures are made using the HTML element using the attribute "style". The style attribute has a number of CSS properties which combine together to produce a wide variety of possible signature forms. Many signatures use two or more tags nested within each other: one to produce the box within which the links are contained, and one or more to change the style of the links contained within the box. The basic format used in the element is:

<span style="Property1:variable; Property2:variable; Property3:variable;..."></span>

CSS Properties

Font colour

Property: color

You can use this property to specify a colour name as follows:

Input	Output
`<span style="color:red;">Text</span>`	Text

The same result can also be achieved much simpler with Template:T as follows:

Input	Output
`{{Colour\|red\|Text}}`	Text

Colour names are limited to a list of recognised colour names which can be found here, however hexadecimal codes can also be input to yield any colour:

Input	Output
`<span style="color:#00ff00;">Text</span>`	Text
`{{Colour\|#00ff00\|Text}}`	Text

Underline and Strikethrough

Property: text-decoration

Underline and strikethrough both use the same CSS property, but can still be used at the same time

Input	Output
`<span style="text-decoration:underline;">Text</span>`	Text
`<span style="text-decoration:line-through;">Text</span>`	Text
`<span style="text-decoration:underline line-through;">Text</span>`	Text

Underlining and striking can be achieved much simpler using  and <s> respectively.

Input	Output
`<u>Text</u>`	Text
`<s>Text</s>`	~~Text~~
`<u><s>Text</s></u>`	~~Text~~

Font face

Property: font-family

You can specify more than one font with this property, separated by commas. The first one listed is used by default, but if a user, when viewing your signature, does not have the first font installed, it will display the second font for them. Generic font styles can also be input, such as "Serif", which have "flares" at the end of the letters, "Sans-serif", which does not have them, and "Monotype", fonts wherein all letters are the same width.

Input	Output
`<span style="font-family:Times new roman;">Text</span>`	Text

Subscript and Superscript

Unlike other formatting code used so far, superscript and subscript does not use the tag, but instead uses separate tags: and respectively.

Input	Output
`Text<sup>sup</sup>`	Text^sup
`Text<sub>sub</sub>`	Text_sub

These must appear outside the tag, as shown below:

Input	Output
`Text<sup><span style=text-decoration:underline;">sup</span></sup>`	Text^sup

Background colour

Property: background-colour

The easiest way to use this property is to specify a colour name, however hexadecimal codes will also work:

Input	Output
`<span style="background-color:yellow;">Text</span>`	Text
`<span style="background-color:#00ffff;">Text</span>`	Text

Borders

Property: border

There are many different types of borders. The most basic border format is:

Input	Output
`<span style="border:1px solid blue;">Text</span>`	Text

Extra space can be put between the start and end of the border and the start and end of the text by putting non-breaking spaces   before and after the text. Just like in font colour and background colour, the colour can be a recognised colour name, found here, or a hexadecimal code. The "1px" value can be changed to alter the thickness of the border, and the "solid" variable can be changed to any number of border styles:

Dotted	Dashed	Solid	Double
Groove	Ridge	Inset	Outset

Multiple border styles

The above syntax applies styles to all 4 borders at once. To apply styles to a borders one by one, use the following properties:

border-bottom
border-left
border-right
border-top

Input	Output
`<span style="border-bottom:1px solid blue; border-left:2px dashed green; border-right:3px outset red; border-top:2px dotted purple"> Text </span>`	Text

Images

It is possible to add images to your signature by using the following

Input	Output
`[[File:Wise Old Man (partyhat) chathead.png]]`	File:Wise Old Man (partyhat) chathead.png

However, images contained in signatures may not be higher than 31 pixels. Users can scale images to 31px high without distorting them by using the code: [[File:Example.jpg|0x31px]]

Input	Output
`[[File:Wise Old Man (partyhat) chathead.png\|0x31px]]`	0x31px

Additionally, you can add text that pops up when your mouse hovers over the image.

Input	Output
`[[File:Wise Old Man (partyhat) chathead.png\|This is some example text.]]`	This is some example text.

Also, it is possible to make the picture link to a page other than that file's page, although when hovering over it, this will overrule the text in the previous note.

Input	Output
`[[File:Wise Old Man (partyhat) chathead.png\|link=Air rune\|This is the Wise old man.]]`	This is the Wise old man.

External links

Property: plainlinks

By default, all external links have an arrow next to them to denote that they take anyone who clicks outside the Wiki's network of websites, like this: RuneScape. That arrow can be disabled using the plainlinks property. Unlike other CSS properties covered so far, this one is not part of the "style" attribute of the element, but is part of the "class" attribute. It is important to note that putting a semicolon after the plainlinks property will disable it.

Input	Output
`<span class="plainlinks">[http://www.runescape.com/ RuneScape]</span>`	RuneScape

Other CSS properties must be applied using a separate tag around the link name:

Input	Output
`<span class="plainlinks">[http://www.runescape.com/ <span style="color:green; text-decoration:underline;">RuneScape</span>]</span>`	RuneScape

Putting a signature together

As explained in the beginning, multiple styles can be combined in one tag by separating them with semicolons. The first step to creating a signature is to decide on a border and background. This is a step-by-step guide to creating a sample signature for educational purposes, and is by no means the only way to make one.

Note: Replacing the between link spaces ]] [[ with non breaking spaces ]] [[ will help prevent the line breaking and causing the wrapping that is shown below:

Step	Input	Output
Decide on a border and background	`<span style="background-color:red; border:4px ridge gray;">[[User:Example\|Example]]</span>`	Example
Choose images - the Wiki's signature policy forbids signatures with more than two images, animated images, and images which are too large.	`<span style="background-color:red; border:4px ridge gray;"></span>`
Apply formatting to the name using a separate <span> tag and other Wiki formatting	`<span style="background-color:red; border:4px ridge gray;"></span>`
	`<span style="background-color:red; border:4px ridge gray;"></span>`
Add a link to the talk page in superscript and another <span> tag.	`<span style="background-color:red; border:4px ridge gray;"></span>`
	`<span style="background-color:red; border:4px ridge gray;"></span>`
Add a hiscores link	`<span style="background-color:red; border:4px ridge gray;"></span>`