View source for Help:Customizing your signature

{{shortcut|H:CYS|H:CUSTOM}}This page is to help you '''customise your [[GSWiki:Signatures|signature]]'''! It is important when doing so to realize 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 <nowiki><span></nowiki>. Visit the HTML section at [http://w3schools.com/tags/tag_span.asp w3schools.com:HTML reference].
* Much of the flashy, custom effects are done using CSS. For a complete CSS reference, visit the CSS section at [http://w3schools.com/css/css_reference.asp w3schools.com:CSS reference]

== Basics ==

Almost all signatures are made using the '''HTML element''' <nowiki><span></nowiki> 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 <nowiki><span></nowiki> 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 <nowiki><span></nowiki> element is:

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

==CSS Properties==

===Font Color===

'''Property:''' color

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

{| class="wikitable" style="text-align:center"
! Input
! Output
|-
|<code><nowiki><span style="color:red;">Text</span></nowiki></code>
|{{Color|red|Text}}
|}

The same result can also be achieved much simpler with {{t|Color}} as follows:

{| class="wikitable" style="text-align:center"
! Input
! Output
|-
|<code><nowiki>{{Color|red|Text}}</nowiki></code>
|{{Color|red|Text}}
|}

Color names are limited to a list of recognised Color names which can be found [[Wikipedia:X11 color names|here]], however hexadecimal codes can also be input to yield any Color:

{| class="wikitable" style="text-align:center"
! Input
! Output
|-
|<code><nowiki><span style="color:#00ff00;">Text</span></nowiki></code>
|{{Color|#00ff00|Text}}
|-
|<code><nowiki>{{Color|#00ff00|Text}}</nowiki></code>
|{{Color|#00ff00|Text}}
|}

===Font Size===

'''Property:''' font-size

This property can be used with words like "large" or "x-small":

{| class="wikitable" style="text-align:center"
! Input
! Output
|-
|<code><nowiki><span style="font-size:large;">Text</span></nowiki></code>
|<span style="font-size:large;">Text</span>
|-
|<code><nowiki><span style="font-size:x-small;">Text</span></nowiki></code>
|<span style="font-size:x-small;">Text</span>
|}

More control can be used by substituting a percentage for the size:

{| class="wikitable" style="text-align:center"
! Input
! Output
|-
|<code><nowiki><span style="font-size:50%;">Text</span></nowiki></code>
|<span style="font-size:50%;">Text</span>
|-
|<code><nowiki><span style="font-size:125%;">Text</span></nowiki></code>
|<span style="font-size:125%;">Text</span>
|}

Pixel sizes may also be substituted:

{| class="wikitable" style=text-align:center"
! Input
! Output
|-
|<code><nowiki><span style="font-size:10px;">Text</span></nowiki></code>
|<center><span style="font-size:10px;">Text</span></center>
|-
|<code><nowiki><span style="font-size:20px;">Text</span></nowiki></code>
|<span style="font-size:20px;">Text</span>
|}

===Underline and Strikethrough===

'''Property:''' text-decoration

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

{| class="wikitable" style="text-align:center"
! Input
! Output
|-
|<code><nowiki><span style="text-decoration:underline;">Text</span></nowiki></code>
|<span style="text-decoration:underline;">Text</span>
|-
|<code><nowiki><span style="text-decoration:line-through;">Text</span></nowiki></code>
|<span style="text-decoration:line-through;">Text</span>
|-
|<code><nowiki><span style="text-decoration:underline line-through;">Text</span></nowiki></code>
|<span style="text-decoration:underline line-through;">Text</span>
|}

Underlining and striking can be achieved much simpler using <code><nowiki><u></nowiki></code> and <code><nowiki><s></nowiki></code> respectively.

{| class="wikitable" style="text-align:center"
!Input
!Output
|-
|<code><nowiki><u>Text</u></nowiki></code>
|<u>Text</u>
|-
|<code><nowiki><s>Text</s></nowiki></code>
|<s>Text</s>
|-
|<code><nowiki><u><s>Text</s></u></nowiki></code>
|<u><s>Text</s></u>
|}

===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.

{| class="wikitable" style="text-align:center"
! Input
! Output
|-
|<code><nowiki><span style="font-family:Times new roman;">Text</span></nowiki></code>
|<span style="font-family:Times new roman;">Text</span>
|}

===Subscript and Superscript===

Unlike other formatting code used so far, superscript and subscript does not use the <nowiki><span> tag, but instead uses separate tags: <sup></sup> and <sub></sub> respectively.</nowiki>

{| class="wikitable" style="text-align:center"
! Input
! Output
|-
|<code><nowiki>Text<sup>sup</sup></nowiki></code>
|Text<sup>sup</sup>
|-
|<code><nowiki>Text<sub>sub</sub></nowiki></code>
|Text<sub>sub</sub>
|}

These must appear ''outside'' the <nowiki><span> tag, as shown below:</nowiki>

{| class="wikitable" style="text-align:center"
! Input
! Output
|-
|<code><nowiki>Text<sup><span style=text-decoration:underline;">sup</span></sup></nowiki></code>
|Text<sup><span style="text-decoration:underline;">sup</span></sup>
|}

===Background Color===

'''Property:''' background-Color

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

{| class="wikitable" style="text-align:center"
! Input
! Output
|-
|<code><nowiki><span style="background-color:yellow;">Text</span></nowiki></code>
|<span style="background-color:yellow;">Text</span>
|-
|<code><nowiki><span style="background-color:#00ffff;">Text</span></nowiki></code>
|<span style="background-color:#00ffff;">Text</span>
|}

===Borders===

'''Property:''' border

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

{| class="wikitable" style="text-align:center"
! Input
! Output
|-
|<code><nowiki><span style="border:1px solid blue;">Text</span></nowiki></code>
|<span style="border:1px solid blue;">Text</span>
|}

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 <code>&amp;nbsp;</code> before and after the text. Just like in font Color and background Color, the Color can be a recognised Color name, found [[Wikipedia:X11 color names|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:

{| style="text-align:center; width:50%; height:150px"
|<span style="border:3px dotted blue;">&nbsp;Dotted&nbsp;</span>
|<span style="border:3px dashed blue;">&nbsp;Dashed&nbsp;</span>
|<span style="border:3px solid blue;">&nbsp;Solid&nbsp;</span>
|<span style="border:3px double blue;">&nbsp;Double&nbsp;</span>
|-
|<span style="border:3px groove blue;">&nbsp;Groove&nbsp;</span>
|<span style="border:3px ridge blue;">&nbsp;Ridge&nbsp;</span>
|<span style="border:3px inset blue;">&nbsp;Inset&nbsp;</span>
|<span style="border:3px outset blue;">&nbsp;Outset&nbsp;</span>
|}

===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

{| class="wikitable" style="text-align:center; width:50%"
! Input
! Output
|-
|<code><nowiki><span style="border-bottom:1px solid blue; border-left:2px dashed green; border-right:3px outset red; border-top:2px dotted purple"> Text </span></nowiki></code>
|<span style="border-bottom:1px solid blue; border-left:2px dashed green; border-right:3px outset red; border-top:2px dotted purple">&nbsp;Text&nbsp;</span>
|}

===Rounded corners===

'''Property''': {{T|Border-radius|Value}}

The "1em" measurement can be changed to any value between 0em and 1em. 1em is produces a quarter-circle corner which takes up half of the shorter edge on either side of the box. .5 em produces a quarter circle corner which takes up one fourth of the shorter edge. Other values are also possible, and adjust the radius accordingly. Due to the rounded corners, it is often necessary to use &amp;nbsp; before and after the text or specify a left and right padding to ensure its not covered by the border.

The {{T|Border-radius}} template lets you use rounded borders for most major browsers, and should be used instead of specifying specific CSS elements.

{| class="wikitable" style="text-align:center;"
! Input
! Output
|-
|<code><nowiki><span style="border:3px solid blue; {{border-radius|1em}}"> Rounded corners </span></nowiki></code>
|<span style="border:3px solid blue; {{border-radius|1em}}">&nbsp;Rounded&nbsp;corners&nbsp;</span>
|}

It is also possible to set a different radius for each corner by specifying four different em values, one after the other. The order in which they are used is: top-left, top-right, bottom-right, bottom-left. When specifying individual corner radii, it is possible to use measurements larger than 1em, up to 2 em which is a quarter-circle which takes up an entire side.

{| class="wikitable" style="text-align:center;"
! Input
! style="width:130px" | Output
|-
|<code><nowiki><span style="border:3px solid blue; {{border-radius|2em 1em 1em 0em}}">  Rounded corners </span></nowiki></code>
|<span style="border:3px solid blue; {{border-radius|2em 1em 1em 0em}}">&nbsp;&nbsp;Rounded corners&nbsp;</span>
|}

===Images===

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

{| class="wikitable" style="text-align:center;"
! Input
! style="width:200px" | Output
|-
|<code><nowiki>[[</nowiki>'''File:Earth Icon.png'''<nowiki>]]</nowiki></code>
|[[File:Earth Icon.png|50px]]
|}

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: <nowiki>[[File:Example.jpg|0x31px]]</nowiki>

{| class="wikitable" style="text-align:center;"
! Input
! style="width:200px" | Output
|-
|<code><nowiki>[[File:Earth Icon.png|</nowiki>'''0x31px'''<nowiki>]]</nowiki></code>
|[[File:Earth Icon.png|0x31px]]
|}

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

{| class="wikitable" style="text-align:center;"
! Input
! style="width:200px" | Output
|-
|<code><nowiki>[[File:Earth Icon.png|</nowiki>'''This is some example text.'''<nowiki>]]</nowiki></code>
|[[File:Earth Icon.png|50px|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.

{| class="wikitable" style="text-align:center;"
! Input
! style="width:200px" | Output
|-
|<code><nowiki>[[File:Earth Icon.png|</nowiki>'''link=Earth'''<nowiki>|This is Earth.]]</nowiki></code>
|[[File:Earth Icon.png|50px|link=Earth|This is Earth.]]
|}

===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: [http://www.geministation.com/ Gemini Station]. 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 <nowiki><span></nowiki> element, but is part of the "class" attribute. It is important to note that putting a semicolon after the plainlinks property will '''disable it'''.

{| class="wikitable" style="text-align:center;"
! Input
! Output
|-
|<code><nowiki><span class="plainlinks">[http://www.geministation.com/ Gemini Station]</span></nowiki></code>
|<span class="plainlinks">[http://www.geministation.com/ Gemini Station]</span>
|}

Other CSS properties must be applied using a separate <nowiki><span></nowiki> tag around the link name:

{| class="wikitable" style="text-align:center;"
! Input
! Output
|-
|<code><nowiki><span class="plainlinks">[http://www.geministation.com/ <span style="color:green; text-decoration:underline;">Gemini Station</span>]</span></nowiki></code>
|<span class="plainlinks">[http://www.geministation.com/ <span style="color:green; text-decoration:underline;">Gemini Station</span>]</span>
|}

==Putting a signature together==

As explained in the beginning, multiple styles can be combined in one <nowiki><span></nowiki> 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 <nowiki>]] [[</nowiki> with non breaking spaces <nowiki>]]&#38;nbsp&#59;[[</nowiki> will help prevent the line breaking and causing the wrapping that is shown below:

{| class="wikitable"
! width=300px|Step
! Input
! width=300px|Output
|-
|Decide on a border and background
|<code><nowiki><span style="background-color:red; border:4px ridge gray;">[[User:Example|Example]]</span></nowiki></code>
|align=center|<span style="background-color:red; border:4px ridge gray;">[[User:Example|Example]]</span>
|-
|Choose images - the Wiki's [[GS:SIG|signature policy]] forbids signatures with more than two images, animated images, and images which are too large.
|<code><nowiki><span style="background-color:red; border:4px ridge gray;"></nowiki>'''''<nowiki>[[File:Earth Icon.png|0x31px]]</nowiki>'''''<nowiki> [[User:Example|Example]] </nowiki>'''''<nowiki>[[File:Eris Icon.png|0x31px]]</nowiki>'''''<nowiki></span></nowiki></code>
|align=center|<span style="background-color:red; border:4px ridge gray;">[[File:Earth Icon.png|0x31px]] [[User:Example|Example]] [[File:Eris Icon.png|0x31px]]</span>
|-
|Apply formatting to the name using a separate <nowiki><span></nowiki> tag and other Wiki formatting
|<code><nowiki><span style="background-color:red; border:4px ridge gray;">[[File:Earth Icon.png|0x31px]] [[User:Example|</nowiki>'''''<nowiki><span style="color:white;">'''</nowiki>'''''<nowiki>Example</nowiki>'''''<nowiki>'''</span></nowiki>'''''<nowiki>]] [[File:Eris Icon.png|0x31px]]</span></nowiki></code>
|align=center|<span style="background-color:red; border:4px ridge gray;">[[File:Earth Icon.png|0x31px]] [[User:Example|<span style="color:white;">'''Example'''</span>]] [[File:Eris Icon.png|0x31px]]</span>
|-
|
|<code><nowiki><span style="background-color:red; border:4px ridge gray;">[[File:Eris Icon.png|0x31px]] [[User:Example|</nowiki>'''''<nowiki>{{Color|white|'''</nowiki>'''''<nowiki>Example</nowiki>'''''<nowiki>'''}}</nowiki>'''''<nowiki>]] [[File:Earth Icon.png|0x31px]]</span></nowiki></code>
|align=center|<span style="background-color:red; border:4px ridge gray;">[[File:Eris Icon.png|0x31px]] [[User:Example|<span style="color:white;">'''Example'''</span>]] [[File:Earth Icon.png|0x31px]]</span>
|-
|Add a link to the talk page in superscript and another <nowiki><span></nowiki> tag.
|<code><nowiki><span style="background-color:red; border:4px ridge gray;">[[File:Earth Icon.png|0x31px]] [[User:Example|<span style="color:white;">'''Example'''</span>]] </nowiki>'''''<nowiki><sup>[[User talk:Example|<span style="color:white;">'''Talk'''</span>]]</sup></nowiki>'''''<nowiki> [[File:Eris Icon.png|0x31px]]</span></nowiki></code>
|align=center|<span style="background-color:red; border:4px ridge gray;">[[File:Earth Icon.png|0x31px]] [[User:Example|<span style="color:white;">'''Example'''</span>]] <sup>[[User talk:Example|<span style="color:white;">'''Talk'''</span>]]</sup> [[File:Eris Icon.png|0x31px]]</span>
|-
|
|<code><nowiki><span style="background-color:red; border:4px ridge gray;">[[File:Earth Icon.png|0x31px]] [[User:Example|{{Color|white|'''Example'''}}]] </nowiki>'''''<nowiki><sup>[[User talk:Example|{{Color|white|'''Talk'''}}]]</sup></nowiki>'''''<nowiki> [[File:Eris Icon.png|0x31px]]</span></nowiki></code>
|align=center|<span style="background-color:red; border:4px ridge gray;">[[File:Earth Icon.png|0x31px]] [[User:Example|<span style="color:white;">'''Example'''</span>]] <sup>[[User talk:Example|<span style="color:white;">'''Talk'''</span>]]</sup> [[File:Eris Icon.png|0x31px]]</span>
|}

==See also==
* [[GSWiki:Signatures#Sign here!]], a large list of signatures for ideas.
* [[GSWiki:Signatures]], with rules and guidelines for customising signatures.
* [[GSWiki:Signatures/Requested sigs]], where experienced editors make signatures based on requests.

[[Category:Help]]