User:A Helpful Little Gnome/Help/b

Below is a list of common user and group pages free for use. Play around with it a but, fiddle with the headers, the colors, customize it as much as you like. Enjoy!

Return to contents ↵

Before we start...

Here are some tips if you just want something simple, like a background or border.

Here is the code that would make a border and background for the entire page:

<div style="border: solid 2px midnightblue;background: lightblue; padding: 10px">

If you want to have the background fill only part of the page, then add:

</div>

And there you go!

Image headers

Like so:

They are done in Photoshop. Can't do one? Don't look at me, but you can always try looking around for people with image headers on their pages.

You can use a few cool images from Sunil. Nice bubble things. You'll need a white background to make it look normal, though.

The Designs

Style 1: Big header

Credits to Mobius.

Title Here About Us - Talk To Us Intro Content Content

The code:

{| style="border:Black 4px solid; width:100%; margin-bottom:5px"
| style="padding:5px; background-color:#FFFFCC" |

{| style="border:Black 4px solid; width:100%; margin-bottom:5px"
| style="padding:5px; background-color:#FFCC00" | 

{| style="border:Black 1px solid; width:100%; border-spacing:0px; margin:0px"
| style="padding:5px; background-color:#FFFFFF" |<br><center><span style="font-weight: bold; font-family: Times New Roman; font-size: 260%; color:#FF6600">'''Title Here'''</span><br><br></center>
|}
<center><font color="#FF6600">[[Insert|<font color="#FF6600">'''About Us'''</font>]] - [[Insert|<font color="#FF6600">'''Talk To Us'''</font>]]
|}

{| style="width:70%"
|-
| style="border:Black 1px solid; background-color:#FFCC00" |
<big><font color="#FF6600">'''Intro'''</font></big>
|}

Content


Content

As with all backgrounds you can stop this background from filling the page by adding:

|}

To any spot you like.

Style 2: Image header

Know who deserves credits for this design? Tell me.

Content Content

The Code:

{| style="width:750px;" align=center CELLPADDING=0 CELLSPACING=0
| style="width:750px;"| [[Image:Example header.jpg]]
|}

{| style="width:750px; text-align:left;" align=center CELLPADDING=0 CELLSPACING=0
|-
| style="width:750px; padding:10px; border-radius:10px; background-color: AntiqueWhite; border-top:solid 2px DarkRed; border-bottom:solid 2px DarkRed"|

Content


Content

Works nice for user and group pages but remember to keep the pixel width of your picture the same as the width of your design. Also nice if you change the width to 300px, slim and simple.

Style 3: Image header with navigation bar

Greatly influenced by Sirens.

Content Content

Yarrr Blah blah content Narrr Blah blah content

The code:

{| style="width:750px; font-family: verdana; font-size:90%" align=center CELLPADDING=0 CELLSPACING=0
| style="width:750px; border-top:solid 2px #AF7817; border-left:solid 2px #AF7817; border-right:solid 2px #AF7817;"|[[Image:Example header.jpg]]
|}

{| style="width:754px; font-family: verdana; font-size:90%" align=center CELLPADDING=0 CELLSPACING=0
|-
| style="width:600px; padding:10px; background-color: #EFEADE; border-left:solid 2px #AF7817; border-top:solid 2px #AF7817; border-bottom:solid 2px #AF7817;vertical-align:top"|

Content


Content


| style="padding:10px; vertical-align:top; border-top:solid 2px #AF7817; background-color:#DDD1B9; border-right:solid 2px #AF7817; border-left:solid 2px #AF7817; border-bottom:solid 2px #AF7817; text-align:center"|
__NOTOC__
{| style="padding:2px; vertical-align:top; background-color:#E7DFCE; border:solid 1px #AF7817" 
|
'''Yarrr'''<br/>
<small>''Blah blah content''</small> 
|}


{| style="padding:2px; vertical-align:top; background-color:#E7DFCE; border:solid 1px #AF7817" 
| 
'''Narrr'''<br/>
<small>''Blah blah content''</small> 
|}

|}

Remember to close off the side bar with |} or problems will start popping up!

Style 4: Image header with two navigation bars

Greatly influenced by Sirens, I think.

	News · Operations · Arhives · Members · Philosophy
Pages Main Talk Something Motto Huurrrrrrrrrr Numbers < 10, currently recruiting	Content Content

The code:

{| style="width:750px; font-family: verdana; font-size:90%" align=center CELLPADDING=0 CELLSPACING=0
|-
| style="border-top:solid 1px #AF7817; border-right:solid 1px #AF7817; border-left:solid 2px #AF7817; border-bottom:0px" colspan="2" | [[Image:Example header.jpg]]
|-
| style="vertical-align:top; background-color:#DDD1B9; border-right:solid 2px #AF7817; border-left:solid 2px #AF7817" | 
| style="width:600px; padding: 0px 10px; text-align:right; background-color:#EFEADE; border-right:solid 1px #AF7817; border-bottom:solid 2px #AF7817" |News · Operations · Arhives · Members · Philosophy
|-
| style="padding:10px; vertical-align:top; background-color:#DDD1B9; border-right:solid 2px #AF7817; border-left:solid 2px #AF7817; border-bottom:solid 1px #AF7817; text-align:center;" |
__NOTOC__
{| style="width:100%; padding:2px; vertical-align:top; background-color:#EFEADE; border:solid 1px #AF7817" 
| <small>
'''Pages'''<br/>
''Main<br>
''Talk<br>
''Something<br>
</small> 
|}


{| style="width:100%; padding:2px; vertical-align:top; background-color:#EFEADE; border:solid 1px #AF7817" 
| <small>
'''Motto'''<br/>
''Huurrrrrrrrrr''
</small> 
|}


{| style="width:100%; padding:2px; vertical-align:top; background-color:#EFEADE; border:solid 1px #AF7817" 
| <small>
'''Numbers'''<br/>
''< 10, currently recruiting''
</small> 
|}
| style="width:600px; padding:10px; background-color: #EFEADE; border-right:solid 1px #AF7817; border-bottom:solid 1px #AF7817;vertical-align:top" |

Content


Content
|}

Remember, the main content has to be longer than the side navigation bar, otherwise everything will show up funny.