User blog:Frozina/Making your own template


 * NOT FINISHED: PUBLISHING JUST IN CASE MY INTERNET DERPS AGAIN.


 * Btw Imma eat pizza in a minute

As requested by Apallo The Hedgehog, here's a tutorial how to make your own templates. *flails*

The template page

 * When you want to make a template, make sure your article name starts with "Template:";
 * E.G.: "Template:Potato"
 * Your editor will be in source mode (and won't be able to be switched to visual). This is because templates are written in HTML/CSS form.

The basics

 * In HTML you have different "blocks". Some examples of these blocks are;

A block looks something like text< /div>
 * Remember, each block starts with and ends with . The slash at the end is important, if you forget it, the block will start inside the previous one.   SIDE NOTE: REMOVE THE SPACE INSIDE THE BLOCK. I put it there because otherwise this post wouldn't publish the way I wanted it. 
 * In this tutorial I'll be using div, simply because it has the most "advanced" HTML of the three.
 * NB: CSS and HTML use AMERICAN spelling. So not "colour", but "color".

Adding codes

 * You put a code inside your block like this;

div align="center"
 * The codes there are/I know about at the moment are align and style.
 * To put both align and style to your block, you put;

div align="center" style="background-color:#FFF; color:darkgreen;" Adding subcodes

Align

 * The subcodes for align are:

left right center

Style

 * The subcodes for style are (there might be more of them, I advise you to use Google to find out; these are the ones I know about. You can do alot with these subcodes thought and if you're a beginner I advise you to limit yourself to these)

Color

 * "color" changes the text colour. "background-color" changes the background colour (obviously). You can use both words (E.G.: "red", "yellowgreen", "darkblue") as well as hex codes (E.G.: "#FFF", "#1A1A1A").

Border

 * "border" changes the border style;

border: 1px solid darkred; border: 0.5em dotted #1A1A1A;
 * et cetera.
 * "border-radius" changes the corner style of the border:

border-radius:1em 1em 0em 0em; border-radius:2px 3px 4px 1px; border-radius:2.5em;

Questions & Requests
If you have any questions regarding this blog post (whether it's unclear or your template won't look the way you want it), you can ask them below. (If you have questions concerning HTML and CSS I advice you to go to Google. xD;)

If you have a request for me to make you a template, you can ask me on my talk page.