User:Anon126/How-to/NavPanes

This page will show you how to make a "NavFrame" like the one below:

An example

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

(transcluded from Template:Lorem ipsum)

Note: Use only what is in bold italics, and exclude the arrows.

Prolog

<div class="NavFrame collapsed" style="padding: 2pt;">←This begins the declaration of the enclosing "div" that will contain the entire pane. The collapsed class makes the content initially hidden when the page loads; omit it to make the content initially visible.

Header (title)

<div class="NavHead" style="background-color: #000000; color: #ffffff" align="left">Your title here</div>←The title. Notice it's in another "div," and the styles ("background-color" and "color"), define the background and text color, respectively (here it's a black background and white text, but you can change the color to whatever you prefer), only for the title. Also notice the align="left" thing. You can replace "left" with "right" or "center", to adjust the alignment of the title only (by default, it's centered).

Content

<div class="NavContent">Place any content here.</div>←The content inside. You can also use align=left, align=right, etc. To change the alignment for the content only (by default it's centered).

Ender

</div>←Ends the "div" you started in the very beginning.

Your final result

Your title here

Place any content here.