User Page Tutorial
From SpiralKnights
Intro
Welcome to Xephyris' wiki editing/make your own user page tutorial!
The purpose of this page is to educate YOU on how to make your very own user page. It also walks you through all the main scripting convetions used. Question? Send me a message Here. Or leave a message in this page's discussion thingo.
Sample Page
So let's get started. Here's a sample page:
{{SKWindow
| width = 250px
| margin = 0px 0px 10px 10px
| align = right
| title = Character pic
| body = blahblahblah
{{SKWindow/EmptyCell|[[Image:Icon-helmet.png|160px]]|center||2}}
{{SKWindow/NewRow}}
{{SKWindow/Cell|'''Account Name:'''|}}
{{SKWindow/Cell|Sshs|}}
{{SKWindow/NewRow}}
{{SKWindow/Cell|'''Guild:'''|}}
{{SKWindow/Cell|Divine Light}}
{{SKWindow/NewRow}}
{{SKWindow/NewRow}}
{{SKWindow/Cell|__TOC__|center||2}}
}}
<table border="0" cellspacing="10">
<tr>
<td>
<div style="margin-left: -5px; margin-bottom: 5px; margin-top: 5px; margin-right: -5px; padding: 5px; padding-top: 0; padding-bottom: 0; background:
#f9f9f9; border: 1px solid #88a; border-right-width:2px; border-bottom-width:2px;">
<div style="width: 101.5%; margin-top: -1px; margin-left: -6px; padding: 3px; background: #eee; border: 1px solid #88a;">''':: Finding Me'''</div>
* My ingame name is (name).
* I live in (country), which is in the timezone (timezone(GMT)).
* E-mail: email@email.com
</div>
<div style="margin-left: -5px; margin-right: -5px; margin-top: 5px; margin-bottom: 5px; padding: 5px; padding-top: 0; background: #f9f9f9; border: 1px solid #88a; border-right-width:2px; border-bottom-width:2px;">
<div style="width: 101.5%; margin-top: -1px; margin-left: -6px; padding: 3px; background:
#eee; border: 1px solid #88a;">''':: Loadout'''</div>
* Blizzbrand [[File:Equipment-Blizzbrand_icon.png|32px]]
* Tempered Calibur [[File:Equipment-Tempered_Calibur_icon.png|32px]]
* Super Blaster [[File:Equipment-Super_Blaster_icon.png|32px]]
* Elemental Hood [[File:Equipment-Elemental_Hood_icon.png|32px]]
* Silvermail [[File:Equipment-Silvermail_icon.png|32px]]
* Drake Scale Shield [[File:Equipment-Drake_Scale_Shield_icon.png|32px]]
</div>
<td>
==About Me==
blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah<br/>
blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah<br/>
blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah<br/>
blahblahblahblahblahblahblahblahblahblahblahblah
</table>
So here's what it looks like
(starts here)
| ||||||||
| ||||||||
|
:: Finding Me
:: Loadout
|
About Meblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah |
(ends here)
Basic html tags
In html, you have tags, which basically tell the browser stuff.
Most tags would begin with <tag> and finish off with <tag/> or </tag>.
Anything inbetween the starter tag and the finisher-er will be commanded by that tag.
So here's a list of the basic html tags which you will need, and what they do.
1. <b>bold</b> 2. <i>italic</i> 3. <br/>inserts a new line 4. <div>makes a square division around the content. It can get pretty complex and fancy with all the extra bits.<div/> 5. <table>sorts the stuff into a table<table/>
Wiki thingies
Most wikis will accept most html things, such as those listed above. But wikis also get some more special things, to make things easier. They work pretty much the same way. Here's a list of basic wiki thingies (and what they do):
1. ==heading== makes the text a heading 2. ~~~~ adds your signature 3. [["local link destination"|"link name"]] makes the "link name" clickable, which goes to the "local link destination" 4. ["external link destination" "link name"] makes the "link name" go to the "external link destination" explained later. 5. '''bold''' guess what. There's more than one way to make bold text!
divs explained
The div tag makes a border or division around things. We'll start by going through an example.
<div style="margin-left: -5px; margin-bottom: 5px; margin-top: 5px; margin-right: -5px; background: #f9f9f9; border: 1px solid #88a; border-right-width:2px; border-bottom-width:2px;"> text inside division </div>
So first off, it specifies the margins. you can see that it specifies margins for all sides. The margins are how much space is in between the div border and the nearest object. Then, there's the background. The background colour is specified by what is called a hexidecimal value. If you've used photoshop or GIMP, or something similar, you will have seen this when you are choosing a colour. in this example, the colour is #f9f9f9. You can find a hexidecimal chart with a quick google search. Finally, we have the border, which is the actual border itself (surprised?). This is specified for each side aswell.
signatures explained
Adding four tildes to anything will put in your signature. This is useful for talk pages especially. It will display your username and time of posting. eg:
~~~~
And it looks like this: Sshs 09:40, 2 August 2012 (UTC)
links explained
So before I mentioned local links and external links. Basically, local links are links which go to somewhere within the website (ie, http://wiki.spiralknights.com). For local links, you only need to type in the end bit of the webpage, for example, in a local link you only need to have "User_Page_Tutorial" as the link, but for an external link, you would need "http://www.wiki.spiralknights.com/User_Page_Tutorial". External links are used for going to a website outside the wiki, such as "http://www.google.com". Here's an example of both:
Local: [[User:Sshs|Link]] <br/> External: [http://www.wiki.spiralknights.com/User:Sshs Link] <br/>
So here's what it looks like:
Local: Link
External: Link
Let's Break it Down
We'll break down the above user page and I'll show you what everything does.
SK Windows
SK windows are little templates which are exclusive to the spiral knights wiki. The SK window is put first in the user page, because it extends down from wherever you put in the code. For example, if I enter it in the exact middle of the page, the top of the window will appear in the middle of the page and the rest will extend down from that point. Here's and example of an SK Window:
{{SKWindow
| width = 250px
| margin = 0px 0px 10px 10px
| align = center
| title = Example Box
| body = blahblahblah
{{SKWindow/EmptyCell|[[Image:Icon-helmet.png|160px]]|center||2}}
{{SKWindow/NewRow}}
{{SKWindow/Cell|'''one plus one equals'''|}}
{{SKWindow/Cell|2|}}
{{SKWindow/NewRow}}
{{SKWindow/Cell|'''one divided by zero'''|}}
{{SKWindow/Cell|WHAT HAVE I DONE?!?!}}
{{SKWindow/NewRow}}
}}
</br>
So in the example, you start with a double "{", and then say it's and SKWindow. Then, it goes down and does all the statistics. Width, margin, align, title, body. Finally, you have the content of the box. You can add cells, as shown above, and add new columns next to each cell. As an example, I've put some easy maths equations, but usually you would use it as a Guild: (GuildName) type thing.
Here's what it looks like:
| ||||||
| ||||||
Confused
Confused? Questions? Comments? Leave a message either on my talk page or on this page's discussion page.
