Introduction | About you | Navigation aids | Metadata | Your scripts | Style | Menus & subpages | Art, Decor, etc. | Hall of Fame |
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....
To create a table of contents like the above (that changes its direction of lean randomly), use this code:
<div style="((#invoke:RexxS|wobble)) float:left">__TOC__</div>
Our "Cheatsheet" is a good starting point for learning basic Wikipedia formatting. A more complete guide is 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 here).
When you come across an editor (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.
As of 2018, the 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 User:The Transhumanist.
Many of the various templates from the growing collection of portal elements can be used to great effect on a user page's design. For example...
((Portal image banner|File:Ethipothala Water Falls.jpg |maxheight=140px |overflow=Hidden ))
looks like this:
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:
See ((Transclude files as random slideshow)) for more details.
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
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|HEADER TEXT YOU WANT)) |}
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! | |
---|---|
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. |
|
width=100% style="border-radius:1em; box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.75);; padding: 5px; background:orange; border: solid 4px red;" | width=100% cellspacing=0 style="border-radius:1em; box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.75);; background: lime; border: solid 4px yellow;" |
|}
|
|}
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
Or, try another way: -moz-border-radius:Xpx, where X is the number of pixels wide the rounded edge should be.
To change the color of your user page, simply add the following code, replacing the capitalized 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) transcluded from User:Resident Mario/Tablet.
To suppress the automatic table of contents box from appearing on your user page, place the following line somewhere on your user page:
__NOTOC__
To have the table of contents box float to the right, place the following line where you want the top to appear:
((TOCright))
Here's an example of collapsed/expandable sections:
About me
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Subpages
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
To do
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Licensing
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
There are several templates that can be used for this in Category:Collapse templates.
To use custom dots for bullets in lists, you can insert small files, like this:
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
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 "<br/>", 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:
<br/> [[File:Green 00ff00 pog.svg|9px]] [[Lorem ipsum]] dolor sit amet,<br/> [[File:Yellow ffff00 pog.svg|9px]] consectetur adipiscing elit,<br/> [[File:Red pog.svg|9px]] sed do eiusmod tempor incididunt<br/> [[File:Purple 8000ff pog.svg|9px]] ut labore et dolore magna aliqua.<br/> [[File:Blue 0080ff pog.svg|9px]] Ut enim ad minim veniam,<br/>
For a real-life example of how the above method is applied upon a user page, see the page User:Tom.Reding.
Of course, you are not limited to dots. This method can be employed using icons, emoticons, etc.
<div style="text-align: center;">Centered text</div>
<s>blah blah blah</s>
blah blah blah
Normal text<sup>superscript text</sup>
Normal textsuperscript text
Normal text<sub>subscript text</sub>
Normal textsubscript text
<!-- blah blah blah-->
==blah blah blah==
::blah blah blah
<span style="color: red">blah blah blah</span>
blah blah blah
<font color="color:red;">blah blah blah</font>
blah blah blah
You can use this template to make some text that gradually changes its colour from left to right (blah blah blah) and this template to create text that has every colour of the rainbow as a gradient (blah blah blah). To customise the color and direction of the text, you may use this template which allows customisation of text like this (blah blah blah).
<span style="cursor: crosshair;">blah blah blah</span>
blah blah blah
<span class="plainlinks">[http://wikipedia.com external <span style="color:#002bb8">link</span>]</span>
'''
before the text.'''
after the text.'''
text'''
text
''
before the text.''
after the text.''
text''
text
<u>text</u>
text
<span style="font-size:large;">blah blah blah</span>
blah blah blah
So, it should look like:
<span style="font-family: comic sans ms; font-size: 12pt">awesome</span>
Which will turn out as:
awesome
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 |
Images, with the proper copyright tags, can be placed onto your user page.
[[File:Cscr-featured.png]]
This inserts an image as seen below.
[[File: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.
[[:File:Cscr-featured.png]]
Add a colon before Image to create a link to an image.
[[File:Cscr-featured.png|left]]
This aligns an Image to the left.
[[File:Cscr-featured.png|right]]
This aligns an Image to the right.
[[File:Cscr-featured.png|center]]
This aligns an Image in the middle.
You can auto-align an Image one of two ways.
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:
[[File: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).
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:
[[File:Cscr-featured.png|thumb]]
Which will appear like this:
To change the size of an image type:
[[File:Cscr-featured.png|80px]]
To add a caption to an image, type:
[[File:Cscr-featured.png|thumb|Caption]]
or
[[File:Cscr-featured.png|thumb|right|Caption]]
or
[[File:Cscr-featured.png|thumb|right|80px|Caption]]
To make a gallery of images, type
<gallery> File:Cscr-featured.png|Caption1 File:Barnprinter2.png|Caption2 </gallery>
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.
Moon Phase[edit]On the right is a template that automatically displays the current moon phase, created by Dbachman. |
|
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.
|
|
|
Suggested Tools (Scripts) |