This page is here to help you customise your userpage!
What to put on your userpage[]
Well, pretty much anything you want! There are a few things you aren't allowed:
- Personal images. Per the images and media policy, All images hosted on the wiki must be used in the main article namespace at least once. You cannot upload an image solely for use on your userpage.
- You also shouldn't upload an image, add it to one article and your userpage, unless it complies with all the points of the policy and is superior to any existing image of the subject.
- You're allowed to use images already on the wiki on your userpage as much as you want.
- Personal images of your character can be hosted externally, but more on that later.
- Flaming and personal attacks. Your userpage shouldn't be used to flame or personally attack any user, per the user treatment policy. Consistently adding such material can result in a block. Additionally, formatting done to the userpage must not make it difficult to access system links found in the side bar, the header, or the footer.
Anything else is fair game!
Some userpage code[]
All of the following assumes you are not using the Rich text editor. You can disable it by visiting your preferences, and unchecking Enable Rich Text Editing in the Editing tab (make sure you bypass your cache by following the instructions at the bottom of the page, or here).
Backgrounds and borders[]
Backgrounds and borders are created in two main ways:
- Using the HTML tag
<div>. - Using tables.
We will cover both here.
Using the HTML tag <div>[]
Div tags follow the basic format as follows:
<div style="background:colour; border:width style colour; color:c; width:w; height:h;"> ----page content here---- </div>
Explanation:
| code | result/why |
|---|---|
<div
|
The opening of the div tag. Without it nothing happens! |
style="
|
Most of the userpage quantities (background, border, text size, etc.) are styles, so a style attribute is opened. Note the quote mark, this is required to open the style. |
background:colour;
|
This defines the background colour. Colour can take many values: a name, a hexadecimal code, or a RGB (red green blue) code. More later. Note that the semicolon trailing the colour is required to separate different quantities (in this case background from border). |
border:width style colour;
|
This defines the border. Width is the width of the border, usually given in pixels (e.g. 4px). Style is what the border is, e.g. solid, dashed, double, triple, etc. See also Help:Customising your signature - although its uses span the method is the same. Colour can take the same values as background above. |
color:c;
|
This define the text colour. Note the spelling of color. Colours can take the same values as background above. Be aware that link formatting overrides the text colour. You will need to use [[internal link location|<span style="color:preferred colour;">link name</span>]] or [external url <span style="color:preferred colour;">link name</span>].
|
width:w;
|
This defines how wide this border/background/attributes stretches across the page. W takes a value of a percentage (e.g. 80%), or length in pixels (300px). A common usage is 100% - to span the entire width of the page. |
height:h;
|
This defines the height the attributes span down the page. H can be a percentage or a length, like width. Note again the semicolon - its not strictly required in this case (being the last quantity in the style) but should be used. |
"
|
This quote mark closes the style so it is required. |
>
|
This greater-than sign closes the opening div - it marks where the attributes end and the rest of your page begins. It is required. |
----page content here----
|
This is the rest of the content of your userpage. |
|
This is the closing div tag. It marks where you no longer want the styles defined in the opening tag to no longer apply. |
- Some examples
Note that the results are a little crushed due to the table; copy the code to your userpage or the sandbox and preview to see it properly.
| Example request | Code | Result |
|---|---|---|
| green background, red solid border 2 pixels wide, 100% wide and 500 pixels high | <div style="background:green; border:2px solid red; width:100%; height:500px;">
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</div>
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laborious 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. |
| orange background, blue outset border 5px wide, green text | <div style="background:orange; border:5px outset blue; color:green;">
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</div>
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laborious 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. |
| more example to come... | ||