User:Metroidking/Help:User Navigation Bar 1.0: Difference between revisions
Metroidking (talk | contribs) m (frame section complete) |
Metroidking (talk | contribs) (changing some coding) |
||
Line 6: | Line 6: | ||
<!---Basic frame example---> | <!---Basic frame example---> | ||
<pre> | <pre> | ||
{|style="width:65%;margin-top:+ | {|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}" | ||
|} | |} | ||
</pre> | </pre> | ||
Doing so will create: | Doing so will create: | ||
{|style="width:65%;margin-top:+ | {|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}" | ||
|} | |} | ||
The width can be adjusted by altering the width percentage, the wider the frame, the more can be stored horizontally. | The width can be adjusted by altering the width percentage, the wider the frame, the more can be stored horizontally. | ||
<!--- Small example ---> | <!--- Small example ---> | ||
<pre>{|style="width:15%;margin-top:+ | <pre>{|style="width:15%;margin-top:+1px;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}" | ||
|} | |} | ||
</pre> | </pre> | ||
{|style="width:15%;margin-top:+ | {|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 | Yields a small frame that pushes text in | ||
Line 24: | Line 24: | ||
<!---recommended maximum size example---> | <!---recommended maximum size example---> | ||
<pre> | <pre> | ||
{|style="width:100%;margin-top:+ | {|style="width:100%;margin-top:+1px;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}" | ||
|} | |} | ||
</pre> | </pre> | ||
{|style="width:100%;margin-top:+ | {|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 | |Creates a wider frame that stretches the width of the screen | ||
|} | |} | ||
Line 34: | Line 34: | ||
The padding controls the amount of space between the text inside the frame and the border | The padding controls the amount of space between the text inside the frame and the border | ||
<pre> | <pre> | ||
{|style="width:65%;margin-top:+. | {|style="width:65%;margin-top:+.1px;background-color:#fbd278; padding:0px; border:1px solid#64486a;{{roundy|10px}}" | ||
|} | |} | ||
</pre> | </pre> | ||
{|style="width:65%;margin-top:+ | {|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:0px; border:1px solid#64486a;{{roundy|10px}}" | ||
|makes it very short | |makes it very short | ||
|} | |} | ||
Whereas | Whereas | ||
<pre> | <pre> | ||
{|style="width:65%;margin-top:+ | {|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:20px; border:1px solid#64486a;{{roundy|10px}}" | ||
|} | |} | ||
</pre> | </pre> | ||
{|style="width:65%;margin-top:+ | {|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:20px; border:1px solid#64486a;{{roundy|10px}}" | ||
|makes it large | |makes it large | ||
|} | |} | ||
===Frame Borders=== | ===Frame Borders=== | ||
The size of the border can be manipulated into various sizes | The size of the border can be manipulated into various sizes | ||
<pre>{|style="width:65%;margin-top:+ | <pre>{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:50px; border:2px solid#64486a;{{roundy|10px}}" | ||
|}</pre> | |}</pre> | ||
{|style="width:65%;margin-top:+ | {|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:5px; border:2px solid#64486a;{{roundy|10px}}" | ||
|Creates a border two pixels thick | |Creates a border two pixels thick | ||
|} | |} | ||
Line 59: | Line 59: | ||
The border can also be rounded out around the corners by adjusting the border radius, while the coding normally would appear as | The border can also be rounded out around the corners by adjusting the border radius, while the coding normally would appear as | ||
<pre> | <pre> | ||
{|style="width:65%;margin-top:+ | {|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:50px; border:2px solid#64486a;-moz-border-radius:10px" | ||
|} | |} | ||
</pre> | </pre> | ||
Line 66: | Line 66: | ||
The extent of the roundness depends on the amount specified in the roundy template. | The extent of the roundness depends on the amount specified in the roundy template. | ||
<pre> | <pre> | ||
{|style="width:65%;margin-top:+ | {|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:50px; border:2px solid#64486a; {{roundy|0px}}" | ||
|}</pre> | |}</pre> | ||
{|style="width:65%;margin-top:+ | {|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:5px; border:2px solid#64486a; {{roundy|0px}}" | ||
|Creates a {{tt|straight|and boring}} box | |Creates a {{tt|straight|and boring}} box | ||
|} | |} | ||
Whereas one with a higher radius | Whereas one with a higher radius | ||
<pre> | <pre> | ||
{|style="width:65%;margin-top:+ | {|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:50px; border:2px solid#64486a; {{roundy|25px}}" | ||
|}</pre> | |}</pre> | ||
{|style="width:65%;margin-top:+ | {|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:5px; border:2px solid#64486a; {{roundy|25px}}" | ||
|Creates one with very curved corners | |Creates one with very curved corners | ||
|} | |} | ||
Line 81: | Line 81: | ||
The background color and the border color can be adjusted with hexidecimal color coding. | The background color and the border color can be adjusted with hexidecimal color coding. | ||
<pre> | <pre> | ||
{|style="width:65%;margin-top:+ | {|style="width:65%;margin-top:+1px;background-color:#FFC0CB; padding:5px; border:1px solid#64486a;{{roundy|10px}}" | ||
|} | |} | ||
</pre> | </pre> | ||
{|style="width:65%;margin-top:+ | {|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 | |Creates a frame with a purple border and a pink background | ||
|} | |} | ||
Line 94: | Line 94: | ||
Below is an example of the coding of a completed user navigation bar | Below is an example of the coding of a completed user navigation bar | ||
<pre> | <pre> | ||
{|style="width:65%;margin-top:+ | {|style="width:65%;margin-top:+1px;background-color:#8B0000; padding:5px; border:1px solid#64486a;{{roundy|10px}}" | ||
|style="width:10%"| | |style="width:10%"| | ||
[[File:Mr Saturn.png|100px|left|Metroidking's Pages]] | [[File:Mr Saturn.png|100px|left|Metroidking's Pages]] |
Revision as of 20:16, 7 November 2010
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:+1px;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:+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 |
Round Borders
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
{{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}}''' |}