RuneScape:User page/Customising

Shortcuts:

• RS:CYP
• RS:CYU

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 VisualEditor. You can disable it by visiting your preferences, and unchecking Enable the visual editor. It will be available in the following namespaces: User, File, Category, (Main), Transcript in the Editing section.

Backgrounds and borders

Backgrounds and borders are created in two main ways:

1. Using the HTML tag <div>.
2. 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.
</div>	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 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.
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 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.
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:

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

Explanation:

code	result/why
{|	This opens the table. Without it nothing happens!
style="..."	All this is exactly the same as above.
|	This defines a cell.
--content--	This is the content of that cell
|style="..."| --more content--	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.
|-	This defines a new row.
|colspan="2"| --some more--	This defines a cell which spans two columns. The number can be increased.
|- style="..."	This defines a row with a style (normal rules). The style applies to the cells following it, not preceding it.
|}	This defines the end of the table. It is required.

See also

• Help:Editing/Tables
• mw:Help:Tables

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	{| 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. |}	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.
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	{| 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. |}	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.
more examples to come...

Other useful HTML

The following tags can be used on your userpage for the following effects:

Tag	Description	Example
<big>text</big>	Increases the font size. Can be nested.	text large text
<small>text</small>	Decreases the font size. can be nested.	text small text
<sup>text</sup>	Superscripts text. Can be nested.	textsuperscript
<sub>text</sub>	Subscripts text. Can be nested.	textsubscript
<div align="alignment">content</div>	Aligns content to the left, right or center.	centered text

See also MDN's HTML elements reference and CSS reference.

Colours

Colours can be defined by name (red), by hexadecimal (#FF0000) or RGB number (rgb(255,0,0). Note that the # for hex and the rgb, ( and , for RGB should be included.

A list of colours can be found here. See also MDN's <color> documentation.

Userboxes

Userboxes are special templates designed specifically for use on userpages. They can be used to show many things, from your RuneScape username, guild membership, clans, skills, editing habits, 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 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:

{{Userbox/free player}}

Which gives you...

	This user is a free player.

Some userboxes require an additional input, for example Template:Userbox/RS name, which displays your username:

{{Userbox/IGN|name}}

Which gives you...

	This user plays RuneScape as name.

or Template:Userbox/highest skill:

{{Userbox/highest skill|attack|5}}

Which gives you....

	This user's highest skill is Attack, with a level of 5.

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 {{userboxes}} before your userboxes, and {{userboxesend}} after them. This is better explained by example:

{{userboxes}}
{{Userbox/free player}}
{{Userbox/IGN|name}}
{{Userbox/highest skill|attack|5}}
{{userboxesend}}

gives

Userboxes
This user is a free player. This user plays RuneScape as name. This user's highest skill is Attack, with a level of 5.

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

The userboxes header template can be customised further, instructions are on the page.

Wiki stats

You can add your own user edit counts to your page using {{Editcounts}}. For example {{Editcounts|Elessar2}} produces:

Total edits
14,669
Main:	User:	File:	Template:	Update:	Map:
4,764	933	152	1,043	2	594
Talk:	User talk:	File talk:	Template talk:	Update talk:	Map talk:
52	68	0	19	0	2
RuneScape:	Transcript:	Module:	Calculator:	Forum:	MediaWiki:
713	135	2,366	215	185	1,071
RuneScape talk:	Transcript talk:	Module talk:	Calculator talk:	Exchange:	Data:
18	0	3	25	0	0

Goals

Goals can be used to show what you want to get, and how close you are to that. There are two main types:

• Skill goals, using Template:Goal
• Non-skill goals, using Template:SimpleGoal

Skill goals

Main article: Template:Goal

These goals show how close you are to a specified level, based on your current level or experience. If a player name is specified, the level and experience of that player's stats will be pulled from HiScores automatically.

The base code is as follows:

{{Goal
|Skill      = name of skill
|Label      = optional label (replaces skill image)
|Goal       = target level
|Level      = current level
|Xp         = current experience points (alternative to Level)
|Name       = player name (if given, ignores Level and Xp)
|BarColor1  = colour of achieved part of progress bar (defaults to a dark blue)
|TextColor1 = text colour for achieved part of progress bar (default white)
|BarColor2  = colour of remaining part of progress bar (defaults to a light blue)
|TextColor2 = text colour for remaining part of progress bar (default white)
}}

These are better explained by example:

Description	Code	Goal
Train Attack from 1 to 99	{{Goal |Skill=attack |Goal=99 |Level=1 }}	0% 1  99  98 levels
Train level 89 Mining (5,000,000 experience) to level 92	{{Goal |Skill=mining |Goal=92 |Xp=5000000 }}	77% 89  92  3 levels
Train Crafting from 40 to 60, changing bar colours to the cape colours	{{Goal |Skill=crafting |Goal=60 |Level=40 |BarColor1=#997755 |BarColor2=#FFCC00 }}	14% 40  60  20 levels
Train Defence to 65, using the HiScores for R4ng3rNo0b889	{{Goal |Name=R4ng3rNo0b889 |Skill=defence |Goal=65 }}	74% 62  65  3 levels

Non-skill goals

Non-skill goals work in much the same way as skill goals. Here's the base code:

{{SimpleGoal
|Label     = optional label (replaces image of coins)
|Goal      = target number
|Have      = current number
|Units     = units to display after the amount to go (e.g "gp")
|BarColor1 = color of achieved part of progress bar (default gold)
|BarColor2 = color of remaining part of progress bar (default dark red)
}}

Again, some examples:

description	code	goal
get 5,000,000 coins from 50,000 coins	{{SimpleGoal |Goal = 5000000 |Have = 50000 |Units = coins }}	1% 50,000 4,950,000 coins
get 270 quest points from 200	{{SimpleGoal |Label = [[File:Quest.png]] |Goal = 270 |Have = 200 |Units = Quest Points |BarColor1 = steelblue |BarColor2 = aqua }}	74% 200   70 Quest Points
get 1,000 edits from 538	{{SimpleGoal |Label = [[File:Wiki.png|30px]] |Goal = 1000 |Have = 538 |Units = edits |BarColor1 = darkslateblue |BarColor2 = maroon }}	53% 538   462 edits

Other user templates

There are many other templates you can use on your userpage to enhance it; a full list is here (not that some pages here belong to certain users). Here will be coverage of some of these templates.

Template:Achieve

This template adds a large table to your page with ticks or crosses to signify you've completed a milestone.

Base code is:

{{Achieve
| skill99      = Obtained a level 99
| skill200m    = Obtained 200 million experience in a skill
| music500     = Obtained 500 music tracks
| musicAll     = Obtained all music tracks
| questFree    = Completed all free quests
| questMem     = Completed all members quests
| questCape    = Obtained the quest point cape
| miniquest    = Completed all miniquests
| minigame     = Played all minigames
| champ1       = Completed 1 champion's challenge
| champAll     = Completed all champion's challenges
| diaryArdougne= Completed the Ardougne diary
| diaryKaramja = Completed the Karamja diary
| diaryVarrock = Completed the Varrock diary
| diaryLumby   = Completed the Lumbridge and Draynor diary
| diaryFalador = Completed the Falador diary
| diaryFremmy  = Completed the Fremennik diary
| diarySeers   = Completed the Seers' Village diary
| diaryAll     = Completed all diaries
| circusAll    = Obtained all circus costumes
| Phoenix      = Killed the Phoenix
| BeginTB      = Yes
| BasicTB      = No
| StandTB      = No
| ProTB        = No
| ChampTB      = No
| guildFree    = Member of all free guilds
| guildMem     = Member of all members guilds
| guildAll     = Member of all guilds
| emoteUnlock  = Unlocked all emotes
| emoteHoliday = Unlocked all holiday emotes
| edit100      = 100 edits
| edit500      = 500 edits
| edit1000     = 1,000 edits
| edit5000     = 5,000 edits
| edit10000    = 10,000 edits
}}

All inputs are either Yes or No.

Example:

Achievements

Skills
Level 99 in one (or more) skills
200M experience in one (or more) skills
Music
500+ tracks
All tracks
Quests
All free quests
All member quests
All miniquests
Helmet of trials
Quest Cape
Minigames
Played all minigames
Champion's Challenge
Completed 1 or more Challenges
Completed all Challenges
Achievements
Ardougne achievements
Karamja achievements
Varrock achievements
Lumbridge achievements
Falador achievements
Fremennik achievements
Seers' Village achievements
Desert achievements
Morytania achievements
Daemonheim achievements
All achievements
Distractions and Diversions
Obtained all of the Circus costumes
Killed the Phoenix
Beginner's tackle box
Basic tackle box
Standard tackle box
Professional tackle box
Champion's tackle box
Guilds
All free guilds
All member guilds
All guilds
Emotes
All unlockable emotes
Holiday emotes
RuneScape Wiki
100 edits
500 edits
1,000 edits
5,000 edits
10,000 edits
30,000 edits
50,000 edits
100,000 edits

{{Achieve
| skill99      = Yes
| skill200m    = No
| music500     = Yes
| musicAll     = No
| questFree    = Yes
| questMem     = No
| questCape    = Yes	
| miniquest    = No
| minigame     = No
| champ1       = No
| champAll     = No
| diaryArdougne= Yes
| diaryKaramja = Yes
| diaryVarrock = Yes
| diaryLumby   = Yes
| diaryFalador = Yes
| diaryFremmy  = Yes
| diarySeers   = Yes
| diaryAll     = Yes
| circusAll    = No
| Phoenix      = No
| guildFree    = Yes
| guildMem     = Yes
| guildAll     = Yes
| emoteUnlock  = Yes
| emoteHoliday = Yes
| edit100      = Yes
| edit500      = Yes
| edit1000     = No
| edit5000     = No
| edit10000    = No
}}

Statistics

Many users like to show their stats on their userpage. There are many ways to do this, here are some examples.

Template:User stats

One of the more popular options. The code is as follows:

{{user stats
|Name          = Player name
|Attack        = Attack level
|Constitution  = Constitution level
|Mining        = Mining level
|Strength      = Strength level
|Agility       = Agility level
|Smithing      = Smithing level
|Defence       = Defence level
|Herblore      = Herblore level
|Fishing       = Fishing level
|Ranged        = Ranged level
|Thieving      = Thieving level
|Cooking       = Cooking level
|Prayer        = Prayer level
|Crafting      = Crafting level
|Firemaking    = Firemaking level
|Magic         = Magic level
|Fletching     = Fletching level
|Woodcutting   = Woodcutting level
|Runecrafting  = Runecrafting level
|Slayer        = Slayer level
|Farming       = Farming level
|Construction  = Construction level
|Hunter        = Hunter level
|Summoning     = Summoning level
|Dungeoneering = Dungeoneering level
|Divination    = Divination level
|Invention     = Invention level
|Quest         = Quest Points
|Combat        = Combat level
|Task          = Tasks completed
|Music         = Number of music tracks unlocked as shown on Music Player
|Total         = Optional - The template automatically sets your total level, but this can set it manually.
|Date          = "As of" date
|extra-css     = Additional CSS style code. Optional.
|align         = Defines the template's placement. Defaults to right. Optional.
}}

Example:

Example
Total level: 1
1	10	1
1	1	1
1	1	1
1	1	1
1	1	1
1	1	1
1	1	1
1	1	1
1	1	1
1	3	1
21	52	5,000
As of 9 June 2023
Hover for XP and rank. Ranks for RuneScape.

{{user stats
|Name=Example
|Attack=1
|Constitution=10
|Mining=1
|Strength=1
|Agility=1
|Smithing=1
|Defence=1
|Herblore=1
|Fishing=1
|Ranged=1
|Thieving=1
|Cooking=1
|Prayer=1
|Crafting=1
|Firemaking=1
|Magic=1
|Fletching=1
|Woodcutting=1
|Runecrafting=1
|Slayer=1
|Farming=1
|Construction=1
|Hunter=1
|Summoning=1
|Dungeoneering=1
|Divination=1
|Invention=1
|Quest=1
|Combat=3
|Task=52
|Music=21
|Total=1
|RuneScore=5000
|Date=[[{{LOCALDAY}} {{LOCALMONTHNAME}}]] [[{{LOCALYEAR}}]]
}}

Note: If you want your stats to look like the in-game skill template, you use Template:Statbox.

An alternative to this is Template:User stats (f2p), which is the same input, but omits the members-only skills.

Template:Skillbar

The same syntax as User stats, but a different display - a horizontal bar. Code input is the same as above.

Example:

{{Skillbar
|Name=Example
|Attack=1
|Constitution=10
|Mining=1
|Strength=1
|Agility=1
|Smithing=1
|Defence=1
|Herblore=1
|Fishing=1
|Ranged=1
|Thieving=1
|Cooking=1
|Prayer=1
|Crafting=1
|Firemaking=1
|Magic=1
|Fletching=1
|Woodcutting=1
|Runecrafting=1
|Slayer=1
|Farming=1
|Construction=1
|Hunter=1
|Summoning=1
|Dungeoneering=1
|Divination=1
|Invention=1
|Quest=1
|Combat=3
|Music=21
|Total=1
|RuneScore=5000
|Date=[[{{LOCALDAY}} {{LOCALMONTHNAME}}]] [[{{LOCALYEAR}}]]
}}

result:

Skills (hover icons for levels)

There are methods to automate the process of updating your stats; see below.

Personal images

As was discussed above, personal images purely for use on your userpage are not allowed to be uploaded to the wiki. However, this does not mean you can't show off your character on your userpage!

To do this there are two ways:

• Use the Photo booth ingame and display those images
• Upload the image to an external image hosting site

The photo booth

In game, members can visit the photo booth just west of Falador. The photo booth will take a picture of your character wearing their equipment, and display it on the forums as a chat head and on your Adventurer's Log. You can also display the image on your userpage!

Place the following code on your userpage (do not link it) for the full-body shot:

http://services.runescape.com/m=avatar-rs/g=runescape/your character name/full.png

Place the following code on your userpage (do not link it) for the chat head shot:

http://services.runescape.com/m=avatar-rs/g=runescape/your character name/chat.png

External hosting

The Photo Booth is good and all, but maybe you want something different - higher quality, larger, an animation, transparency, or a non-goofy smile - you are free to do so by taking, editing and uploading your own images to an external hosting site.

The two main hosting sites supported by this wiki are PhotoBucket and ImageShack. Uploading images is free to both - you can also create accounts to organise and keep track of your images for free, with generous upload limits. (see here for a full list of other allowed sites)

Once you upload an image, on the image description page there will be a Direct link to image - copy this and place it on your userpage where desired (do not link it, i.e. do not put [] around it), just like the Photo Booth images.

You can also use these external images in userboxes and other templates; you aren't limited to just your RuneScape character.

Subpages

Sometimes, you want something in your userspace but not on your main userpage. This is where making 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 [[User:Example/Quests]] for a Quests 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 User:Example/Quests), then click the Create this page link.
• Go to Special:CreatePage and put your subpage as the title (e.g. User:Example/Cheese) and your content in the edit box.

Usage of subpages

You can use subpages for whatever you like, just like your base userpage. Some popular examples:

• Personal sandboxes for code testing - as RuneScape:Sandbox gets cleaned regularly.
• Quest/Music logs - a list of all the quests/music and whether you have started/completed/unlocked them - you can use Template:Unstarted, Template:Started and Template:Done here.
• Drop logs - as they are not allowed in articles, you can place them here to record and analyse them (try Template:Log Table and/or Template:Charm table).

Having updated stats

Note: You have to have at least one skill in the hiscores to do this; having all skills ranked is preferable.

You can add your display name (not your username) to the {{user stats}} template to its 'Name' parameter and it'll automatically show your stats, however you can also manually override them if you'd like. For more information see the documentation on that template page.

RSS

RuneScape feeds

Currently, Jagex offers two RSS feeds for RuneScape on their website:

• Recent News - https://secure.runescape.com/m=news/latest_news.rss
• RuneMetrics/Adventurer's Log - http://services.runescape.com/m=adventurers-log/rssfeed?searchName=[player name]

How to add RSS feeds in a userpage

This wiki has a feature to automatically display RSS feeds. Simply add <rss>Rss_url_goes_here</rss> to a page to display the RSS feed.