User:Metroidking/Help:User Navigation Bar 1.0

User navigation bars are placed on user pages to provide quick links to user subpages.

Frame

Frame Width

In order to make a user box, first create a frame. Below is the coding of one with a purple border (color code 64486a) and a yellow background (color code fbd278).

{|style="width:65%;margin-top:+.7em;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}"
|}

Doing so will create:

The width can be adjusted by altering the width percentage, the wider the frame, the more can be stored horizontally.

{|style="width:15%;margin-top:+.7em;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}"
|}

Yields a small frame that pushes text in

{|style="width:100%;margin-top:+.7em;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}"
|}

Creates a wider frame that stretches the width of the screen

Frame Padding

The padding controls the amount of space between the text inside the frame and the border

{|style="width:65%;margin-top:+.7em;background-color:#fbd278; padding:0px; border:1px solid#64486a;{{roundy|10px}}"
|}

makes it very short

Whereas

{|style="width:65%;margin-top:+.7em;background-color:#fbd278; padding:20px; border:1px solid#64486a;{{roundy|10px}}"
|}

makes it large

Frame Borders

The size of the border can be manipulated into various sizes

{|style="width:65%;margin-top:+.7em;background-color:#fbd278; padding:50px; border:2px solid#64486a;{{roundy|10px}}"
|}

Creates a border two pixels thick

Round Borders

The border can also be rounded out around the corners by adjusting the border radius

{|style="width:65%;margin-top:+.7em;background-color:#fbd278; padding:50px; border:2px solid#64486a; {{roundy|0px}}"
|}

Creates a straight box

Whereas one with a higher radius

 
{|style="width:65%;margin-top:+.7em;background-color:#fbd278; padding:50px; border:2px solid#64486a; {{roundy|25px}}" 
|}

Creates one with very curved corners

Frame Coloring

The background color and the border color can be adjusted with hexidecimal color coding.

{|style="width:65%;margin-top:+.7em;background-color:#FFC0CB; padding:5px; border:1px solid#64486a;{{roundy|10px}}"
|}

Creates a frame with a purple border and a pink background

Finished Nav Box

{{user:username/nav}}
Below is an example of the coding of a completed user navigation bar

{|style="width:65%;margin-top:+.7em;background-color:#8B0000; padding:5px; border:1px solid#64486a;{{roundy|10px}}"
|style="width:10%"|
[[File:Mr Saturn.png|100px|left|Metroidking's Pages]]
|style="width:30%"|
| valign=top style="padding:3px; margin-left:3px" |
|style="width:100%;font-size:100%; font-family: Times New Roman"|
'''{{Colorlink|FF8C00|User:Metroidking|SR388}}'''
<br/>
'''{{Colorlink|FF8C00|User talk:Metroidking|Communication}}'''
<br/>
'''{{Colorlink|FF8C00|User:Metroidking/Sandbox|Sandbox}}'''
|style="width:280px;text-align:center;white-space:nowrap;" |
{|style="width:280px;border:solid 0px;background:#8B0000"
|-
|style="width:280px;text-align:center;white-space:nowrap;" |
<div style="font-size:162%; font-family: Times New Roman;border:none;margin: 0;padding:.1em">
'''{{Colorlink|FF8C00|User:Metroidking|MetroidKing}}'''</div>
<div style="top:+0.2em;font-size: 95%; font-family: Times New Roman">  {{Colorlink|FF8C00|Mw:Metroid Wiki:About|Metroid Wiki}} {{Colorlink|FF8C00|mw:Metroid Wiki:Staff#Administrators|admin}} and  leader of the Anti-Tingle Society</div>
|}
| valign=top style="padding:3px; margin-left:3px" |
|style="width:100%;font-size:100%; font-family: Times New Roman"|
'''{{Colorlink|FF8C00|User:Metroidking/Templates|Templates}}'''
<br/>
'''{{Colorlink|FF8C00|Special:Contributions/Metroidking|Contributions}}'''
|}