User:Lilkaykaygal/How to make a navigation: Difference between revisions

(Created page with "Hi everyone, I'm going to teach you different ways to make a navigation for your Userpage. == Navigation #1 == ==== Type this: ==== <code><nowiki>{| align="center" cellspaci...")
 
(I'm having a few problems at the moment and I can't think of anything really detailed. So I'm gonna leave it like this for now. fell free to change it.)
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
Hi everyone, I'm going to teach you different ways to make a navigation for your Userpage.
Hi everyone, I'm going to teach you about Userpage Navigations.


== Navigation #1 ==
=== What's a Userpage Navigation? ===


A Userpage Navigation is a navigation you use for the userspace. It helps people who visit your userpage to navigate through your userspace easily so you have some of your pages laid in front of you without typing it in the search bar.


==== Type this: ====
=== What's a navigation made up of ===
Usually, a navigation would be made up of pages like your Userpage and your talkpage, but you're able to add other pages too, like Sanboxes and Templates. Whatever extra pages you have, you're able to add to your navigation.


==== Wikicoding ====


<code><nowiki>{| align="center" cellspacing="12" style="background: transparent; border:0px; text-align:center;"
Navigation Templates use a lot of wikicoding. Basically things like color and shape. When a template says to give a color, You could either write the color in color code e.g: FA92B2 or template e.g: <nowiki>{{psychic color light}}</nowiki>
| align="center" style="background: #FFFFFF; border: 2px solid #{{<insert color for the border>}}; -moz-border-radius:30px;" | <span style="font-size: 100%" class="plainlinks"> &nbsp; <insert small picture> {{color2|{{<insert color for first link}}|<insert link>|<insert link name>}} <insert small picture> {{color2|{{<insert color for second link>}}|<insert link>|<insert link name>}} <insert small picture> {{color2|{{<insert color for third link>}}|<insert link>|<insert link name>}} <insert small picture> {{color2|{{<insert color for fourth link>}}|<insert link>|<insert link name>}} <insert small picture> {{color2|{{<insert color for fifth link>}}|<insert link>|<insert link name>}} <insert small picture> {{color2|{{<insert color for sixth link>}}|<insert link>|<insert link name>}} <insert small picture> &nbsp; <br> <insert small picture> {{color2|{{<insert color for seventh link>}}|<insert link>|<insert link name>}} <insert small picture> {{color2|{{<insert color of eighth link>}}|<insert link>|<insert link name>}} <insert small picture> {{color2|{{<insert color for ninth link>}}|<insert link>|<insert link name>}} <insert small picture></span>
|}</nowiki></code>
==== And fill the parts that you need to fill ====
==== Now here's my example ====


<code><nowiki>{| align="center" cellspacing="12" style="background: transparent; border:0px; text-align:center;"
==== Extras ====
| align="center" style="background: #FFFFFF; border: 2px solid #{{psychic color}}; -moz-border-radius:30px;" | <span style="font-size: 100%" class="plainlinks"> &nbsp; ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal|User page}} ♪ {{color2|{{psychic color dark}}|User talk:Lilkaykaygal|Talk to Me!}} ♪ {{color2|{{psychic color dark}}|Special:Contributions/Lilkaykaygal|Contributions}} ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal/Usertags|Usertags}} ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal/Picture Page|Picture Page}} ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal/Templates|Templates}} ♪ &nbsp; <br> ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal/Signatures|Signatures}}  ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal/Running|Running Page}} ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal/Sandbox|My Sandbox}} ♪</span>
|}</nowiki></code>
==== Result: ====
{| align="center" cellspacing="12" style="background: transparent; border:0px; text-align:center;"
| align="center" style="background: #FFFFFF; border: 2px solid #{{psychic color}}; -moz-border-radius:30px;" | <span style="font-size: 100%" class="plainlinks"> &nbsp; ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal|User page}} ♪ {{color2|{{psychic color dark}}|User talk:Lilkaykaygal|Talk to Me!}} ♪ {{color2|{{psychic color dark}}|Special:Contributions/Lilkaykaygal|Contributions}} ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal/Usertags|Usertags}} ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal/Picture Page|Picture Page}} ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal/Templates|Templates}} ♪ &nbsp; <br> ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal/Signatures|Signatures}}  ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal/Running|Running Page}} ♪ {{color2|{{psychic color dark}}|User:Lilkaykaygal/Sandbox|My Sandbox}} ♪</span>
|}


In a navigation, you can also put in extras like images. Images can be used to represent a certain page you're linking to. For an example: this picture: [[File:028.png]] could be used to represent a Sandbox.


== Navigation #2 ==


== Creating a navigation for the userspace ==


==== Type this: ====
If your having trouble starting from scratch, here's an easy navigation to get you started.


<code><nowiki>{| class="roundy" align="center" width="<insert your width>%" style="background: #{{<insert color for background>}}; border: 4px solid #{{<insert color for border>}};"
Today were gonna use water colors, water type Pokémon images and typical links (of course from my userspace). Okay.
|- align="center"
| colspan="10" |  '''[[<insert link>|{{color|{{<insert color of link>}}|<insert navigation title>}}]]'''
|- align="center"
| rowspan="2" |
| class="roundy" style="background: #{{<insert color of box background>}}; border: 2px solid #{{<insert box border color>}};" | [[<insert picture>]]<br><br>[[<insert link>|{{color|{{<insert link color>}}|<insert link title>}}]]
| rowspan="2" |
| class="roundy" style="background: #{{<insert color of box background>}}; border: 2px solid #{{<insert box border color>}};" | [[<insert picture>]]<br><br>[[<insert link>|{{color|{{<insert link color>}}|<insert link title>}]]
| rowspan="2" |
| class="roundy" style="background: #{{<insert color of box background>}}; border: 2px solid #{{<insert box border color>}};" | [[<insert picture>]]<br><br>[[<insert link>|{{color|{{<insert link color>}}|<insert link title>}}]]
| rowspan="2" |
| class="roundy" style="background: #{{<insert color of box background>}}; border: 2px solid #{{<insert box border color>}};" | [[<insert picture>]]<br><br>[[<insert link>|{{color|{{<insert link color>}}|<insert link title>}}]]
|}</nowiki></code>


==== And fill in the parts you need to fill ====
=== Step 1. ===
==== Now here's my example ====


<code><nowiki>{| class="roundy" align="center" width="20%" style="background: #{{psychic color light}}; border: 4px solid #{{psychic color}};"
==== Type this: ====
|- align="center"
| colspan="10" |  '''[[User:Lilkaykaygal|{{color|{{psychic color dark}}|KayKay's Navigation}}]]'''
|- align="center"
| rowspan="2" |
| class="roundy" style="background: #{{steel color light}}; border: 2px solid #{{steel color}};" | [[File:DP Dawn.png]]<br><br>[[User:Lilkaykaygal|{{color|{{steel color dark}}|My Userpage!}}]]
| rowspan="2" |
| class="roundy" style="background: #{{grass color light}}; border: 2px solid #{{grass color}};" | [[File:441.png]]<br><br>[[User talk:Lilkaykaygal|{{color|{{grass color dark}}|My Talk Page!}}]]
| rowspan="2" |
| class="roundy" style="background: #{{flying color light}}; border: 2px solid #{{flying color}};" | [[File:001.png]]<br><br>[[Special:Contributions/Lilkaykaygal|{{color|{{flying color dark}}|Contributions!}}]]
| rowspan="2" |
| class="roundy" style="background: #{{water color light}}; border: 2px solid #{{water color}};" | [[File:028.png]]<br><br>[[User:Lilkaykaygal/Sandbox|{{color|{{water color dark}}|My Sandbox!}}]]
|}</nowiki></code>


==== Result: ====
<code><nowiki>{| width="50%" align="center" style="background: #{{water color light}}; border: #{{water color}} 5px solid; {{roundy|70px}}" |- align="center" | [[File:395.png]] | [[File:350.png]] | [[File:131.png]] | [[File:134.png]] |- align="center" | [[User:Lilkaykaygal|☆ My Page ☆]] | [[User talk:Lilkaykaygal|☆ My Talk ☆]] | [[Special:Contributions/Lilkaykaygal|☆ Contributions ☆]] | [[User:Lilkaykaygal/Sandbox|☆ My Sandbox ☆]] |}</nowiki></code>


{| class="roundy" align="center" width="20%" style="background: #{{psychic color light}}; border: 4px solid #{{psychic color}};"
==== Or this: ====
|- align="center"
| colspan="10" |  '''[[User:Lilkaykaygal|{{color|{{psychic color dark}}|KayKay's Navigation}}]]'''
|- align="center"
| rowspan="2" |
| class="roundy" style="background: #{{steel color light}}; border: 2px solid #{{steel color}};" | [[File:DP Dawn.png]]<br><br>[[User:Lilkaykaygal|{{color|{{steel color dark}}|My Userpage!}}]]
| rowspan="2" |
| class="roundy" style="background: #{{grass color light}}; border: 2px solid #{{grass color}};" | [[File:441.png]]<br><br>[[User talk:Lilkaykaygal|{{color|{{grass color dark}}|My Talk Page!}}]]
| rowspan="2" |
| class="roundy" style="background: #{{flying color light}}; border: 2px solid #{{flying color}};" | [[File:001.png]]<br><br>[[Special:Contributions/Lilkaykaygal|{{color|{{flying color dark}}|Contributions!}}]]
| rowspan="2" |
| class="roundy" style="background: #{{water color light}}; border: 2px solid #{{water color}};" | [[File:028.png]]<br><br>[[User:Lilkaykaygal/Sandbox|{{color|{{water color dark}}|My Sandbox!}}]]
|}


== Navigation #3 ==
<code><nowiki>{| width="50%" align="center" style="background: #9DB7F5; border: #6890F0 5px solid; {{roundy|70px}}" |- align="center" | [[File:395.png]] | [[File:350.png]] | [[File:131.png]] | [[File:134.png]] |- align="center" | [[User:Lilkaykaygal|☆ My Page ☆]] | [[User talk:Lilkaykaygal|☆ My Talk ☆]] | [[Special:Contributions/Lilkaykaygal|☆ Contributions ☆]] | [[User:Lilkaykaygal/Sandbox|☆ My Sandbox ☆]] |}</nowiki></code>
 
==== Type this: ====


<code><nowiki>{| align="center" style="{{roundy}}; border: 2px solid #{{{{{1|<insert color>}}} color}}; background: #{{{{{1|<insert color>}}} color}};" class="expandable"
=== Step 2. ===
! style="{{roundytop|5px}}; background: #{{{{{2|{{{1|<insert color>}}}}}} color light}}" colspan="7" | [[<link>|{{color|000|<link title>}}]]
|-
! align="right" | On hand:
| width="15%" | {{PartyPoké|<insert ndex number>||Dawn|<insert Pokémon name>|<insert Pokémon type>|<insert Pokémon secondary type>|nick=<insert nickname>|link=<insert link>}}
| width="15%" | {{PartyPoké|<insert ndex number>||Dawn|<insert Pokémon name>|<insert Pokémon type>|<insert Pokémon secondary type>|nick=<insert nickname>|link=<insert link>}}
| width="15%" | {{PartyPoké|<insert ndex number>||Dawn|<insert Pokémon name>|<insert Pokémon type>|<insert Pokémon secondary type>|nick=<insert nickname>|link=<insert link>}}
| width="15%" | {{PartyPoké|<insert ndex number>||Dawn|<insert Pokémon name>|<insert Pokémon type>|<insert Pokémon secondary type>|nick=<insert nickname>|link=<insert link>}}
| width="15%" | {{PartyPoké|<insert ndex number>||Dawn|<insert Pokémon name>|<insert Pokémon type>|<insert Pokémon secondary type>|nick=<insert nickname>|link=<insert link>}}
| width="15%" | {{PartyPoké|<insert ndex number>||Dawn|<insert Pokémon name>|<insert Pokémon type>|<insert Pokémon secondary type>|nick=<insert nickname>|link=<insert link>}}
|- class="expandable"
| style="{{roundybottom|5px}}; background: #{{{{{2|{{{1|<insert color>}}}}}} color light}}" colspan="7" |
|-
| style="{{roundy|5px}}; background: #{{{{{1|<insert color>}}} color}}" colspan="7" |
{| align="center" style="{{roundy}}; background: #{{{{{1|<insert color>}}} color}};"
! align="right" |
| width="15%" |{{ReservePoké|<insert ndex number>||Dawn|<insert Pokémon name>|<insert Pokémon type>|<insert Pokémon secondary type>|nick=<insert nickname>|link=<insert link>}}
| width="15%" |{{ReservePoké|<insert ndex number>||Dawn|<insert Pokémon name>|<insert Pokémon type>|<insert Pokémon secondary type>|nick=<insert nickname>|link=<insert link>}}
| width="15%" |{{ReservePoké|<insert ndex number>||Dawn|<insert Pokémon name>|<insert Pokémon type>|<insert Pokémon secondary type>|nick=<insert nickname>|link=<insert link>}}
| width="15%" |{{ReservePoké|<insert ndex number>||Dawn|<insert Pokémon name>|<insert Pokémon type>|<insert Pokémon secondary type>|nick=<insert nickname>|link=<insert link>}}
| width="15%" |
| width="15%" |
|-
! align="right" |
| width="15%" |{{ReservePoké|<insert ndex number>||Dawn|<insert Pokémon name>|<insert Pokémon type>|<insert Pokémon secondary type>|nick=<insert nickname>|link=<insert link>}}
| width="15%" |
| width="15%" |
| width="15%" |
| width="15%" |
| width="15%" |
|}
|}</nowiki></code>


==== And fill out the parts you need to fill ====
==== Show your Result: ====
==== Now here's my example: ====


<code><nowiki>{| align="center" style="-moz-border-radius: 10px; border: 2px solid #{{{{{1|steel}}} color light}}; background: #{{{{{1|psychic}}} color light}};" class="expandable"
=== Step 3. ===
! style="-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background: #{{{{{2|{{{1|psychic}}}}}} color}}" colspan="7" | [[User:Lilkaykaygal|{{color|000|KayKay's}}]] [[Pokémon (species)|{{color|000|Pokémon}}]]
|-
! align="right" | On hand:
| width="15%" | {{PartyPoké|395||Dawn|Empoleon|water|steel|nick={{tt|Empoleon|My Userpage}}|link=User:Lilkaykaygal}}
| width="15%" | {{PartyPoké|405||Dawn|Luxray|electric|nick={{tt|Luxray|My Talk (Chat to Me!)}}|link=User talk:lilkaykaygal}}
| width="15%" | {{PartyPoké|407||Dawn|Roserade|grass|poison|nick={{tt|Roserade|My Contribs}}|link=Special:Contributions/Lilkaykaygal}}
| width="15%" | {{PartyPoké|398||Dawn|Staraptor|normal|flying|nick={{tt|Staraptor|My Usertags}}|link=User:Lilkaykaygal/Usertags}}
| width="15%" | {{PartyPoké|078||Dawn|Rapidash|fire|nick={{tt|Rapidash|My Picture Page}}|link=User:Lilkaykaygal/Picture Page}}
| width="15%" | {{PartyPoké|468||Dawn|Togekiss|normal|flying|nick={{tt|Togekiss|Templates}}|link=User:Lilkaykaygal/Templates}}
|- class="expandable"
| style="-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; background: #{{{{{2|{{{1|psychic}}}}}} color}}" colspan="7" |
|-
| style="-moz-border-radius: 5px; background: #{{{{{1|psychic}}} color}}" colspan="7" |
{| align="center" style="-moz-border-radius: 10px; background: #{{{{{1|psychic}}} color}};"
! align="right" | 
| width="15%" | {{ReservePoké|484|Dawn|Palkia|dragon|water|nick={{tt|Palkia|Run like a Maniac}}|link=User:Lilkaykaygal/Running}}
| width="15%" | {{ReservePoké|157|Dawn|Typhlosion|fire|nick={{tt|Typhlosion|Sign Here, here and here}}|link=User:Lilkaykaygal/Signatures}}
| width="15%" | {{ReservePoké|250|Dawn|Ho-oh|fire|flying|nick={{tt|Ho-oh|My Aussie Buddy}}|link=User:Takharii}}
| width="15%" | {{ReservePoké|395|Dawn|Empoleon|water|steel|nick={{tt|Empoleon|LEAVE NOW!!!!!!}}|link=Special:RecentChanges}}
| width="15%" | {{ReservePoké|150|Dawn|Mewtwo|psychic|nick={{tt|Mewtwo|I SAID NOW!!!!!!!}}|link=Special:Random}}
| width="15%" | {{ReservePoké|249|Dawn|Lugia|water|flying|nick={{tt|Lugia|Ok seriously i think you should leave.}}|link=Main Page}}
|}</nowiki></code>


==== Result: ====
==== Have it in your userspace so eveyone can see. ====
{| align="center" style="-moz-border-radius: 10px; border: 2px solid #{{{{{1|steel}}} color light}}; background: #{{{{{1|psychic}}} color light}};" class="expandable"
! style="-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background: #{{{{{2|{{{1|psychic}}}}}} color}}" colspan="7" | [[User:Lilkaykaygal|{{color|000|KayKay's}}]] [[Pokémon (species)|{{color|000|Pokémon}}]]
|-
! align="right" | On hand:
| width="15%" | {{PartyPoké|395||Dawn|Empoleon|water|steel|nick={{tt|Empoleon|My Userpage}}|link=User:Lilkaykaygal}}
| width="15%" | {{PartyPoké|405||Dawn|Luxray|electric|nick={{tt|Luxray|My Talk (Chat to Me!)}}|link=User talk:lilkaykaygal}}
| width="15%" | {{PartyPoké|407||Dawn|Roserade|grass|poison|nick={{tt|Roserade|My Contribs}}|link=Special:Contributions/Lilkaykaygal}}
| width="15%" | {{PartyPoké|398||Dawn|Staraptor|normal|flying|nick={{tt|Staraptor|My Usertags}}|link=User:Lilkaykaygal/Usertags}}
| width="15%" | {{PartyPoké|078||Dawn|Rapidash|fire|nick={{tt|Rapidash|My Picture Page}}|link=User:Lilkaykaygal/Picture Page}}
| width="15%" | {{PartyPoké|468||Dawn|Togekiss|normal|flying|nick={{tt|Togekiss|Templates}}|link=User:Lilkaykaygal/Templates}}
|- class="expandable"
| style="-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; background: #{{{{{2|{{{1|psychic}}}}}} color}}" colspan="7" |
|-
| style="-moz-border-radius: 5px; background: #{{{{{1|psychic}}} color}}" colspan="7" |
{| align="center" style="-moz-border-radius: 10px; background: #{{{{{1|psychic}}} color}};"
! align="right" | 
| width="15%" | {{ReservePoké|484|Dawn|Palkia|dragon|water|nick={{tt|Palkia|Run like a Maniac}}|link=User:Lilkaykaygal/Running}}
| width="15%" | {{ReservePoké|157|Dawn|Typhlosion|fire|nick={{tt|Typhlosion|Sign Here, here and here}}|link=User:Lilkaykaygal/Signatures}}
| width="15%" | {{ReservePoké|250|Dawn|Ho-oh|fire|flying|nick={{tt|Ho-oh|My Aussie Buddy}}|link=User:Takharii}}
| width="15%" | {{ReservePoké|395|Dawn|Empoleon|water|steel|nick={{tt|Empoleon|LEAVE NOW!!!!!!}}|link=Special:RecentChanges}}
| width="15%" | {{ReservePoké|150|Dawn|Mewtwo|psychic|nick={{tt|Mewtwo|I SAID NOW!!!!!!!}}|link=Special:Random}}
| width="15%" | {{ReservePoké|249|Dawn|Lugia|water|flying|nick={{tt|Lugia|Ok seriously i think you should leave.}}|link=Main Page}}
|}
|}
=== I'll be adding more soon! If you have a navigation and would like to share it, could you please tell me on my talk page and then you can put it on ===

Latest revision as of 02:28, 12 January 2011

Hi everyone, I'm going to teach you about Userpage Navigations.

What's a Userpage Navigation?

A Userpage Navigation is a navigation you use for the userspace. It helps people who visit your userpage to navigate through your userspace easily so you have some of your pages laid in front of you without typing it in the search bar.

What's a navigation made up of

Usually, a navigation would be made up of pages like your Userpage and your talkpage, but you're able to add other pages too, like Sanboxes and Templates. Whatever extra pages you have, you're able to add to your navigation.

Wikicoding

Navigation Templates use a lot of wikicoding. Basically things like color and shape. When a template says to give a color, You could either write the color in color code e.g: FA92B2 or template e.g: {{psychic color light}}

Extras

In a navigation, you can also put in extras like images. Images can be used to represent a certain page you're linking to. For an example: this picture: 028.png could be used to represent a Sandbox.


Creating a navigation for the userspace

If your having trouble starting from scratch, here's an easy navigation to get you started.

Today were gonna use water colors, water type Pokémon images and typical links (of course from my userspace). Okay.

Step 1.

Type this:

{| width="50%" align="center" style="background: #{{water color light}}; border: #{{water color}} 5px solid; {{roundy|70px}}" |- align="center" | [[File:395.png]] | [[File:350.png]] | [[File:131.png]] | [[File:134.png]] |- align="center" | [[User:Lilkaykaygal|☆ My Page ☆]] | [[User talk:Lilkaykaygal|☆ My Talk ☆]] | [[Special:Contributions/Lilkaykaygal|☆ Contributions ☆]] | [[User:Lilkaykaygal/Sandbox|☆ My Sandbox ☆]] |}

Or this:

{| width="50%" align="center" style="background: #9DB7F5; border: #6890F0 5px solid; {{roundy|70px}}" |- align="center" | [[File:395.png]] | [[File:350.png]] | [[File:131.png]] | [[File:134.png]] |- align="center" | [[User:Lilkaykaygal|☆ My Page ☆]] | [[User talk:Lilkaykaygal|☆ My Talk ☆]] | [[Special:Contributions/Lilkaykaygal|☆ Contributions ☆]] | [[User:Lilkaykaygal/Sandbox|☆ My Sandbox ☆]] |}

Step 2.

Show your Result:

Step 3.

Have it in your userspace so eveyone can see.