Editing Nitrome Wiki:How to make a banner template

{| class="white" width="100%" style="border:1px solid black;"
|width="10%"|
|[[Nitrome Wiki:Tutorials]] - '''How to make a banner template'''
|}
This tutorial shows how to make a banner template.
==Sections==
Each section will deal with a certain part of the Template. Where the numbers are are which each section will explain<br />
----
<nowiki>{| width="</nowiki><span style="color:red;">1</span>"<br /><nowiki>style="background:</nowiki> <span style="color:red;">2</span>; "<br /> 
<nowiki>| valign="center" width="60%" style="background:#;border: 2px solid #000;</nowiki><br /><nowiki>padding: .5em 1em; -moz-border-radius: 1em" |</nowiki><br />
<span style="color:red;">3</span><br />
<span style="color:red;">4</span><br /><nowiki>
|}</nowiki>
----
===1===
This part of the template is called the '''width section''', is where the length of the template is determined. Numbers put in this area have to have a % symbol at the end of the number. Putting in a number less than 100% will make the template not fit the entire page, but putting in a number higher than 100% will cause the template to be longer than the page it is on. Any numbers can be input into the width section. To make the template fit the entire page it is on, and not be longer or shorter than it, place 100% on.
====Examples====
A banner template with "100%" in thew width section:<br />
{| width="100%" style="background: white; "
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |
[[File:Yellow Star.png]]
'''Test template'''<br />Test
|}
<br />A banner template with 77% in the width section:<br />
{| width="77%" style="background: white; "
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |
[[File:Yellow Star.png]]
'''Test template'''<br />Test
|}
<br />A banner template with 116% in the width section:<br />
{| width="156%" style="background: white; "
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |
[[File:Yellow Star.png]]
'''Test template'''<br />Test
|}
<br />
===2===
This section, called the '''colour section''', determines what colour the template will be. You ca enter usual colours like Red, Blue, Green, but if you want to be more specific, you can enter the names of other colours from the [[Nitrome Wiki:Colour Index|Nitrome Wiki Colour Index]]. Colours entered in the colour section will make the entire background colour that colour. If no color is selected, or an incorrect colour name is written, the template's background will become transparent.

When putting in the names of one-word colours, you can write them any way. The words "White", "white", "WHITE", and "whiTe" will still make the background colour of the template white. Also, colours which have two words can only be written as a single word. Putting the word "Pale Green" in the colour section will not change the background to Pale Green. but the word PaleGreen will.
====Examples====
A banner template with "Green" in the colour section:<br />
{| width="100%" style="background: green; "
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |
[[File:Yellow Star.png]]
'''Test template'''<br />Test
|}
<br />A banner template with "Purple" in the colour section:<br />
{| width="100%" style="background: purple; "
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |
[[File:Yellow Star.png]]
'''Test template'''<br />Test
|}
<br />A banner template with no colour in the colour section:<br />
{| width="100%" style="background: ; "
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |
[[File:Yellow Star.png]]
'''Test template'''<br />Test
|}
<br />A banner template with "Pale Green" in the colour index:<br />
{| width="100%" style="background: PaleGreen; "
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |
[[File:Yellow Star.png]]
'''Test template'''<br />Test
|}
===3===
This section is the '''image section''', below the image section is the text section. Place an image here the same you would normally [[Nitrome Wiki:Editing Help#How to insert an image|place an image]]. You are still allowed to modify the length and width of the image as you would normally do. Images which are vertically long will stretch the banner template down. Images on a banner template are completely optional.
====Examples====
A banner template with a horizontally long image:<br />
{| width="100%" style="background: white; "
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |
[[File:Flipside image.png]]
'''Test template'''<br />Test
|}
<br />A banner template with a vertically long image:<br />
{| width="100%" style="background: white; "
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |
[[File:Chain Gate.png]]
'''Test template'''<br />Test
|}
<br />A banner template with no image:<br />
{| width="100%" style="background: white; "
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |
'''Test template'''<br />Test
|}
===4===
This section of the template is where you place the text. Usually, a template may have a bolded word. Uusually after a bolded word, there is text underneath it. Adding text to a template is the same as writing on a page.
====Examples====
{| width="100%" style="background: White; "
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |
[[File:Yellow Star.png]]
'''Lego'''<br />Lego
|}
<br />
{| width="100%" style="background: White; "
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |
[[File:Yellow Star.png]]
'''Nitrome Nitrome Nitrome'''<br />Test Subject Blue
|}
<br />
{| width="100%" style="background: White; "
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |
[[File:Yellow Star.png]]
Test
|}
==Blank Template==
<pre>{| width="100%" style="background: White; " 
| valign="center" width="60%" style="background:#;border: 2px solid #000; padding: .5em 1em; -moz-border-radius: 1em" |

|}</pre><br />100% has been added to the Width section, and White has been added to the colour section.

{{community}}
[[Category:Tutorials and resources|{{PAGENAME}}]]