User Page Tutorial

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)

Character pic

blahblahblah Account Name: Account Name Guild: Yo Guild Contents 1 Intro 2 Sample Page 3 So here's what it looks like 4 About Me 5 Basic html tags 6 Wiki thingies 7 divs explained 8 tables explained

(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.

tables explained