User:Metroidking/Help:User Navigation Bar 1.0: Difference between revisions

← Older edit

User:Metroidking/Help:User Navigation Bar 1.0 (view source)

Revision as of 22:40, 18 December 2010

4,835 bytes added , 18 December 2010

m

no edit summary

Metroidking

Oddball

236

edits

@@ Line 1: / Line 1: @@
-User navigation bars  are placed on user pages to provide quick links to user subpages.
+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).
+<!---Basic frame example--->
+<pre>
+{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}"
+|}
+</pre>
+Doing so will create:
+{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}"
+|}
+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.
+<!--- Small example --->
+<pre>{|style="width:15%;margin-top:+1px;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}"
+|}
+</pre>
+{|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
+|}
+<!---recommended maximum size example--->
+<pre>
+{|style="width:100%;margin-top:+1px;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}"
+|}
+</pre>
+{|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===
+<!---frame padding--->
+The padding controls the amount of space between the text inside the frame and the border
+<pre>
+{|style="width:65%;margin-top:+.1px;background-color:#fbd278; padding:0px; border:1px solid#64486a;{{roundy|10px}}"
+|}
+</pre>
+{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:0px; border:1px solid#64486a;{{roundy|10px}}"
+|makes it very short
+|}
+Whereas
+<pre>
+{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:20px; border:1px solid#64486a;{{roundy|10px}}"
+|}
+</pre>
+{|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
+<pre>{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:50px; border:2px solid#64486a;{{roundy|10px}}"
+|}</pre>
+{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:5px; 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
+<pre>
+{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:50px; border:2px solid#64486a;-moz-border-radius:10px"
+|}
+</pre>
+The [[Template:Roundy|<nowiki>{{roundy}}</nowiki> template]] can be used it its place.
+====Roundness====
+The extent of the roundness depends on the amount specified in the roundy template.
+<pre>
+{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:50px; border:2px solid#64486a; {{roundy|0px}}"
+|}</pre>
+{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:5px; border:2px solid#64486a; {{roundy|0px}}"
+|Creates a {{tt|straight|and boring}} box
+|}
+Whereas one with a higher radius
+<pre>
+{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:50px; border:2px solid#64486a; {{roundy|25px}}"
+|}</pre>
+{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:5px; 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.
+<pre>
+{|style="width:65%;margin-top:+1px;background-color:#FFC0CB; padding:5px; border:1px solid#64486a;{{roundy|10px}}"
+|}
+</pre>
+{|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.
+<pre>
+{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}"|text
+|}
+</pre>
+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.
+{|style="width:65%;margin-top:+1px;background-color:#fbd278; padding:5px; border:1px solid#64486a; {{roundy|10px}}"
+|style="font-size:19pt; font-family: Fantasy"|
+text
+|}
+==Finished Nav Box==
+<nowiki>{{user:username/nav}}</nowiki>
 <br/>
-Below is an example of the coding of a user navigation bar
+Below is an example of the coding of a completed user navigation bar
 <pre>
-{|style="width:65%;margin-top:+.7em;background-color:#8B0000; padding:5px; border:1px solid#64486a;-moz-border-radius:10px;"
+{|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]]