Wikipedia:User page design center/Style

Sample text Sample text Note that this frame will only extend as far as your text, so you have to have at least one complete line of text. Sample text Sample text Sample text. The body of your user page would go in here (that is, text, pics, etc.).

[edit] Contents

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

__NOTOC__

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

{{TOCright}}

[edit] Scroll boxes

To create a scrollbox, use the "overflow:auto" style code. Be sure to also specify a "height: nnpx", where nn is the height you want. Here's an example of one 150px tall:

The possible functions are overflow:"scroll" (puts two scroll bars), overflow:"auto" (puts scrollbars only when necessary), oveflow:"hidden" (hides overflow), and overflow:"visible" (auto; overflow simply flows out of the border).

[edit] Show/Hide sections

Here's an example of collapsed/expandable sections:

Also, there is a template: Template:Hide. For example:

[edit] Action links

[edit] Switched features

[edit] Boxes

• To make a box, do the following:

1. Type <div style="background-color:COLOR YOU WANT;"> before the text
2. Choose the color (Check out these pages: [1][2][3] for a full list of colors you can use)
3. Type your text
4. Type </div> after the text

• Overall, your code should look like this:

<div style="background-color:yellow;">Hi</div>

• Which will look like:

[edit] Curved borders

• To make borders curved (only works in Mozilla-based browsers) add the following code to the code described in the previous section:
• -moz-border-radius:15px;
• So, now your code should look like <div style="background-color:DarkGoldenrod; -moz-border-radius:15px;">Hi</div>
• Which would show up as

[edit] Text formatting

[edit] Center-Align

• To center text, use the following code:

1. Enter <div style="text-align: center;">
2. Then enter your text
3. Finally, enter </div>

• Overall, your code should look like this:

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

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

[edit] Strike Through Text

• To strike through text, use the following code:

1. Enter a <s> before the text.
2. Enter the text
3. Enter a </s> after the text.

• Overall, your code should look like this:

<s>blah blah blah</s>

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

blah blah blah

[edit] Superscript

• To insert a superscript, use the following code:

1. Enter a <sup> before the text.
2. Enter the text
3. Enter a </sup> after the text.

• Overall, your code should look like this:

^{blah blah blah}

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

blah blah blah ^{blah blah blah}

[edit] Subscript

• To insert, use the following code:

1. Enter a <sub> before the text.
2. Enter the text
3. Enter a </sub> after the text.

• Overall, your code should look like this:

_{blah blah blah}

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

blah blah blah _{blah blah blah}

[edit] Hidden Comment

• To insert a hidden comment, use the following code:

1. Enter a <!-- before the text.
2. Enter the text
3. Enter a --> after the text.

• Overall, your code should look like this:

<!-- blah blah blah-->

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

[edit] Secondary Headline

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

1. Enter a == before the text.
2. Enter the text
3. Enter a == after the text.

• Overall, your code should look like this:

==blah blah blah==

[edit] Tab

• To insert a tab, use the following code:

1. Enter a :: before the text.

• Overall, your code should look like this:

::blah blah blah

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

blah blah blah

[edit] Font Color

• To change the color of text, use the following code:

1. Enter a <span style="color: ColorName"> before the text.
2. Choose the color
3. Enter the text
4. Enter a </span> after the text.

• Overall, your code should look like this:

<span style="color: red">blah blah blah</span>

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

blah blah blah

• Another way to do it is:

1. Enter a <font color="ColorName"> before the text.
2. Choose the color
3. Enter the text
4. Enter a </font> after the text.

• Overall, your code should look like this:

<font color="red">blah blah blah</font>

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

blah blah blah

[edit] Mouse Cursor

• To change the cursor of the mouse when you hover over text, do the following:

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

• Overall, your code should look like this:

<span style="cursor: crosshair;">blah blah blah</span>

• Once you have entered that code, and you put the mouse over the text, it should have a different mouse cursor:

blah blah blah

[edit] Links

• To make external links look internal, use the following

1. Enter a <span class="plainlinks"><font color="002bb8"> before the text.
2. Enter the external link
3. Enter a </font></span> after the text.

• Overall, your code should look like this:

<span class="plainlinks"><font color="002bb8">[http://wikipedia.com external link]</font></span>

• Once you have entered that code, the external link should look like this:

external link

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

[edit] Bolding

• To make text bold, do the following:

1. Enter 3 apostrophes ''' before the text.
2. Enter the text
3. Enter 3 more apostrophes ''' after the text.

• Overall, your code should look like this:

'''text'''

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

text

[edit] Italics

• To italicize text, do the following:

1. Enter 2 apostrophes '' before the text.
2. Enter the text
3. Enter 2 more apostrophes '' after the text.

• Overall, your code should look like this:

''text''

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

text

[edit] Underlining

• To make underline text, do the following:

1. Enter <u> before the text.
2. Enter the text
3. Enter </u> after the text.

• Overall, your code should look like this:

<u>text</u>

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

text

[edit] Font size

• To make text a certain size, use the following code:

1. Enter a <font size="4"> before the text.
2. Choose the size
3. Enter the text
4. Enter a </font> after the text.

• Overall, your code should look like this:

<font size="4">blah blah blah</font>

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

blah blah blah

[edit] Font Families

• To use the following font families, use the codes below:

1. <span style="font-family: (desired font); font-size: 12pt">
2. Enter the font you want
3. Directly after the code, enter your text
4. Enter </span>after the text

So, it should look like:

<span style="font-family: Monotype Corsiva; font-size: 12pt">Blah blah blah</span>

Which will turn out as:

Blah blah blah

[edit] List of Fonts

[edit] Picture formatting

Images, with the proper copyright tags, can be placed onto your userpage.

[edit] Inserting an Image

[[Image:Cscr-featured.png]]

This inserts an image as seen below.

[[Image:Cscr-featured.png|Star]]

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.

[[:Image:Cscr-featured.png]]

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

Image:Cscr-featured.png

[edit] Left Alignment

[[Image:Cscr-featured.png|left]]

This aligns an Image to the left.

[edit] Right Alignment

[[Image:Cscr-featured.png|right]]

This aligns an Image to the right.

[edit] Center alignment

[[Image:Cscr-featured.png|center]]

This aligns an Image in the middle.

[edit] Auto-alignment

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

[edit] 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:

[[Image:Cscr-featured.png|frame]]

Which will appear like this:

NOTE: This will force the image to be in its original size (to change the size use thumbnails or do not use the frame).

[edit] Thumbnails

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:

[[Image:Cscr-featured.png|thumb]]

Which will appear like this:

[edit] Making Images bigger and smaller

To change the size of an image type:

[[Image:Cscr-featured.png|80px]]

[edit] Captions

To add a caption to an image, type:

Caption

[[Image:Cscr-featured.png|thumb|Caption]]

or

[[Image:Cscr-featured.png|thumb|right|Caption]]

or

[[Image:Cscr-featured.png|thumb|right|80px|Caption]]

[edit] Galleries

To make a gallery of images, type

<gallery>
Image:Bob.png|Caption
Image:Cscr-featured.png|Caption
</gallery>

Caption1

Caption2

[edit] 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.

[edit] Digital Clock A tool developed by Anakin101, it allows you to display a digi-clock that displays the time, changing as time, well, passes. The template allows you to change the format (24 or 12 hours), the size of the numbers. and the color of the clock (any color! no, really! It uses transparency and background colors to make any color you want! For the clock on the right, the following bit of code was used: {{User:Anakin101/digiclock |format= 12 |offset= 0 |size= 45 |color= skyblue }}

[edit] Moon Phase On the right is a template that automatically displays the current moon phase, created by Dbachman. The one on the right is more workable, though, by World (no border).

4th quarter, 48%

[edit] Emoticons

Also called smileys, these emoticons 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.

[edit] See also