Difference between revisions of "User Page Tutorial"
From SpiralKnights
(→About Me) |
(→SK Windows) |
||
| (17 intermediate revisions by the same user not shown) | |||
| Line 8: | Line 8: | ||
(starts here) | (starts here) | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<table border="0" cellspacing="10"> | <table border="0" cellspacing="10"> | ||
<tr> | <tr> | ||
| − | <td> | + | <td width="210px"> |
<div style="margin-left: -5px; margin-bottom: 5px; margin-top: 5px; margin-right: -5px; padding: 5px; padding-top: 0; padding-bottom: 0; background: | <div style="margin-left: -5px; margin-bottom: 5px; margin-top: 5px; margin-right: -5px; padding: 5px; padding-top: 0; padding-bottom: 0; background: | ||
| Line 54: | Line 36: | ||
<td> | <td> | ||
| − | ==About Me== | + | ===About Me=== |
| − | < | + | 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. |
| + | |||
| + | <td> | ||
| + | |||
| + | {{SKWindow | ||
| + | | width = 250px | ||
| + | | margin = 0px 0px 10px 10px | ||
| + | | align = right | ||
| + | | title = Character pic | ||
| + | | body = body text | ||
| + | {{SKWindow/EmptyCell|[[Image:Icon-helmet.png|160px]]|center||2}} | ||
| + | {{SKWindow/NewRow}} | ||
| + | {{SKWindow/Cell|'''Account Name:'''|}} | ||
| + | {{SKWindow/Cell|Account Name|}} | ||
| + | {{SKWindow/NewRow}} | ||
| + | {{SKWindow/Cell|'''Guild:'''|}} | ||
| + | {{SKWindow/Cell|Guild Name}} | ||
| + | {{SKWindow/NewRow}} | ||
| + | {{SKWindow/NewRow}} | ||
| + | {{SKWindow/Cell|__TOC__|center||2}} | ||
| + | }} | ||
</table> | </table> | ||
(ends here) | (ends here) | ||
| + | <br/> | ||
| + | ===Page Layout=== | ||
| + | So for this page the basic idea is to have three sections. To do this we have created a table around the whole page with one row and three columns. In the first column is the info boxes with contact info, gear, etc. The second column is the main body with the 'about me' section, and the final column has the player picture/info box. This layout is simple and clean, with everything compact so readers can see it easily. | ||
==Basic html tags== | ==Basic html tags== | ||
| − | In html, you have tags, which basically tell the browser | + | In html, you have tags, which basically tell the browser how to format things. |
Most tags would begin with <tag> and finish off with <tag/> or </tag>. | Most tags would begin with <tag> and finish off with <tag/> or </tag>. | ||
| − | Anything inbetween the starter tag and the finisher | + | Anything inbetween the starter tag and the finisher tag will be commanded by that tag.<br/> |
<br/> | <br/> | ||
So here's a list of the basic html tags which you will need, and what they do.<br/> | So here's a list of the basic html tags which you will need, and what they do.<br/> | ||
| Line 71: | Line 76: | ||
2. <i>italic</i> | 2. <i>italic</i> | ||
3. <br/>inserts a new line | 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 | + | 4. <div>makes a square division around the content. It can get pretty complex and fancy with all the extras.<div/> |
| − | 5. <table> | + | 5. <table>creates a table<table/> |
</pre> | </pre> | ||
<br/> | <br/> | ||
| − | ==Wiki | + | |
| − | Most wikis will accept most html | + | ==Wiki conventions== |
| + | Most wikis will accept most html tags, such as those listed above. But wikis also have some of their own tags, to make things easier. They work pretty much the same way. Here's a list of basic SK wiki conventions (and what they do):<br/> | ||
<pre> | <pre> | ||
| − | 1. ==heading== makes the | + | 1. ==heading== makes anything between the '==' a section heading. |
| − | 2. ~~~~ adds your signature | + | 2. ===subheading=== anything between the '===' becomes a subheading. |
| − | + | 3. ~~~~ adds your signature | |
| − | + | 4. [["local link destination"|"link name"]] makes the "link name" clickable, which goes to the "local link destination" | |
| − | + | 5. ["external link destination" "link name"] makes the "link name" go to the "external link destination" explained later. | |
| + | 6. '''bold''' guess what. There's more than one way to make bold text! | ||
</pre> | </pre> | ||
<br/> | <br/> | ||
| + | |||
==divs explained== | ==divs explained== | ||
The div tag makes a border or division around things. We'll start by going through an example.<br/> | The div tag makes a border or division around things. We'll start by going through an example.<br/> | ||
| Line 93: | Line 101: | ||
</div> | </div> | ||
</pre> | </pre> | ||
| − | 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 | + | 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. This is specified for each side aswell.<br/> |
<br/> | <br/> | ||
| − | == | + | ==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: | 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: | ||
<pre> | <pre> | ||
| Line 104: | Line 112: | ||
<br/> | <br/> | ||
| − | == | + | ==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: | 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: | ||
<pre> | <pre> | ||
| Line 114: | Line 122: | ||
Local: [[User:Sshs|Link]] <br/> | Local: [[User:Sshs|Link]] <br/> | ||
External: [http://www.wiki.spiralknights.com/User:Sshs Link] <br/> | External: [http://www.wiki.spiralknights.com/User:Sshs Link] <br/> | ||
| − | |||
| − | |||
| − | |||
| − | |||
<br/> | <br/> | ||
| Line 128: | Line 132: | ||
| align = center | | align = center | ||
| title = Example Box | | title = Example Box | ||
| − | | body = | + | | body = bodytext |
{{SKWindow/EmptyCell|[[Image:Icon-helmet.png|160px]]|center||2}} | {{SKWindow/EmptyCell|[[Image:Icon-helmet.png|160px]]|center||2}} | ||
{{SKWindow/NewRow}} | {{SKWindow/NewRow}} | ||
| − | {{SKWindow/Cell|''' | + | {{SKWindow/Cell|'''Knight name'''|}} |
| − | {{SKWindow/Cell| | + | {{SKWindow/Cell|knightname|}} |
{{SKWindow/NewRow}} | {{SKWindow/NewRow}} | ||
| − | {{SKWindow/Cell|''' | + | {{SKWindow/Cell|'''Guild name'''|}} |
| − | {{SKWindow/Cell| | + | {{SKWindow/Cell|guildname|}} |
{{SKWindow/NewRow}} | {{SKWindow/NewRow}} | ||
}} | }} | ||
</pre> | </pre> | ||
</br> | </br> | ||
| − | So in the example, you start with a double "{", | + | So in the example, you start with a double "{", followed by 'SKWindow'. From there, it goes down and does all the specifications of the box. Width, margin, align, title, body etc. 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 the account name and the guild name. <br/> |
<br/> | <br/> | ||
Here's what it looks like: <br/> | Here's what it looks like: <br/> | ||
| Line 149: | Line 153: | ||
| align = center | | align = center | ||
| title = Example Box | | title = Example Box | ||
| − | | body = | + | | body = bodytext |
{{SKWindow/EmptyCell|[[Image:Icon-helmet.png|160px]]|center||2}} | {{SKWindow/EmptyCell|[[Image:Icon-helmet.png|160px]]|center||2}} | ||
{{SKWindow/NewRow}} | {{SKWindow/NewRow}} | ||
| − | {{SKWindow/Cell|''' | + | {{SKWindow/Cell|'''Knight name'''|}} |
| − | {{SKWindow/Cell| | + | {{SKWindow/Cell|knightname|}} |
{{SKWindow/NewRow}} | {{SKWindow/NewRow}} | ||
| − | {{SKWindow/Cell|''' | + | {{SKWindow/Cell|'''Guild name'''|}} |
| − | {{SKWindow/Cell| | + | {{SKWindow/Cell|guildname|}} |
{{SKWindow/NewRow}} | {{SKWindow/NewRow}} | ||
}} | }} | ||
| + | |||
| + | ==Compact Equipment Boxes== | ||
| + | A brilliantly simple little way to display your gear. Check out the tutorial [[Tutorial:Profile_Editing|here]] | ||
==Confused== | ==Confused== | ||
Latest revision as of 04:15, 3 October 2013
Intro
Welcome to Xephyris' wiki editing/make your own user page tutorial!
The purpose of this page is to teach YOU 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 page.
Sample page
(starts here)
|
:: Finding Me
:: Loadout
|
About MeLorem 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. |
| |||||||||||
(ends here)
Page Layout
So for this page the basic idea is to have three sections. To do this we have created a table around the whole page with one row and three columns. In the first column is the info boxes with contact info, gear, etc. The second column is the main body with the 'about me' section, and the final column has the player picture/info box. This layout is simple and clean, with everything compact so readers can see it easily.
Basic html tags
In html, you have tags, which basically tell the browser how to format things.
Most tags would begin with <tag> and finish off with <tag/> or </tag>.
Anything inbetween the starter tag and the finisher tag 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 extras.<div/> 5. <table>creates a table<table/>
Wiki conventions
Most wikis will accept most html tags, such as those listed above. But wikis also have some of their own tags, to make things easier. They work pretty much the same way. Here's a list of basic SK wiki conventions (and what they do):
1. ==heading== makes anything between the '==' a section heading. 2. ===subheading=== anything between the '===' becomes a subheading. 3. ~~~~ adds your signature 4. [["local link destination"|"link name"]] makes the "link name" clickable, which goes to the "local link destination" 5. ["external link destination" "link name"] makes the "link name" go to the "external link destination" explained later. 6. '''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. 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
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 = bodytext
{{SKWindow/EmptyCell|[[Image:Icon-helmet.png|160px]]|center||2}}
{{SKWindow/NewRow}}
{{SKWindow/Cell|'''Knight name'''|}}
{{SKWindow/Cell|knightname|}}
{{SKWindow/NewRow}}
{{SKWindow/Cell|'''Guild name'''|}}
{{SKWindow/Cell|guildname|}}
{{SKWindow/NewRow}}
}}
</br>
So in the example, you start with a double "{", followed by 'SKWindow'. From there, it goes down and does all the specifications of the box. Width, margin, align, title, body etc. 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 the account name and the guild name.
Here's what it looks like:
| ||||||
| ||||||
Compact Equipment Boxes
A brilliantly simple little way to display your gear. Check out the tutorial here
Confused
Confused? Questions? Comments? Leave a message either on my talk page or on this page's discussion page.
