User:Metroidking/Help:User Navigation Bar 1.0

User navigation bars are placed on user pages to provide quick links to user subpages. These can be made in a variety of styles, some with more complex coding then others.

Frame

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:+1px;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}"
|}

Doing so will create:

The frame can be also be adjusted in various styles.

Frame Width

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:+1px;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}"
|}

Yields a small frame that pushes text in

{|style="width:100%;margin-top:+1px;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:+.1px;background-color:#fbd278; padding:0px; border:1px solid#64486a;{{roundy|10px}}"
|}

makes it very short

Whereas

{|style="width:65%;margin-top:+1px;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:+1px;background-color:#fbd278; padding:50px; border:2px solid#64486a;{{roundy|10px}}"
|}

Creates a border two pixels thick

Roundy Template

The border can also be rounded out around the corners by adjusting the border radius, while the coding normally would appear as

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

The {{roundy}} template can be used it its place.

Roundness

The extent of the roundness depends on the amount specified in the roundy template.

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

Creates a frame with a purple border and a pink background

Box Contents

Text Location

In order to post text inside a box, a | MUST be placed in the proper location. If it is placed in the incorrect location like the coding below, the entire box will not appear.

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

If the | is not placed in the coding, the text will appear above the frame

Text Font and Color

The font, font size, and color can be adjusted in a variety of ways. By placing |style="font-size:; font-family:"| above the text.

text

Finished Nav Box

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

{|style="width:65%;margin-top:+1px;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}}'''
|}