View source for GSWiki:Customizing your userpage

{{shortcut|GS:CYP|GS:CYU}}
This page is here to help you '''customise your [[GSWiki:User page|userpage]]'''!

==What to put on your userpage==
Well, pretty much anything you want!

===Backgrounds and borders===
Backgrounds and borders are created in two main ways:
#Using the HTML tag <code><nowiki><div></nowiki></code>.
#Using tables.
We will cover both here.

====Using the HTML tag <code><nowiki><div></nowiki></code>====
Div tags follow the basic format as follows:

<pre><div style="background:color; border:width style color; color:c; width:w; height:h;">

----page content here----

</div></pre>

Explanation:
{| class="wikitable"
!width="30%"|code
!result/why
|-
|<code><div </code>
|The opening of the div tag. Without it nothing happens!
|-
|<code>style="</code>
|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.
|-
|<code>background:color;</code>
|This defines the background color. Color can take many values: a name, a hexadecimal code, or a RGB (red green blue) code. More later. Note that the semicolon trailing the color is required to separate different quantities (in this case background from border).
|-
|<code>border:width style color;</code>
|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. Color can take the same values as background above.
|-
|<code>color:c;</code>
|This define the text color. Note the spelling of color. Colors can take the same values as background above. Be aware that link formatting overrides the text color. You will need to use <code><nowiki>[[internal link location|<span style="color:preferred colour;">link name</span>]]</nowiki></code> or <code><nowiki>[external url <span style="color:preferred color;">link name</span>]</nowiki></code>.
|-
|<code>width:w;</code>
|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.
|-
|<code>height:h;</code>
|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.
|-
|<code>"</code>
|This quote mark closes the style so it is required.
|-
|<code>></code>
|This greater-than sign closes the opening div - it marks where the attributes end and the rest of your page begins. It is required.
|-
| <code>----page content here----</code>
|This is the rest of the content of your userpage.
|-
|<code><nowiki></div></nowiki></code>
|This is the closing div tag. It marks where you no longer want the styles defined in the opening tag to no longer apply.
|}

{| class="wikitable"
!Example request
!Code
!Result
|-
|green background, red solid border 2 pixels wide, 100% wide and 500 pixels high
|<code><nowiki><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></nowiki></code>
|<div style="overflow:scroll; height:150px;"><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></div>
|-
|orange background, blue outset border 5px wide, green text
|<code><nowiki><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></nowiki></code>
|<div style="overflow:scroll; height:150px;"><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></div>
|-
|colspan="3"|more example to come...
|}

====Using tables====
Most of the time you can accomplish what you want with div. However sometimes you might want to use a table.

Advantages of tables to div:
*Each cell can have a different style
*Can make positioning easier with use of colspan and rowspan

Disadvantages
*Can be unwieldy to some
*Can get complex with lots of colspans and rowspans

Basic code is as follows:

<pre>{| style="background:color; border:width style color; color:c; width:w; height:h;"
| --content--
|style="background:color; border:width style color; color:c; width:w; height:h;"| --more content--
|-
|colspan="2"| --some more--
|- style="background:color; border:width style color; color:c; width:w; height:h;"
| --more--
| --and more--
|}</pre>


Explanation:

{| class="wikitable"
!width="30%"|code
!result/why
|-
|<code><nowiki>{|</nowiki></code>
|This opens the table. Without it nothing happens!
|-
|<code>style="..."</code>
|All this is exactly the same as above.
|-
|<code><nowiki>|</nowiki></code>
|This defines a cell.
|-
|<code>--content--</code>
|This is the content of that cell
|-
|<code><nowiki>|style="..."| --more content--</nowiki></code>
|This defines the next cell (to the right of the one before), and also gives it a certain style (following all the normal rules). This can be used to make the cell have a different background, or its own border, etc.
|-
|<code><nowiki>|-</nowiki></code>
|This defines a new row.
|-
|<code><nowiki>|colspan="2"| --some more--</nowiki></code>
|This defines a cell which spans two columns. The number can be increased.
|-
|<code><nowiki>|- style="..."</nowiki></code>
|This defines a row with a style (normal rules). The style applies to the cells following it, not preceding it.
|-
|<code><nowiki>|}</nowiki></code>
|This defines the end of the table. It is required.
|}

;See also
* [[Help:Tables]]
* [[mw:Help:Tables]]

{| class="wikitable"
!Example request
!Code
!Result
|-
|green background, red solid border 2 pixels wide, 100% wide and 500 pixels high
|<pre>{| 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.
|}</pre>
|<div style="overflow:scroll; height:150px;">
{| 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>
|-
|black background, gold 5px inset border, purple text, second cell is red with white border, third cell on new row is blue, white text with 2 colspan
|<pre>{| style="background:black; border:5px inset gold; color:purple;"
|Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|style="background:red; border:2px solid white;"|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.
|-
|colspan="2" style="background:blue; color:white;"|Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|}</pre>
|<div style="overflow:scroll; height:250px;">
{| style="background:black; border:5px inset gold; color:purple;"
|Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|style="background:red; border:2px solid white;"|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.
|-
|colspan="2" style="background:blue; color:white;"|Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|}
</div>
|-
|colspan="3"|more examples to come...
|}

===Other useful HTML===
The following tags can be used on your userpage for the following effects:

{| class="wikitable"
!Tag
!Description
!Example
|-
|<code><nowiki><big>text</big></nowiki></code>
|Increases the font size. Can be nested.
|text <big>large text</big>
|-
|<code><nowiki><small>text</small></nowiki></code>
|Decreases the font size. can be nested.
|text <small>small text</small>
|-
|<code><nowiki><sup>text</sup></nowiki></code>
|Superscripts text. Can be nested.
|text<sup>superscript</sup>
|-
|<code><nowiki><sub>text</sub></nowiki></code>
|Subscripts text. Can be nested.
|text<sub>subscript</sub>
|-
|<code><nowiki><div align="alignment">content</div></nowiki></code>
|Aligns content to the left, right or center.
|<div align="center">centered text</div>
|}

===Colors===
Colors can be defined by name (<code>red</code>), by hexadecimal (<code>#FF0000</code>) or RGB number (<code>rgb(255,0,0)</code>. Note that the # for hex and the rgb, ( and , for RGB should be included.

A list of colours can be found [[Help:Color codes|here]].

==Userboxes==
Userboxes are special [[Help:Templates|templates]] designed specifically for use on userpages. They can be used to show many things, from your Gemini Station wiki edits, guild, and so on.

There are many premade ones, and you can also make your own personalised ones.

===Premade userboxes===
A list of premade userboxes can be found [[GSWiki:Userboxes|here]].

;Using premade userboxes
Simply include the userbox's name between a set of curly brackets (AKA braces). For example, if you are a free player, you could use [[Template:Userbox/free player]]:

:<code><nowiki>{{Userbox/free player}}</nowiki></code> 

:Which gives you...

:{{Userbox/free player}}
{{clear}} 

;Positioning
Userboxes by default jump to the left of the page; you may not like that. You can align them more regularly using [[Template:Userboxes]] and [[Template:Userboxesend]]. To use these template, place <code><nowiki>{{userboxes}}</nowiki></code> before your userboxes, and <code><nowiki>{{userboxesend}}</nowiki></code> after them. This is better explained by example:

<pre>{{userboxes}}
{{Userbox/moderator}}
{{Userbox/guild|DadCorp}}
{{userboxesend}}</pre>

gives

{{userboxes}}
{{Userbox/moderator}}
{{Userbox/guild|DadCorp}}
{{userboxesend}}

Notice the list of boxes on the right of the page →

The userboxes header template can be customised further, instructions are [[Template:Userboxes|on the page]].
{{clear}}
<!--
===Custom userboxes===
If you want to say something about yourself via a userbox, but none of the premade ones are just right? Make your own!

Userboxes are made using [[Template:Userbox]]. Here is the base template, along with explanations of each parameter.

<pre>{{Userbox
|id       = ID text/image (the part on the left side)
|id-c     = ID background colour
|id-fc    = ID font colour
|id-s     = ID text size
|info     = info text (the part on the right side)
|info-c   = info background colour
|info-fc  = info font colour
|info-s   = info text size
|border-c = border colour
|border-s = border width (in pixels)
}}</pre>

All the colors can be in hex, RGB, or just the name. See [[#Colors|above]].

The ID is the left hand side of the userbox. Its usually a good idea to limit this to a single word, or an image of 36 by 36 pixel (handily enough, about the size of a normal [[inventory]] sprite).

The info is the right hand side of the infobox; this is generally always text, and can be a few sentences without stretching the box too badly.

Be aware that links in either ID or info override the font colour specified, solution above.

====Some examples====

{| class="wikitable"
!notes
!code
!result
|-
|using an ID of text; notice the unused parameters are omitted; colour names
|<pre>{{Userbox
|id       = Boxes!
|id-c     = green
|id-fc    = white
|info     = This user likes boxes!
|info-c   = lightgreen
|info-fc  = blue
|border-s = 2
}}</pre>
|{{Userbox
|id       = Boxes!
|id-c     = green
|id-fc    = white
|info     = This user likes boxes!
|info-c   = lightgreen
|info-fc  = blue
|border-s = 2
}}
|-
|ID is small image; hex colors
|<pre>{{Userbox
|id       = [[File:Wooden crate.png|Box!]]
|id-c     = #A52A2A
|info     = This user likes boxes!
|info-c   = #800000
|info-fc  = #DCDCDC
|border-c = #000000
}}</pre>
|{{Userbox
|id       = [[File:Wooden crate.png|Wooden box!]]
|id-c     = #A52A2A
|info     = This user also likes wooden boxes!
|info-c   = #800000
|info-fc  = #DCDCDC
|border-c = #000000
}}
|-
|ID is larger, resized image; RGB colors
|<pre>{{Userbox
|id       = [[File:Crate the troll.png|36x36px|Crate the trolls!]]
|id-c     = rgb(47,79,79)
|info     = This user likes crates too!
|info-c   = rgb(176,196,222)
|info-fc  = rgb(0,100,0)
|border-c = rgb(70,0,30)
|border-s = 4
}}</pre>
|{{Userbox
|id       = [[File:Crate the troll.png|36x36px|Crate the trolls!]]
|id-c     = rgb(47,79,79)
|info     = This user likes crates too!
|info-c   = rgb(176,196,222)
|info-fc  = rgb(0,100,0)
|border-c = rgb(70,0,30)
|border-s = 4
}}
|}

====Positioning====
Custom userboxes can be positioned in the same way as premade ones, and can be mixed in:

<pre>{{userboxes}}
{{Userbox/free player}}
{{Userbox
|id       = Boxes!
|id-c     = green
|id-fc    = white
|info     = This user likes boxes!
|info-c   = lightgreen
|info-fc  = blue
|border-s = 2
}}
{{Userbox
|id       = [[File:Wooden crate.png|Box!]]
|id-c     = #A52A2A
|info     = This user likes boxes!
|info-c   = #800000
|info-fc  = #DCDCDC
|border-c = #000000
}}
{{Userbox/IGN|name}}
{{Userbox/highest skill|attack|5}}
{{Userbox
|id       = [[File:Crate the troll.png|36x36px|Crate the trolls!]]
|id-c     = rgb(47,79,79)
|info     = This user likes crates too!
|info-c   = rgb(176,196,222)
|info-fc  = rgb(0,100,0)
|border-c = rgb(70,0,30)
|border-s = 4
}}
{{userboxesend}}</pre>

{{userboxes}}
{{Userbox/free player}}
{{Userbox
|id       = Boxes!
|id-c     = green
|id-fc    = white
|info     = This user likes boxes!
|info-c   = lightgreen
|info-fc  = blue
|border-s = 2
}}
{{Userbox
|id       = [[File:Wooden crate.png|Box!]]
|id-c     = #A52A2A
|info     = This user likes boxes!
|info-c   = #800000
|info-fc  = #DCDCDC
|border-c = #000000
}}
{{Userbox/IGN|name}}
{{Userbox/highest skill|attack|5}}
{{Userbox
|id       = [[File:Crate the troll.png|36x36px|Crate the trolls!]]
|id-c     = rgb(47,79,79)
|info     = This user likes crates too!
|info-c   = rgb(176,196,222)
|info-fc  = rgb(0,100,0)
|border-c = rgb(70,0,30)
|border-s = 4
}}
{{userboxesend}}-->

==Subpages==
Sometimes, you want something in your userspace but not on your main userpage. This is where making [[Help:subpages|subpages]] comes in.

There are three ways to make a subpage:
*Edit a page and create a link to a non-existent page and press preview (e.g. put in <code><nowiki>[[User:Example/Missions]]</nowiki></code> for a Missions subpage (remember, its case sensitive), then click the link (it should take you straight to an edit box).
*Type in the subpage you want into the search box to the left (e.g. type in <code>User:Example/Missions</code>), then click the ''Create this page'' link.
*Go to [[Special:CreatePage]] and put your subpage as the title (e.g. <code>User:Example/Cheese</code>) and your content in the edit box.

===Usage of subpages===
You can use subpages for whatever you like, just like your base userpage. An example would be Personal sandboxes for code testing.

[[Category:Gem Wiki community]]