View source for Wiki143:User page design guide/Style

{{Wikipedia:User page design center/Nav bar}}
<div style="border:1px solid #90C0FF; background:#D0E0FF; width:99%; padding:4px; margin-bottom:10px">
<div style="border:1px solid #90C0FF; background:#F0F0FF; width:99%; padding:4px">
Style is page layout. Here, we deal with format elements like content structuring, borders, page color, etc.  Well, there's a little more to style than that, and the rest is covered here too....
<div style="{{#invoke:RexxS|wobble}} float:left">__TOC__</div>
{{-}}

''To create a table of contents like the above (that changes its direction of lean randomly), use this code:''

<nowiki><div style="{{#invoke:RexxS|wobble}} float:left">__TOC__</div>
</nowiki>
{{-}}
</div>



<div style="border:1px solid #90C0FF; background:#F0F0FF; width:99%; padding:4px">
== Layout themes ==

Our "[[Help:Cheatsheet|Cheatsheet]]" is a good starting point for learning basic Wikipedia formatting. A more complete guide is [[Help:Wikitext|here]].

You can take some formatting tips from the standard way Wikipedia ''articles'' are laid out. Articles use headings, paragraphs, bulleted lists, etc. However, please take care not to set up a user page that anyone could mistake for an actual article (this is discouraged [[WP:FAKEARTICLE|here]]). 

When you come across an editor ([[Wikipedia:Wikipedians|Wikipedian]]) who seems experienced and sensible, take a look at their user page to see if there are design elements you could incorporate into your own user page.

=== Portal format ===

As of 2018, the [[WP:WPPORT|Portals Project]] has made some astounding advancements in portal design, making portals a breeze to create and modify. One possible application of the new portal design is as a user page.

For an example of a user page set up as a portal, see [{{fullurl:User:The Transhumanist|oldid=866889352}} User:The Transhumanist].

== Format elements ==

=== Portal components ===

Many of the various templates from the [[Template:Portal templates navbox|growing collection of portal elements]] can be used to great effect on a user page's design. For example...

==== Image banner ====

<code><nowiki>{{Portal image banner|File:Ethipothala Water Falls.jpg |maxheight=140px |overflow=Hidden }}</nowiki></code>  looks like this:

{{Portal image banner|File:Ethipothala Water Falls.jpg |maxheight=140px |overflow=Hidden }}

==== Picture slideshow ====

Conforms to the size of the container or column it is in. On most portals, it is in a half-page-width column. Here, it is full-width single-column:

{{Box-header colour|Selected images|TOC=yes|SPAN=yes|EDIT=yes}}<!-- TOC, SPAN, and EDIT parameters only used on talk pages-->
{{Transclude files as random slideshow
| Kitten
|
|
}}
{{Box-footer}}

See {{tl|Transclude files as random slideshow}} for more details.

==== Portal templates ====

{{Portal templates navbox}}

=== Alternate page title header ===
<em style="padding-left:20px;">Note: This method is a hack which does not work with all Wikipedia skins. For example, users of the Classic skin will have the links at the top of the page covered up by the title.</em>

Alternate title headers are headers that cover up the default header at the top of a page. The default title header has the name of the page in big bold letters. If you don't like how the default looks, follow the instructions below
# First, create a user subpage (described in [[Wikipedia:WikiProject User Page Help/Do-It-Yourself/Making Subpages|this section]]) titled "User:Example User/Header"
# Then, copy the following code into the subpage and change the parts in all caps (e.g.: "COLOR OF TEXT" and "HEADER TEXT YOU WANT")
# Transclude the header onto your user page (type the full name of the subpage inside double curly brackets) <nowiki>{{like this}}</nowiki>

<strong>Example code:</strong>
<pre><nowiki>
{| style="position:absolute; top:-50px; background:#CCCCFF; color:#000000;" valign="middle"
|-
|<h1 style="margin:0; border-bottom:0; color:COLOR OF TEXT;">
{{center|HEADER TEXT YOU WANT}}
|}
</nowiki></pre>

=== Borders ===
Borders look nice.  Borders add spice.  And they're the right price.

The examples below include closing codes, which may make it difficult to utilize them on talk pages.  To have borders and backgrounds extend to the end of the page regardless of what is added, simply leave off the closing codes (<nowiki></div>, </tr>, </td>, |}</nowiki>) at the end of the border markup examples.

Some example borders:

<div style="padding: 10px; background: #DEB887; border: 1px solid #FFAA99; font-family: Trebuchet MS, sans-serif; font-size: 95%;">
{| style="text-align:center; border: 1px solid #C9765A; background-color:#E9967A"
|- padding:1em;padding-top:0.5em;" 
! style="font-family: Trebuchet MS, sans-serif; color: #EEEEFF; font-size: large; line-height: 1.3em;" colspan="2"|''Servers and Network Issues!''

{{center|1=''[[User:The Transhumanist|User Page]] [[Wikipedia:Department directory|·]] [[User talk:The Transhumanist|Talk page]] [[Wikipedia:Tip of the day|·]]  [[User_talk:The Transhumanist/Archive menu|Archive]] [[Wikipedia:List of policies|·]] [[User:The Transhumanist#Awards|Awards]] [[Wikipedia:List of guidelines|·]] [[Special:Contributions/The Transhumanist|Contributions]] [[Wikipedia:Navigational templates|·]] <span class="plainlinks">[http://tools.wikimedia.de/~interiot/cgi-bin/Tool1/wannabe_kate?username=The+Transhumanist&site=en.wikipedia.org Edit count]</span> [[Wikipedia:Shortcuts|·]] [[User:The Transhumanist/Sandbox|Sandbox]]''}}
|-
| style="text-align:left; padding: 8px; background-color:#FAEBD7"|
We have several servers located in the small room adjacent to the lunch room next to production.  All of our network gear including phone, switches and DSL modems are located behind the double doors in the office next.
|}
</div>

{{-}}
----
{{-}}

<div style="padding: 0px; background: #f5deb3; border-style: ridge; border-width: 5px; border-color: #C6AEC7;"> 
<table cellspacing="4" cellpadding="2" style="background: #87CEFA">
<tr><td valign="top"><div style="background: #66CDAA; border-style: ridge; border-width: 2px; border-color: #EBDDE2; padding: 1em; text-align: justify;">
{{POTD}}

<br />
{{User page}}
</div></td></tr></table></div>

: ''The above design is best used for short pages, as it mimics a picture frame. It would work well for images, awards, etc.''


{| 
<!--                                                                                    -->
<!-- -------------------------------BEGIN TABLE ONE------------------------------------ -->
<!--                                                                                    -->
<!--                                                                                    -->
|{| width=100% style="{{Round corners}}; padding: 5px; background:orange; border: solid 4px red;"
<!--                                                                                    -->
<!-- ----------------------------BEGIN NESTED TABLE ----------------------------------- -->
<!--                                                                                    -->
<!--                                                                                    -->
|{| width=100% cellspacing=0 style="{{Round corners}}; background: lime; border: solid 4px yellow;" 
| width=75% valign="top" style="{{Round corners}}; padding-right: 15px; background:#fffff6; border: 0;" | 
|}
|}
<!--                                                                                    -->
<!-- --------------------END TABLE ONE / BEGIN TABLE TWO------------------------------- -->
<!--                                                                                    -->
{| width=100% style="{{Round corners}}; padding: 4px; background:orange; border: solid 6px yellow"
|-
||
{| width=100% cellspacing=2 cellpadding=0 style="{{Round corners}}; padding: 4px; background: #bb00ee; border: solid 6px red;" 
|-
||
{| width=100% cellspacing=2 cellpadding=2px style="{{Round corners}}; padding: 0; background: lime; border: solid 5px blue;" 
||
<!--                                                                                    -->
<!-- ---------------------------------START Nested Table 1----------------------------- -->
<!--                                                                                    -->
{| width=100% cellspacing=2 cellpadding=5px style="margin-bottom:-1px; background: transparent; border: none;" 
|
<br />
{{center|How's this for a border?}}
|}
|}
|}
|}
|}

<!-- Design end here -->
<!-- Design starts here -->

{| style="width: 100%; background-color: #FFFFFF; border: 3px solid #88EE88; margin-bottom: 8px; vertical-align: top;"
| colspan=3 style="vertical-align:top" |
{{center|Place your navbar here}}

<div style="padding:10px; text-align: right; margin-bottom:-11px;"></div>
{| cellpadding="1" cellspacing="1" style="width: 100%; background-color: #FFFFFF; vertical-align: top;"
| colspan="2" style="padding: 0;" |
|-
| style="width: 100%; vertical-align: top;" |
{| border="0" cellspacing="0" cellpadding="0" width="100%"
| style="background-color:#ffffff;" width="0" |
{| style="width="30%"; font-size:95%; text-align: justify;" padding:-2px; background:FFFFFF" cellpadding="0" cellspacing="0"
| rowspan="1" width="30%" colspan="2" height="37px" valign="top" style="background:#FFFFFF; border:2px solid #FFFF00; border-bottom:0; padding:0; padding-right:1em; margin:0; -moz-border-radius-topright:1em" | [[File:Original Barnstar.png|45px]] <div style="margin-top: -20px; padding-left:3px">[[File:Original Barnstar.png|25px]]</div><div style="padding-left:55px; margin-top:-36px; font-size:130%">'''''Hi&nbsp;there'''''</div>
|}
| style="border-bottom:2px solid #FFFF00; background:#FFFFFF;" width="8" | &nbsp;
| style="border-bottom:2px solid #FFFF00; background:#FFFFFF;" width="100%"| &nbsp;
|}
{| style="width:100%; margin-bottom:.5em; font-size:95%; text-align: justify;" padding:-2px; background:FFFFFF" cellpadding="0" cellspacing="0"
| rowspan="1" width="100%" colspan="2" valign="top" style="background:#FFFFFF; border:2px solid #FFFF00; border-bottom:0; border-top:0; padding:0; margin:0" |
<div style="padding:10px; text-align: justify;">

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<br />
TEXT TEXT To customize, change the border colors. TEXT TEXT<br />
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<br /> 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
</div>
|-
| colspan="2" class="radius_bottom" style="background:#EEEE82; border:2px solid #FFFF00" | <div style="font-size:0">[[File:Pix.gif|15px]]</div>

|}
|}
<div style="padding:10px; text-align: right; margin-bottom:-11px;"></div>
{| cellpadding="1" cellspacing="1" style="width: 100%; background-color: #FFFFFF; vertical-align: top;"
| colspan="2" style="padding: 0;" |
|-
| style="width: 100%; vertical-align: top;" |
{| border="0" cellspacing="0" cellpadding="0" width="100%"
| style="background-color:#ffffff;" width="0" |
{| style="width="30%"; font-size:95%; text-align: justify;" padding:-2px; background:FFFFFF" cellpadding="0" cellspacing="0"
| rowspan="1" width="30%" colspan="2" height="37px" valign="top" style="background:#FFFFFF; border:2px solid #FFFF00; border-bottom:0; padding:0; padding-right:1em; margin:0; -moz-border-radius-topright:1em" | [[File:Original Barnstar.png|45px]] <div style="margin-top: -20px; padding-left:3px">[[File:Original Barnstar.png|25px]]</div><div style="padding-left:55px; margin-top:-36px; font-size:130%">'''''What's&nbsp;up?'''''</div>
|}
| style="border-bottom:2px solid #FFFF00; background:#FFFFFF;" width="8" | &nbsp;
| style="border-bottom:2px solid #FFFF00; background:#FFFFFF;" width="100%"| &nbsp;
|}
{| style="width:100%; margin-bottom:.5em; font-size:95%; text-align: justify;" padding:-2px; background:FFFFFF" cellpadding="0" cellspacing="0"
| rowspan="1" width="100%" colspan="2" valign="top" style="background:#FFFFFF; border:2px solid #FFFF00; border-bottom:0; border-top:0; padding:0; margin:0" |
<div style="padding:10px; text-align: justify;">

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <br />
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <br /> 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <br />
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
</div>
|-
| colspan="2" class="radius_bottom" style="background:#EEEE82; border:2px solid #FFFF00" | <div style="font-size:0">[[File:Pix.gif|15px]]</div>

|}
|}
|}

=== Round corners ===
<em style="padding-left:20px; line-height:200%;">As of November 2008, round corners will only display in [[Mozilla Firefox]], [[Apple Safari]] and [[Google Chrome]]. EDIT: As of June 2011, round corners will display also on [[Internet Explorer 9]]</em><br />
To add round corners to a box or frame, include the {{tl|Round corners}}; template (just as shown, including semi-colon) as a style parameter.  Note that the element to be rounded must have a border in the first place.  Here's a markup example:

 <nowiki><div style="border:1px solid #5599FF; {{Round corners}}; margin: 5px;">
sample text sample text sample text sample text
</div>
</nowiki>

To see the specific code for creating round corners see [[Template:Round corners]].

For a cool example of the use of round corners, see [http://en.wikipedia.org/w/index.php?title=User:Zeerus&oldid=86840495 Zeerus' user page]

Or, try another way: <nowiki>-moz-border-radius:Xpx</nowiki>, where X is the number of pixels wide the rounded edge should be.

=== Color ===
{{main|Web colors}}

{{web colors}}

==== Change page color with CSS ====
To change the color of your user page, simply add the following code, replacing the capitalized text with the desired [[web colors]]:

<nowiki>{| 
| style="background:BACKGROUND COLOR; color:TEXT COLOR" |</nowiki>

So, you want to use fancy colors, eh? The following is a range of Web-Safe colors (non-[[dither]]ing) transcluded from [[User:Resident Mario/Tablet]].

=== Contents ===

To suppress the automatic table of contents box from appearing on your user page, place the following line somewhere on your user page:

<nowiki>__NOTOC__</nowiki>  <!-- To use this on your user page, remove the nowiki codes.  -->

To have the table of contents box float to the right, place the following line where you want the top to appear:

<nowiki>{{TOCright}}</nowiki>  <!-- To use this on your user page, remove the nowiki codes.  -->

=== Show/Hide sections ===
Here's an example of collapsed/expandable sections:

<div class="mw-collapsible mw-collapsed">
About me
<div class="mw-collapsible-content">
{{lorem ipsum}}
</div>
</div>
<div class="mw-collapsible mw-collapsed">
Subpages
<div class="mw-collapsible-content">
{{lorem ipsum}}
</div>
</div>
<div class="mw-collapsible mw-collapsed">
To do
<div class="mw-collapsible-content">
{{lorem ipsum}}
</div>
</div>
<div class="mw-collapsible mw-collapsed">
Licensing
<div class="mw-collapsible-content">
{{lorem ipsum}}
</div>
</div>

There are several templates that can be used for this in [[:Category:Collapse templates]].

=== Action links ===

=== Switched features ===

=== Boxes ===
{{See also|Wikipedia:Manual of Style/Accessibility#Color}}
*To make a box, do the following:
#Type '''<nowiki><div style="background-color:COLOR YOU WANT;"></nowiki>''' before the text
#Choose the color (Check out these pages: [[List of colors|<nowiki>[1]</nowiki>]][[X11 color names|<nowiki>[2]</nowiki>]][[Web colors|<nowiki>[3]</nowiki>]]  for a full list of colors you can use)
#Type your text
#Type '''<nowiki></div></nowiki>''' after the text
*Overall, your code should look like this:
::'''<nowiki><div style="background-color:yellow;">Hi</div></nowiki>'''
*Which will look like:
<div style="background-color:yellow;">Hi</div>

===Curved borders===
*To make borders curved (only works in Mozilla-based browsers) add the following code to the code described in the previous section:
*'''<nowiki>border-radius:15px;</nowiki>'''
*So, now your code should look like <nowiki><div style="background-color:DarkGoldenrod; </nowiki>'''border-radius:15px;'''<nowiki>">Hi</div></nowiki>
*Which would show up as 
<div style="background-color:DarkGoldenrod; border-radius:15px;">&nbsp; Hi, I'm trying to get your attention and differentiate my message on the page. &nbsp;</div>

== Text formatting ==

{{center|1='''<big>Here are some tips on how to format your text:</big>'''}}

===Custom bullet points for lists===

To use custom dots for bullets in lists, you can insert small files, like this:<br/>
&nbsp; [[File:Green 00ff00 pog.svg|9px]] [[Lorem ipsum]] dolor sit amet,<br/>
&nbsp; [[File:Yellow ffff00 pog.svg|9px]] consectetur adipiscing elit,<br/>
&nbsp; [[File:Red pog.svg|9px]] sed do eiusmod tempor incididunt<br/>
&nbsp; [[File:Purple 8000ff pog.svg|9px]] ut labore et dolore magna aliqua.<br/>
&nbsp; [[File:Blue 0080ff pog.svg|9px]] Ut enim ad minim veniam,<br/>

You might want to use a different color dot for separate lists, to further differentiate those lists, rather than mix them like above. When using this method, you need to end each line with "<nowiki><br/></nowiki>", and precede the first item in the list with that as well (at the end of the preceding line), or the items will run together.

Here is the wikicode for the above list, for copying and pasting:
<!-- The following code is intended to be copy/pasted from the rendered page, not this edit page. -->

 <nowiki><br/></nowiki>
 <nowiki>&amp;nbsp; [[File:Green 00ff00 pog.svg|9px]] [[Lorem ipsum]] dolor sit amet,<br/></nowiki>
 <nowiki>&amp;nbsp; [[File:Yellow ffff00 pog.svg|9px]] consectetur adipiscing elit,<br/></nowiki>
 <nowiki>&amp;nbsp; [[File:Red pog.svg|9px]] sed do eiusmod tempor incididunt<br/></nowiki>
 <nowiki>&amp;nbsp; [[File:Purple 8000ff pog.svg|9px]] ut labore et dolore magna aliqua.<br/></nowiki>
 <nowiki>&amp;nbsp; [[File:Blue 0080ff pog.svg|9px]] Ut enim ad minim veniam,<br/></nowiki>

For a real-life example of how the above method is applied upon a user page, see the page [https://en.wikipedia.org/w/index.php?title=User:Tom.Reding&oldid=1145765385 User:Tom.Reding].

Of course, you are not limited to dots. This method can be employed using icons, emoticons, etc.

===Center-Align===

*To center text, use the following code:

#Enter '''<nowiki><div style="text-align: center;"></nowiki>'''
#Then enter your text
#Finally, enter '''<nowiki></div></nowiki>'''

*Overall, your code should look like this:

<nowiki><div style="text-align: center;">Centered text</div></nowiki>

*Once you have entered that code, your text will look like this:
<div style="text-align: center;">Centered text</div>

===Strike Through Text===
*To strike through text, use the following code:

#Enter a '''<nowiki><s></nowiki>''' before the text.
#Enter the text
#Enter a '''<nowiki></s></nowiki>''' after the text.

*Overall, your code should look like this:
'''<nowiki><s>blah blah blah</s></nowiki>'''

*Once you have entered that code, your text will look like this:
<s>blah blah blah</s>

===Superscript===
*To insert a superscript, use the following code:

#Enter a '''<nowiki><sup></nowiki>''' before the text.
#Enter the text
#Enter a '''<nowiki></sup></nowiki>''' after the text.

*Overall, your code should look like this:
'''Normal text<nowiki><sup>superscript text</sup></nowiki>'''

*Once you have entered that code, your text will look like this:
Normal text<sup>superscript text</sup>

===Subscript===
*To insert, use the following code:

#Enter a '''<nowiki><sub></nowiki>''' before the text.
#Enter the text
#Enter a '''<nowiki></sub></nowiki>''' after the text.

*Overall, your code should look like this:
'''<nowiki>Normal text<sub>subscript text</sub></nowiki>'''

*Once you have entered that code, your text will look like this:
Normal text<sub>subscript text</sub>

===Hidden Comment===
*To insert a hidden comment, use the following code:

#Enter a '''<nowiki><!-- </nowiki>''' before the text.
#Enter the text
#Enter a '''<nowiki> --></nowiki>''' after the text.

*Overall, your code should look like this:
'''<nowiki><!-- blah blah blah--></nowiki>'''

*You will not be able to see the text on this page, but it will be seen when you try to edit this page. Hidden text is mostly used for warnings.<!-- Never run with scissors-->

===Secondary Headline===

*To insert a secondary headline, use the following code:

#Enter a '''<nowiki>==</nowiki>''' before the text.
#Enter the text
#Enter a '''<nowiki>==</nowiki>''' after the text.

*Overall, your code should look like this:
'''<nowiki>==blah blah blah==</nowiki>'''

===Tab===
*To insert a tab, use the following code:

#Enter a '''<nowiki>::</nowiki>''' before the text.

*Overall, your code should look like this:
'''<nowiki>::blah blah blah</nowiki>'''

*Once you have entered that code, your text will look like this:
::blah blah blah

===Font Color===
*To change the color of text, use the following code:

#Enter a '''<nowiki><span style="color: ColorName"></nowiki>''' before the text.
#Choose the color
#Enter the text
#Enter a '''<nowiki></span></nowiki>''' after the text.

*Overall, your code should look like this:
'''<nowiki><span style="color: red">blah blah blah</span></nowiki>'''

*Once you have entered that code, your text will look like this:
<span style="color: red">blah blah blah</span>

==== gradient text ====
You can use [[user:weegaweek/fun/gradient text|this template]] to make some text that gradually changes its colour from left to right ({{user:weegaweek/fun/gradient text|blah blah blah}}) and [[user:weegaweek/fun/rainbow text|this template]] to create text that has every colour of the rainbow as a gradient ({{user:weegaweek/fun/rainbow text|blah blah blah}}). To customise the color and direction of the text, you may use [[Template:Linear-gradient text|this template]] which allows customisation of text like this ({{Linear-gradient text | #ff99aa | #55ff00 | #7722ff | text = blah blah blah | direction = 40deg | alt text color = purple }}).

===Mouse Cursor===
*To change the cursor of the mouse when you hover over text, do the following:

#Enter a '''<nowiki><span style="cursor:CURSOR YOU WANT;"></nowiki>''' before the text.
#Choose the cursor, (e.g. crosshair, default)
#Enter the text
#Enter a '''<nowiki></span></nowiki>''' after the text.

*Overall, your code should look like this:
'''<nowiki><span style="cursor: crosshair;">blah blah blah</span></nowiki>'''

*Once you have entered that code, and you put the mouse over the text, it should have a different mouse cursor:
<span style="cursor: crosshair">blah blah blah</span>

===Links===
*To make external links look internal, use the following

#Enter a '''<nowiki><span class="plainlinks"></nowiki>''' before the text.
#Enter the external link
#Enter a '''<nowiki></span></nowiki>''' after the text.

*Overall, your code should look like this:
'''<nowiki><span class="plainlinks">[http://wikipedia.com external <span style="color:#002bb8">link</span>]</span></nowiki>'''

*Once you have entered that code, the external link should look like this:
<span class="plainlinks">[http://wikipedia.com external <span style="color:#002bb8">link</span>]</span>

*Note that if someone is using a custom skin that specifies different link colors, for example, green for internal links, and purple for "redlinks," a link formatted with this code will still look blue, and not match other links in appearance, to that user.

===Bolding===
*To make text bold, do the following:

#Enter 3 apostrophes '''<code><nowiki>'''</nowiki></code>''' before the text.
#Enter the text
#Enter 3 more apostrophes '''<code><nowiki>'''</nowiki></code>''' after the text.

*Overall, your code should look like this:
<code><nowiki>'''</nowiki></code>text<code><nowiki>'''</nowiki></code>

*Once you have entered that code, the text should look like this:
'''text'''

===Italics===
*To italicize text, do the following:

#Enter 2 apostrophes '''<code><nowiki>''</nowiki></code>''' before the text.
#Enter the text
#Enter 2 more apostrophes '''<code><nowiki>''</nowiki></code>''' after the text.

*Overall, your code should look like this:
<code><nowiki>''</nowiki></code>text<code><nowiki>''</nowiki></code>

*Once you have entered that code, the text should look like this:
''text''

===Underlining===
*To make underline text, do the following:

#Enter '''<nowiki><u></nowiki>''' before the text.
#Enter the text
#Enter '''<nowiki></u></nowiki>''' after the text.

*Overall, your code should look like this:
'''<nowiki><u>text</u></nowiki>'''

*Once you have entered that code, the text should look like this:
<u>text</u>

===Font size===
*To make text a certain size, use the following code:

#Enter a '''<nowiki><span style="font-size:large;"></nowiki>''' before the text.
#Choose the size
#Enter the text
#Enter a '''<nowiki></span></nowiki>''' after the text.

*Overall, your code should look like this:
'''<nowiki><span style="font-size:large;">blah blah blah</span></nowiki>'''

*Once you have entered that code, your text will look like this:
<span style="font-size:large;">blah blah blah</span>

==Font Families==
*To use the following font families, use the codes below:
#'''<nowiki><span style="font-family: (desired font); font-size: 12pt"></nowiki>'''
#Enter the font you want
#Directly after the code, enter your text
#Enter '''<nowiki></span></nowiki>'''after the text

So, it should look like:

'''<nowiki><span style="font-family: comic sans ms; font-size: 12pt">awesome</span></nowiki>'''

Which will turn out as:

<span style="font-family: comic sans ms; font-size: 12pt">awesome</span>

====List of Fonts====

{| cellpadding=4 cellspacing=0 border=1 style="font-family: verdana, sans-serif; margin: 0 0 1em 1em; font-size:90%; background-color: #f7f8ff;"
|'''Font Name:'''
|'''Example of font:''' 
|----
|Agency FB
|<span style="font-family: 'Agency FB'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Algerian
|<span style="font-family: Algerian; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Andale Mono
|<span style="font-family: 'Andale Mono'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Arial
|<span style="font-family: Arial; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Arial Black
|<span style="font-family: Arial Black; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Arial Narrow
|<span style="font-family: 'Arial Narrow'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Arial Rounded MT Bold
|<span style="font-family: 'Arial Rounded MT Bold'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Baskerville Old Face
|<span style="font-family: 'Baskerville Old Face'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Batik Regular
|<span style="font-family: 'Batik Regular'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Bauhaus 93
|<span style="font-family: 'Bauhaus 93'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Bell MT
|<span style="font-family: 'Bell MT'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Berlin Sans FB
|<span style="font-family: 'Berlin Sans FB'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Berlin Sans FB Demi 
|<span style="font-family: 'Berlin Sans FB Demi'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Bernard MT Condensed
|<span style="font-family: 'Bernard MT Condensed'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Blackadder ITC
|<span style="font-family: 'Blackadder ITC'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Bodoni MT
|<span style="font-family: 'Bodoni MT'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Bodoni MT Black
|<span style="font-family: 'Bodoni MT Black'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Bodoni MT Condensed
|<span style="font-family: 'Bodoni MT Condensed'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Bodoni MT Poster Compressed
|<span style="font-family: 'Bodoni MT Poster Compressed'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Book Antiqua
|<span style="font-family: 'Book Antiqua'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Bookman Old Style
|<span style="font-family: 'Bookman Old Style'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Bradley Hand ITC
|<span style="font-family: 'Bradley Hand ITC'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Britannic Bold
|<span style="font-family: 'Britannic Bold'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Broadway
|<span style="font-family: Broadway; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Brush Script MT
|<span style="font-family: 'Brush Script MT'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Calibri
|<span style="font-family: Calibri; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Californian FB
|<span style="font-family: 'Californian FB'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Calisto MT 
|<span style="font-family: 'Calisto MT'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Cambria
|<span style="font-family: Cambria; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Candara
|<span style="font-family: Candara; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Castellar
|<span style="font-family: Castellar; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Centaur
|<span style="font-family: Centaur; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Century Gothic
|<span style="font-family: 'Century Gothic'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Century Schoolbook
|<span style="font-family: 'Century Schoolbook'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Chiller
|<span style="font-family: Chiller; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Colonna MT
|<span style="font-family: 'Colonna MT'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Comic Sans MS
|<span style="font-family: 'comic sans ms'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Consolas
|<span style="font-family: Consolas; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Constantia
|<span style="font-family: Constantia; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Cooper Black
|<span style="font-family: 'Cooper Black'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Copperplate Gothic Bold
|<span style="font-family: 'Copperplate Gothic Bold'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Copperplate Gothic Light
|<span style="font-family: 'Copperplate Gothic Light'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Corbel
|<span style="font-family: Corbel; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Courier New
|<span style="font-family: 'Courier New'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Curlz MT
|<span style="font-family: 'Curlz MT'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Edwardian Script ITC
|<span style="font-family: 'Edwardian Script ITC'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Elephant
|<span style="font-family: Elephant; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Engravers MT
|<span style="font-family: 'Engravers MT'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Eras Bold ITC
|<span style="font-family: 'Eras Bold ITC'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Eras Demi ITC
|<span style="font-family: 'Eras Demi ITC'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Eras Light ITC
|<span style="font-family: 'Eras Light ITC'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Eras Medium ITC
|<span style="font-family: 'Eras Medium ITC'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Felix Titling
|<span style="font-family: 'Felix Titling'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Footlight MT Light
|<span style="font-family: 'Footlight MT Light'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Forte
|<span style="font-family: Forte; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Franklin Gothic Book
|<span style="font-family: 'Franklin Gothic Book'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Franklin Gothic Demi
|<span style="font-family: 'Franklin Gothic Demi'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Franklin Gothic Heavy
|<span style="font-family: 'Franklin Gothic Heavy'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Franklin Gothic Medium
|<span style="font-family: 'Franklin Gothic Medium'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Franklin Gothic Medium Cond
|<span style="font-family: 'Franklin Gothic Medium Cond'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Freestyle Script
|<span style="font-family: 'Freestyle Script'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|French Script MT
|<span style="font-family: 'French Script MT'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Garamond
|<span style="font-family: Garamond; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Georgia
|<span style="font-family: Georgia; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Gigi
|<span style="font-family: Gigi; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Gill Sans MT
|<span style="font-family: 'Gill Sans'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|GulimChe
|<span style="font-family: GulimChe; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Impact
|<span style="font-family: Impact; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Kristen ITC
|<span style="font-family: 'Kristen ITC'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Lucida Console
|<span style="font-family: 'Lucida Console'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Lucida Handwriting
|<span style="font-family: 'Lucida Handwriting'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|MingLiU
|<span style="font-family: MingLiU; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Monotype Corsiva
|<span style="font-family: 'Monotype Corsiva'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|MS Gothic
|<span style="font-family: 'MS Gothic'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|MS Hei
|<span style="font-family: 'MS Hei'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|MS Song
|<span style="font-family: 'MS Song'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Old English Text MT
|<span style="font-family: 'Old English Text MT'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Symbol
|<span style="font-family: Symbol; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Tahoma
|<span style="font-family: Tahoma; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Times New Roman
|<span style="font-family: 'Times New Roman'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Trebuchet MS
|<span style="font-family: 'Trebuchet MS'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Verdana
|<span style="font-family: 'Verdana'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Webdings
|<span style="font-family: Webdings; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Wingdings

|<span style="font-family: Wingdings; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Wingdings 2
|<span style="font-family: 'Wingdings 2'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|Wingdings 3
|<span style="font-family: 'Wingdings 3'; font-size: 12pt">The Quick Brown Fox Jumps Over The Lazy Dog</span>
|----
|}

== Picture formatting ==
<div style="padding: 1px; background: lightblue; border: width: 100px; -moz-border-radius:15px; font-size: 11pt;">
Images, with the proper copyright tags, can be placed onto your user page.

===Inserting an Image===
<pre>
[[File:Cscr-featured.svg]]</pre>

This inserts an image as seen below.

[[File:Cscr-featured.svg]]

<pre>
[[File:Cscr-featured.svg|Star]]
</pre>

Every image should have a brief description text. This enables blind Wikipedians using a [[screen reader]] to know what the image is about. "Star" is the descriptive word in this case.

[[File:Cscr-featured.svg|Star]]

<pre>
[[:File:Cscr-featured.svg]]
</pre>

Add a colon before Image to create a link to an image.

[[:File:Cscr-featured.svg]]

====Left Alignment====
<pre>
[[File:Cscr-featured.svg|left]]
</pre>

This aligns an Image to the left.

[[File:Cscr-featured.svg|left]]
{{-}}

====Right Alignment====
<pre>
[[File:Cscr-featured.svg|right]]
</pre>

This aligns an Image to the right.

[[File:Cscr-featured.svg|right]]
{{-}}

====Center alignment====
<pre>
[[File:Cscr-featured.svg|center]]
</pre>

This aligns an Image in the middle.

[[File:Cscr-featured.svg|center]]
{{-}}

===Auto-alignment===
You can auto-align an Image one of two ways.

====Framing====
Framing an Image will automatically set the Image to the right side of the screen and frame it. (Like a picture frame)

To frame an Image type in:

<pre>
[[File:Cscr-featured.svg|frame]]
</pre>

Which will appear like this:

[[File:Cscr-featured.svg|frame]]
'''NOTE: This will force the image to be in its original size (to change the size use thumbnails or do not use the frame).'''
{{-}}

====Just sub to stixq ====
Thumbnailing a picture is similar to framing because it, again, automatically aligns it to the right. What's different about thumbnails is that now you have room to write text below it and can change the size. (Like a photograph from a camera)

To thumbnail a picture type in:

<pre>
[[File:Cscr-featured.svg|thumb]]
</pre>

Which will appear like this:

[[File:Cscr-featured.svg|thumb]]
{{-}}

===Making Images bigger and smaller===
To change the size of an image type:

<pre>
[[File:Cscr-featured.svg|80px]]
</pre>
[[File:Cscr-featured.svg|80px]]
{{-}}

===Captions===
To add a caption to an image, type:
[[File:Cscr-featured.svg|thumb|Caption]]
<pre>
[[File:Cscr-featured.svg|thumb|Caption]]
</pre>
or
<pre>
[[File:Cscr-featured.svg|thumb|right|Caption]]
</pre>
or
<pre>
[[File:Cscr-featured.svg|thumb|right|80px|Caption]]
</pre>

===Galleries===
To make a gallery of images, type
<pre>
<gallery>
File:Cscr-featured.svg|Caption1
File:Barnprinter2.png|Caption2
</gallery>
</pre>

<gallery>
File:Cscr-featured.svg|Caption1
File:Barnprinter2.png|Caption2
</gallery>
</div>

== Templates ==
There are plenty of users out there looking to spruce up their pages, too! This section lists a few of the really cool apps developed by others.
<table width=100% border=3>
<tr><td width=60%>

====Moon Phase====
On the right is a template that automatically displays the current moon phase, created by [[User:Dbachmann/moon|Dbachman]].
</td>
<td align=center width=35%>
{{User:Dbachmann/moon1|q={{#expr:((({{CURRENTJULIANDAY}}-2454000.98958)/29.530588*4000) mod 4000)/1000}}}}


</table>

== Emoticons ==

Also called [[smiley]]s, these [[emoticon]]s are useful for adding emotional expression to text messages.  Definitely not for use in articles, but suitable for enhancing messages on talk pages, especially user talk pages.  They can also be used as menu icons and user page art.

{{col-begin}}
{{col-3}}
*[[File:HumanismSymbol.PNG|22px]]- <code><nowiki>[[File:HumanismSymbol.PNG|22px]]</nowiki></code>
*[[File:Smiley.svg|19px]] - <code><nowiki>[[File:Smiley.svg|19px]]</nowiki></code>
*[[File:Face-smile.svg|25px]] - <code><nowiki>[[File:Face-smile.svg|25px]]</nowiki></code>
*[[File:Face-glasses.svg|21px]] - <code><nowiki>[[File:Face-glasses.svg|21px]]</nowiki></code>
*[[File:Face-grin expert.svg|25px]] - <code><nowiki>[[File:Face-grin expert.svg|25px]]</nowiki></code>
*[[File:SNive.gif|19px]] - <code><nowiki>[[File:SNive.gif|19px]]</nowiki></code>
*[[File:SFriendly.gif|19px]] - <code><nowiki>[[File:SFriendly.gif|19px]]</nowiki></code>
*[[File:Face-wink.svg|23px]] - <code><nowiki>[[File:Face-wink.svg|23px]]</nowiki></code>
*[[File:SConfident.gif|20px]] - <code><nowiki>[[File:SConfident.gif|20px]]</nowiki></code>
*[[File:SInnocent.gif|18px]] - <code><nowiki>[[File:SInnocent.gif|18px]]</nowiki></code>
*[[File:Choice toxicity icon.png|21px]] - <code><nowiki>[[File:Choice toxicity icon.png|21px]]</nowiki></code>
*[[File:Tongue.png|21px]] - <code><nowiki>[[File:Tongue.png|21px]]</nowiki></code>
*[[File:SMocking.gif|19px]] - <code><nowiki>[[File:SMocking.gif|19px]]</nowiki></code>
*[[File:Face-blush.svg|25px]] - <code><nowiki>[[File:Face-blush.svg|25px]]</nowiki></code>
*[[File:Face-boudeur.svg|25px]] - <code><nowiki>[[File:Face-boudeur.svg|25px]]</nowiki></code>
*[[File:Face-sad.svg|25px]] - <code><nowiki>[[File:Face-sad.svg|25px]]</nowiki></code>
*[[File:Face-tongue.svg|25px]] - <code><nowiki>[[File:Face-tongue.svg|25px]]</nowiki></code>
{{col-3}}
*[[File:XD-smiley.png|20px]] - <code><nowiki>[[File:XD-smiley.png|20px]]</nowiki></code>
*[[File:Emblem-cool.svg|20px]] - <code><nowiki>[[File:Emblem-cool.svg|20px]]</nowiki></code>
*[[File:Happy.gif|22px]] - <code><nowiki>[[File:Happy.gif|22px]]</nowiki></code>
*[[File:Face-grin.svg|25px]] - <code><nowiki>[[File:Face-grin.svg|25px]]</nowiki></code>
*[[File:Face-grin-braces.svg|25px]] - <code><nowiki>[[File:Face-grin-braces.svg|25px]]</nowiki></code>
*[[File:Face-devil-grin.svg|25px]] - <code><nowiki>[[File:Face-devil-grin.svg|25px]]</nowiki></code>
*[[File:SCongratulate.gif|19px]] - <code><nowiki>[[File:SCongratulate.gif|19px]]</nowiki></code>
*[[File:SSceptical.gif|21px]] - <code><nowiki>[[File:SSceptical.gif|21px]]</nowiki></code>
*[[File:SHurt.gif|19px]] - <code><nowiki>[[File:SHurt.gif|19px]]</nowiki></code>
*[[File:SIndifferent.gif|19px]] - <code><nowiki>[[File:SIndifferent.gif|19px]]</nowiki></code>
*[[File:Animalien-smiley.gif|20px]] - <code><nowiki>[[File:Animalien-smiley.gif|20px]]</nowiki></code>
*[[File:SYawning.gif|19px]] - <code><nowiki>[[File:SYawning.gif|19px]]</nowiki></code>
*[[File:Sleeping.png|25px]] - <code><nowiki>[[File:Sleeping.png|25px]]</nowiki></code>
*[[File:Face-angel.svg|25px]] - <code><nowiki>[[File:Face-angel.svg|25px]]</nowiki></code>
*[[File:Face-kiss.svg|25px]] - <code><nowiki>[[File:Face-kiss.svg|25px]]</nowiki></code>
*[[File:Face-monkey.svg|25px]] - <code><nowiki>[[File:Face-monkey.svg|25px]]</nowiki></code>
*[[File:Face-plain.svg|25px]] - <code><nowiki>[[File:Face-plain.svg|25px]]</nowiki></code>
{{col-3}}
*[[File:Very_sorry.gif|19px]] - <code><nowiki>[[File:Very_sorry.gif|19px]]</nowiki></code>
*[[File:Confused-tpvgames.svg|21px]] - <code><nowiki>[[File:Confused-tpvgames.gif|21px]]</nowiki></code>
*[[File:Confused.png|19px]] - <code><nowiki>[[File:Confused.png|19px]]</nowiki></code>
*[[File:SUpset.gif|19px]] - <code><nowiki>[[File:SUpset.gif|19px]]</nowiki></code>
*[[File:SNasty.gif|19px]] - <code><nowiki>[[File:SNasty.gif|19px]]</nowiki></code>
*[[File:Sad-tpvgames.gif|21px]] - <code><nowiki>[[File:Sad-tpvgames.gif|21px]]</nowiki></code>
*[[File:Frowny.svg|20px]] - <code><nowiki>[[File:Frowny.svg|20px]]</nowiki></code>
*[[File:Shocked-tpvgames.gif|21px]] - <code><nowiki>[[File:Shocked-tpvgames.gif|21px]]</nowiki></code>
*[[File:Face-surprise.svg|22px]] - <code><nowiki>[[File:Face-surprise.svg|22px]]</nowiki></code>
*[[File:Misc-tpvgames.gif|20px]] - <code><nowiki>[[File:Misc-tpvgames.gif|20px]]</nowiki></code>
*[[File:SHysterical.gif|18px]] - <code><nowiki>[[File:SHysterical.gif|18px]]</nowiki></code>
*[[File:SShocked.gif|18px]] - <code><nowiki>[[File:SShocked.gif|18px]]</nowiki></code>
*[[File:Smiley green alien KO.svg|25px]] - <code><nowiki>[[File:Smiley green alien KO.svg|25px]]</nowiki></code>
*[[File:Face-crying.svg|25px]] - <code><nowiki>[[File:Face-crying.svg|25px]]</nowiki></code>
*[[File:Face-smile-big.svg|25px]] - <code><nowiki>[[File:Face-smile-big.svg|25px]]</nowiki></code>
{{col-end}}

== See also ==

{| class="wikitable" style="font-size: 95%; text-align:center; width:100%; background: lightblue;"
|-style="height:40px;"
| style="width:25%" |[[Wikipedia:User page design guide/Scripts|'''Suggested Tools (Scripts)''']]
|}
</div></div>