Wikipedia:User page design center/Style

From Wikipedia, the free encyclopedia
Jump to: navigation, search
Introduction About you Navigation aids Metadata Your scripts Hall of Fame Style Menus & subpages Art, Decor, etc. Help and collaboration


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


Layout themes[edit]

Article format[edit]

The default format for user pages is the article format, using standard headings, paragraphs, bulleted lists, etc. But an article-styled user page need not look drab and is more than adequate for presenting information about yourself. Since it is so easy, it's a perfect place to start. See the following user pages as examples of well-developed user pages in article format:

Menu format[edit]

Format elements[edit]

Alternate page title header[edit]

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.

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

  1. First, create a user subpage (described in this section) titled "User:Example User/Header"
  2. 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")
  3. Transclude the header onto your userpage (type the full name of the subpage inside double curly brackets) {{like this}}

Example code:

{| style="position:absolute; top:-50px; background:#CCCCFF; color:#000000;" valign="middle"
|-
|<h1 style="margin:0; border-bottom:0; color:COLOR OF TEXT;">
<center>TECHIEZHELP.LLC</center>
|}

Borders[edit]

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 (</div>, </tr>, </td>, |}) at the end of the border markup examples.

Some example borders:

Servers and Network Issues!
User Page · Talk page · Archive · Awards · Contributions · Edit count · Sandbox

We have several servers located in the small room ajacent 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.




Picture of the day
Grammodes geometrica

Grammodes geometrica
Photograph: Muhammad Mahdi Karim
ArchiveMore featured pictures...



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



How's this for a border?


Place your navbar here

Original Barnstar.png
Original Barnstar.png
Hi there
   

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT To customize, change the border colors. TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

Pix.gif
Original Barnstar.png
Original Barnstar.png
What's up?
   

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

Pix.gif

Round corners[edit]

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
To add round corners to a box or frame, include the {{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:

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

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

For a cool example of the use of round corners, see Zeerus' user page

Ah, the sissy way to do it.

Here's the manly way: -moz-border-radius:Xpx, where X is the number of pixels wide the rounded edge should be.

Color[edit]

Main article: Web colors

Change page color with CSS[edit]

To change the color of your user page, simply age the following code, replacing the Capatilized text with the desired web colors:

{| | style="background:BACKGROUND COLOR; color:TEXT COLOR" |

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

Contents[edit]

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

Show/Hide sections[edit]

Here's an example of collapsed/expandable sections:





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

Action links[edit]

Switched features[edit]

Boxes[edit]

  • 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:
Hi

Curved borders[edit]

  • 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
  Hi, I'm trying to get your attention and differentiate my message on the page.  

Text formatting[edit]

Here are some tips on how to format your text:

Center-Align[edit]

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

Centered text

Strike Through Text[edit]

  • 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

Superscript[edit]

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

Normal text<sup>superscript text</sup>

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

Normal textsuperscript text

Subscript[edit]

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

Normal text<sub>subscript text</sub>

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

Normal textsubscript text

Hidden Comment[edit]

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

Secondary Headline[edit]

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

Tab[edit]

  • 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

Font Color[edit]

  • 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

Mouse Cursor[edit]

  • 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

Links[edit]

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

Bolding[edit]

  • 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

Italics[edit]

  • 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

Underlining[edit]

  • 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

Font size[edit]

  • To make text a certain size, use the following code:
  1. Enter a <font size="10"> 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

Font Families[edit]

  • 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: Arial; font-size: 12pt">Blah blah blah</span>

Which will turn out as:

Blah blah blah

List of Fonts[edit]

Font Name: Example of font:
Agency FB The Quick Brown Fox Jumps Over The Lazy Dog
Algerian The Quick Brown Fox Jumps Over The Lazy Dog
Andale Mono The Quick Brown Fox Jumps Over The Lazy Dog
Arial The Quick Brown Fox Jumps Over The Lazy Dog
Arial Black The Quick Brown Fox Jumps Over The Lazy Dog
Arial Narrow The Quick Brown Fox Jumps Over The Lazy Dog
Arial Rounded MT Bold The Quick Brown Fox Jumps Over The Lazy Dog
Baskerville Old Face The Quick Brown Fox Jumps Over The Lazy Dog
Batik Regular The Quick Brown Fox Jumps Over The Lazy Dog
Bauhaus 93 The Quick Brown Fox Jumps Over The Lazy Dog
Bell MT The Quick Brown Fox Jumps Over The Lazy Dog
Berlin Sans FB The Quick Brown Fox Jumps Over The Lazy Dog
Berlin Sans FB Demi The Quick Brown Fox Jumps Over The Lazy Dog
Bernard MT Condensed The Quick Brown Fox Jumps Over The Lazy Dog
Blackadder ITC The Quick Brown Fox Jumps Over The Lazy Dog
Bodoni MT The Quick Brown Fox Jumps Over The Lazy Dog
Bodoni MT Black The Quick Brown Fox Jumps Over The Lazy Dog
Bodoni MT Condensed The Quick Brown Fox Jumps Over The Lazy Dog
Bodoni MT Poster Compressed The Quick Brown Fox Jumps Over The Lazy Dog
Book Antiqua The Quick Brown Fox Jumps Over The Lazy Dog
Bookman Old Style The Quick Brown Fox Jumps Over The Lazy Dog
Bradley Hand ITC The Quick Brown Fox Jumps Over The Lazy Dog
Britannic Bold The Quick Brown Fox Jumps Over The Lazy Dog
Broadway The Quick Brown Fox Jumps Over The Lazy Dog
Brush Script MT The Quick Brown Fox Jumps Over The Lazy Dog
Calibri The Quick Brown Fox Jumps Over The Lazy Dog
Californian FB The Quick Brown Fox Jumps Over The Lazy Dog
Calisto MT The Quick Brown Fox Jumps Over The Lazy Dog
Cambria The Quick Brown Fox Jumps Over The Lazy Dog
Candara The Quick Brown Fox Jumps Over The Lazy Dog
Castellar The Quick Brown Fox Jumps Over The Lazy Dog
Centaur The Quick Brown Fox Jumps Over The Lazy Dog
Century Gothic The Quick Brown Fox Jumps Over The Lazy Dog
Century Schoolbook The Quick Brown Fox Jumps Over The Lazy Dog
Chiller The Quick Brown Fox Jumps Over The Lazy Dog
Colonna MT The Quick Brown Fox Jumps Over The Lazy Dog
Comic Sans MS The Quick Brown Fox Jumps Over The Lazy Dog
Consolas The Quick Brown Fox Jumps Over The Lazy Dog
Constantia The Quick Brown Fox Jumps Over The Lazy Dog
Cooper Black The Quick Brown Fox Jumps Over The Lazy Dog
Copperplate Gothic Bold The Quick Brown Fox Jumps Over The Lazy Dog
Copperplate Gothic Light The Quick Brown Fox Jumps Over The Lazy Dog
Corbel The Quick Brown Fox Jumps Over The Lazy Dog
Courier New The Quick Brown Fox Jumps Over The Lazy Dog
Curlz MT The Quick Brown Fox Jumps Over The Lazy Dog
Edwardian Script ITC The Quick Brown Fox Jumps Over The Lazy Dog
Elephant The Quick Brown Fox Jumps Over The Lazy Dog
Engravers MT The Quick Brown Fox Jumps Over The Lazy Dog
Eras Bold ITC The Quick Brown Fox Jumps Over The Lazy Dog
Eras Demi ITC The Quick Brown Fox Jumps Over The Lazy Dog
Eras Light ITC The Quick Brown Fox Jumps Over The Lazy Dog
Eras Medium ITC The Quick Brown Fox Jumps Over The Lazy Dog
Felix Titling The Quick Brown Fox Jumps Over The Lazy Dog
Footlight MT Light The Quick Brown Fox Jumps Over The Lazy Dog
Forte The Quick Brown Fox Jumps Over The Lazy Dog
Franklin Gothic Book The Quick Brown Fox Jumps Over The Lazy Dog
Franklin Gothic Demi The Quick Brown Fox Jumps Over The Lazy Dog
Franklin Gothic Heavy The Quick Brown Fox Jumps Over The Lazy Dog
Franklin Gothic Medium The Quick Brown Fox Jumps Over The Lazy Dog
Franklin Gothic Medium Cond The Quick Brown Fox Jumps Over The Lazy Dog
Freestyle Script The Quick Brown Fox Jumps Over The Lazy Dog
French Script MT The Quick Brown Fox Jumps Over The Lazy Dog
Garamond The Quick Brown Fox Jumps Over The Lazy Dog
Georgia The Quick Brown Fox Jumps Over The Lazy Dog
Gigi The Quick Brown Fox Jumps Over The Lazy Dog
Gill Sans MT The Quick Brown Fox Jumps Over The Lazy Dog
GulimChe The Quick Brown Fox Jumps Over The Lazy Dog
Impact The Quick Brown Fox Jumps Over The Lazy Dog
Kristen ITC The Quick Brown Fox Jumps Over The Lazy Dog
Lucida Console The Quick Brown Fox Jumps Over The Lazy Dog
Lucida Handwriting The Quick Brown Fox Jumps Over The Lazy Dog
MingLiU The Quick Brown Fox Jumps Over The Lazy Dog
Monotype Corsiva The Quick Brown Fox Jumps Over The Lazy Dog
MS Gothic The Quick Brown Fox Jumps Over The Lazy Dog
MS Hei The Quick Brown Fox Jumps Over The Lazy Dog
MS Song The Quick Brown Fox Jumps Over The Lazy Dog
Old English Text MT The Quick Brown Fox Jumps Over The Lazy Dog
Symbol The Quick Brown Fox Jumps Over The Lazy Dog
Tahoma The Quick Brown Fox Jumps Over The Lazy Dog
Times New Roman The Quick Brown Fox Jumps Over The Lazy Dog
Trebuchet MS The Quick Brown Fox Jumps Over The Lazy Dog
Verdana The Quick Brown Fox Jumps Over The Lazy Dog
Webdings The Quick Brown Fox Jumps Over The Lazy Dog
Wingdings The Quick Brown Fox Jumps Over The Lazy Dog
Wingdings 2 The Quick Brown Fox Jumps Over The Lazy Dog
Wingdings 3 The Quick Brown Fox Jumps Over The Lazy Dog

Picture formatting[edit]

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

Inserting an Image[edit]

[[Image:Cscr-featured.png]]

This inserts an image as seen below.

Cscr-featured.png

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

Star

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

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

Image:Cscr-featured.png

Left Alignment[edit]

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

This aligns an Image to the left.

Cscr-featured.png


Right Alignment[edit]

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

This aligns an Image to the right.

Cscr-featured.png


Center alignment[edit]

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

This aligns an Image in the middle.

Cscr-featured.png


Auto-alignment[edit]

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

Framing[edit]

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:

Cscr-featured.png

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

Thumbnails[edit]

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:

Cscr-featured.png


Making Images bigger and smaller[edit]

To change the size of an image type:

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

Cscr-featured.png

Captions[edit]

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

Galleries[edit]

To make a gallery of images, type

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

Templates[edit]

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.

Digital Clock[edit]

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
}}
LED digit 1.pngLED digit 2.pngLED colon.pngLED digit 5.pngLED digit 9.pngLED pm.png

Moon Phase[edit]

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

User:World/moon

Emoticons[edit]

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.

See also[edit]

Suggested Tools (Scripts)