Template Tutorial

[Jello]

Template Coding Tutorial

A Guide by Jello

---

Hello everyone, this is your friendly Overlord Jello and I am your host for this hopefully helpful tutorial for making your own templates! I'm going to start this tutorial with the assumption that you, the reader, have never seen an ounce of coding in your life and have no idea where to even start. This first post will act as a reference post and will include a table of contents, a vocabulary list, some suggestions for becoming a better coder, and a list of reference links that will help you with your coding. Then, each post after the first will be a new chapter in our little coding adventure :3

Table of Contents

• Introduction and References
• Chapter 1 - Reading and Writing Code

Before we really start, there are some things you should know:

• I am by no means a master at template coding. I do not profess to know everything, and there are a lot of people out there who know a hell of a lot more about it than I do. I do, however, feel confident enough that I can successfully help you with your templates if you get stuck, so if you have any questions - even if they're about your own template and not something of mine here - feel free to ask. I'm always willing to look at and break down some code!
• On a similar note, please tell me if you see something wrong with this tutorial, or if you have any suggestions on what to say or how to say it. This tutorial is meant to cover not only the how-to but also the why aspect of coding so that you can then go and experiment on your own. Coding isn't something you can learn just by yourself, so I am always willing to hear different strategies or opinions.
• If you don't understand something I put into this tutorial, I want you to tell me. As most of you know (at the time of me posting this), I just graduated college with a degree in education, but I am still working to become clearer and more concise with my directions and explanations. Sooooo help me to help you, and tell me if there is anything that I have covered so far that you are still confused about.
• Show me your creations, just not in this thread. Especially if you were inspired by my tutorial, and even if you weren't, I'd love to see what kind of templates you can come up with and to be honest I tend to creep on creative outlet threads anyway. So feel free to tag me if you want to show me your templates! :3 In order to keep this thread clean, though, I would prefer if you worked on your templates in your own C.O. thread.
• For the sake of being able to bold specific portions of a code, I will not be putting my codes in code tags, but instead will just be replacing the []'s with <>'s. If you don't know what that means, don't fret - we will be covering that in chapter one.

Vocabulary

• Tags
  
  • Found in Chapter 1
  • Information surrounded by []'s that tell your browser that you want something to look a certain way.
  • Usually comes in pairs, i.e., <div> and </div>
  • Must go in a certain order if using more than one at a time.
• Opening Tag
  
  • Found in chapter 1
  • The first tag in a pair
• Closing tag
  
  • Found in chapter 1
  • The second tag in a pair
  • Always uses a / in front of the information

Useful Tips

• Sites like w3schools are a godsend. w3schools in particular has wonderful tutorials that you can very easily apply to coding templates. (You can even get certificates of completion to show off!) I specifically recommend the HTML5 and CSS tutorials for our purposes. There's also a bunch of other sites such as codecademy that I have heard are pretty good (that one is next on my list to complete). I know you're thinking "but Jello, my gracious Overlord, you're teaching us how to code templates not websites!" I know my humble servants but they are essentially the same thing so just trust me on this. Stackoverflow is also a good sight to see if anyone has asked the same question that you have.
• Tear apart other people's codes! If you see something you like, with their permission you can usually quote their post into your own C.O. thread and see how they coded it. Not only can you learn some new tricks that way, but as you get better you might also be able to think of ways to make their code a little simpler. And if you can't figure out how they did something just by looking at their code, ask them!
• There is a difference between proboards mobile and proboards desktop. Both can be accessed via most smartphones/tablets, although I don't think desktops and laptops can access the mobile version. There are differences between the two, but the majority of the coding we're going to be talking about will work on both versions. The only major differences that you should be concerned with if you're new to coding is that the widths might need some tweaking to look correct across the different platforms, and if you use any special fonts they might not show up on the mobile version. Try testing your codes on more than one browser, and more than one device to make sure they work well.
• Google works wonders. If you can't for the life of you figure out how to do something or if you can't remember how a specific code works, Google the code. For example, if I couldn't remember what order the numbers went in for padding, I'd Google "HTML CSS padding" and look what comes up when I do that - a w3schools page on padding! If your question is a little bit odder that, try a few different Google searches. Odds are someone has had the same problem you are having (either in a template or in an actual webpage.
• Don't preview your code. I know it's super convenient to be able to preview how your code will look before you post it, but Proboards can be super finicky and likes to rewrite people's codes. Unless you know exactly how proboards is going to respond to your codes and that it won't try to rewrite it for you, I do not recommend previewing it. You can always edit your post layer.
• Write and edit your code in some sort of notepad program. If you have a Windows computer, notepad is great because it doesn't even try to autocorrect your spelling. Even the notepad app is decent on iPhones. Use these programs to edit your code, and then select all, copy, and paste into your browser. That way, even if you browser crashes or you accidentally hit the backspace button while clicked out of the posting area, you won't completely lose your work.
• When you write your opening tag, immediately write your ending tag. It will take you one extra second to put your cursor back into the content area after closing the tag. Do this to avoid forgetting tags!

Reference Links

• link 1 here
  
  • reason it's important
• link 2 here
  
  • reason it's important

[Jello]

Chapter 1

Reading and Writing Code

---

When you read a language, you might not know how to pronounce every word you come across right away, but because you know how the letters of the language sound, you can start to piece together a pronunciation. Likewise you might not know the definition of a word, but because you have a good idea of what certain roots mean, and with the addition of context clues, you can usually figure it out.

Reading code is a lot like reading a language. You might read a chunk of code and not know exactly what it does, but using context clues and your knowledge of how certain parts of code work, you can sometimes figure it out. Just like you can start to form sentences once you know the very basics of a language, you can start to write code once you know the basics.

The Tags

When you code a template, you are basically telling the browser and proboards, "hey, I want this post to look like this," and then the browser and proboards say, "okay," and they replace that code with the style that you described in the code. In order to do this, you need to use tags. Tags look like this:

[opening tag]your post goes here![/closing tag]

The main things that you want to focus on are that a) they come in pairs and b) they use [ and ]. The first one is called the opening tag while the second one is called the closing tag and has a / before the information. These tags surround the information that you want to modify.

So for example, if I wanted something to be bolded I would type this:

[b]This text is bolded.[/b]

Because that b surrounded by the []'s tells the computer "hey I want to bold this text," the text will come out looking like this:

This text is bolded.

Why do I have to use just a plain b inside of [] to get bolded text? Because someone at some point decided that is what we would use for bold and now it's like that for all coding. I can do the same sort of thing for italics or underline, or I can do all three at once!

[b][u][i]Look at all these effects![/i][/u][/b]

Becomes Look at all these effects! because I used the b tag for bold, the u tag for underline, and the i tag for italics. Again, the reason for having to use specifically i and u for those particular tags are because someone somewhere decided that's what made sense. That's actually how most tags got their origin, so just like you had to memorize vocabulary to form sentences in school, you'll have to memorize specific tags to form code here. or at least you'll have to vaguely remember something like it and then just look it up if you're wrong

Elements and Nesting

One important thing about tags: notice how the opening tags went in the order of B-U-I, but for the closing tags they went I-U-B. This is because of something called an element. An element of a tag is everything from the start of the opening tag to the end of the closing tag, with content in between the two tags. So for our bolded example up above, the "This text is bolded." is the content of the element.

When you put another set of tags inside of an element's content, it becomes apart of that original element, so it must stay inside the original element's tags. Putting one or more tags inside of an element is called nesting. If you are going to nest codes, your code's tags MUST be written in that particular order. The reason for this is because when you use tags, you are telling the computer to ONLY modify what's IN BETWEEN the tags or IN the content of the element. So if you start out with an opening underline tag inside of the element content of the bold tag, but the ending underline tag is outside of the bold tags, you are going to confuse your computer and then it will just spit your code back at you like so:

[b][u][i]My closing tags are in the incorrect order.[/i][/b][/u]

My closing tags are in the incorrect order

[/u]

The computer understood that you wanted it underlined because of the opening tag. However, see that mystery [/u] there? And see how this text is literally not styled now? That's because of that [/u] being in the wrong spot outside of the original element's ending tag. Your computer is confused and angry so it's not going to do what you tell it to.

Try thinking of it like a sandwich - you wouldn't put the top slice of bread on top but the bottom slice in between the meat and cheese. You'd put it on the bottom! You can also think of it like boxes:

bold
opening
tag

bold
closing
tag

opening
underline
tag

closing
underline
tag

italics
opening
tag

italics
closing
tag

Look at all these effects!

See how each tag is INSIDE the grey area or the element of the tag before it? That's how you have to think about it. Now let's get my styling back and move on to our next section.

Attributes and Values

There, that's better.

Unfortunately most tags are not as simple as putting one corresponding letter in between [ ]'s. Most of them require a little more effort. Usually you will use an attribute, which can be used to give some extra information about a certain element.

For example, to just write a simple url, you could just copy and paste it like this: pokemonanrui.proboards.com. You could also put it in tags like this:

[a]http://pokemonanrui.proboards.com[/a]

That little a will tell your browser a little faster that what you're entering in is a URL. But what if you don't want it to look so long and complicated like that? What if you would rather it look like regular text that you can click on, like this?

In order to do that, you'll want to use the element's attribute and value. So let's take a look at our code first:

[a href="http://pokemonanrui.proboards.com"]like this?[/a]

Okay. So we know that the "a" comes from our original url code that we just discussed. But what's that href bunch of letters? That is our attribute of the a tag, which is providing additional information about the URL - in this case, it is saying that the actual URL is what is after the equals sign and double quotation, also known as the value. Now that we have determined what the URL is, we can use the content area to define what we want the text to actually say, so I typed in "like this?" and that's what showed up.

Notice how the ending tag is just an a? That's how it is with attributes: your opening tag is telling us all the information we need to know; there's no use to restate it. Instead, we are just telling the computer that this particular code is done.

Attributes are always written like this:

[tagname attribute="value"]content[/tagname]

They will always have a space between the name of the specific tag and the attribute. There will always be an equals sign followed by the value in quotations marks (no spaces!!!). The closing tag will always match the opening tag name.

You can also do more than one attribute. We will cover that when we talk about adding images!

Empty Elements

99% of the tags you will use will need both the opening and closing tags. However, there is that 1% that do not need closing tags. They are

[hr] and [*br]

Note: the br code does not need an asterisk when you use it in context. For some reason it doesn't even show up in example coding!

Technically you close them by adding a space and a / in with them, but that's not important. You won't really use the br for awhile (unless you get into website coding) but the hr is pretty nice. That is how I have been making these fancy lines:

---

Ta-da!

So now you know the metaphorical alphabet for our coding language. It's time to learn how to start putting all these letters together to form words and sentences!

Please note that from this point on, I will be replacing all [ ]'s with <>'s. This is because we are going to be dealing with some more complicated coding, and I want to be able to bold certain parts of the code, which I cannot do if I use [*code] tags.

[Jello]

Chapter 2

Align, Divs, Width & Height, Style Properties & Values, Background Color, Font Color Family & Size, Scroll

---

Just a reminder before we get started with chapter 2, I will not be putting things in code tags like this:

This text is in code tags!
The reason for that is because our codes are going to be getting a little more complicated and I want to be able to bold certain sections for clarity, which is something that I cannot do if I use code tags. Instead, I will be replacing the []'s with <>'s. If you try to copy any of my examples from here on out, you'll need to replace all of the <>'s with []'s.

So now that we have learned the vocabulary for how to read code, we are actually going to make a template! This first template we make is going to be super simple. The bare basics! If you want to see how it will look when it is finished, go ahead and scroll all the way to the bottom of the post. In order to make this template, we are going to use alignments, divs, width, height, colors, scroll, and padding! So if you already know all of that, go ahead and skip down to chapter 3.

Alignment

First, let's talk about alignment. Alignment is basically where on the horizontal you want your template, or something in your template, to fall. There are four different ways you can align something: left, center, right, and justify.

This text is aligned left. This isn't really necessary to put into tags because it is the forum default. If you don't specify an alignment, it will automatically be to the left. Notice how on the left side the text looks pretty uniform, but how the right edge is a little bit scraggly.

This text is aligned right. This is not the forum default, so you will need to use tags for this. Notice how on the right side the text looks pretty uniform, but how the left edge is a little bit scraggly. Any line that isn't a full line will be pushed to the right of your post.

This text is aligned center. This is not the forum default, so you will need to use tags for this. Both sides will be scraggly, and any line that isn't a full line will be put in the center of the post.

This text is aligned justify. See how it looks very straight and uniform? This is not the forum default, however it is what I use for the majority of this tutorial! It's also what I use for the majority of my posts. Any line that is not a complete line will be pushed to the left for this also.

Okay, so how'd I do that? It's super easy. Your code will look something like this (keeping in mind <> vs []):

<div align="alignment">Your text that you want to be aligned a certain way goes here!</div>

So, thinking back to chapter 1, our tagname is "div" which matches the end tag. Our attribute is "align" because that's what we're trying to change, and our value is that bolded spot where it says "alignment". That's where you put either "right", "center", or "justify" depending on what you want. You really don't need to do this if you want it left because it is the forum default. So just as an example, if you want your text to be centered, your code would look like this:

<div align="center">This text will be centered!</div>

You can also use this to center things other than text, but for right now text is all we're dealing with.

Now I know what you're thinking. Why the hell did I choose div as a tagname? Well, I didn't choose it. I had to use it. Let's talk about divs.

Divs

Some people use table coding for their templates. When you use a table, you can think of it like an excel spreadsheet. You have columns and rows, and you can customize each little square.

I hate using tables for templates. They're for squares. Don't be a square. They take your browser longer to load (altho if you have high speed internet the difference would be minimal), along with a bunch of other website building problems. They're nice for little things - such as actual, legitimate tables - but over all tables are a big thumbs down.

Instead of using tables, we use something called divs. A div tag alone looks like this:

<div>Your text goes here!</div>

Basically, a div tag divides (get it: divide. div.) your text into invisible blocks that you can manipulate in a bunch of different ways. In the example for alignment, you were manipulating how the invisible block was aligned. technically the text itself was still aligned left but it just looked center bc there is literally no space between the sides of the div and the text by default and the div is only as wide and as tall as the text makes it so it has the illusion of centering the text but we will get more into that later lol for now forget I mentioned this

One thing you do need to know about divs is that they automatically cause line breaks when you start them, so you don't need to use the enter key as much. For example

<div>This is my first div!</div><div>this is my second div! I didn't even hit enter!</div>

will look like

This is my first div!

this is my second div! I didn't even hit enter!

Notice how I didn't put a line break into that code, but it looks like I did in the example? Now look at this one:

<div>This is my first div!</div>
<div>this is my second div! I DID hit enter!</div>

will look like

This is my first div!

this is my second div! I DID hit enter!

Even tho I only hit enter 1 time, since the div tag automatically adds a line break when you start it, it comes out as two line breaks.

Text is not the only thing that can go in a div. images, other divs (remember our chat about nesting?), and just giant hunks of space are all fair game also.

Width & Height

Let's actually start thinking about how we want our template to look. We've already talked about alignment. Most people want the bulk of their template to sit in the center of the post, so there we have our first attribute and value.

<div align="center"> </div>

A very good idea is to determine the width that you want for your template. The width is how wide your template is going to be. If you don't set the width, your div will just stretch to whatever width the text makes it. In some cases that's fine, but usually we want to set a width. You can set your width in pixels (px) or in percentage (%). If you use percentage, it will be based off of the width of whatever the div is inside of. So if the div is alone, it will be a percentage of the board itself. If it's inside another div, it will be a percentage of the original div. So if you set it for 100%, it will take up 100% of the board area (or whatever div it's in) width wise. If you set it to 50% it will take up 50%, etc.

While I prefer percentages for coding literally anything else, I like to use pixels for my templates. To me, it just makes things easier because different boards on different sites have different widths, and that will effect how your template looks if you use it across different sites. Not to mention it will take more calculating to figure out percentages. Pixels are uniform. 9/10 times, you'll want to use pixels. Unfortunately I have no good way to help you know how big a pixel is - you'll just have to experiment.

Height is a little more lenient. I personally like to set heights because I'm very picky but some people don't. If you don't, the height will just stretch as far as your content needs. No big deal. Once again, though, let's stick with pixels.

Remember in chapter 1 when I said you can have more than one attribute? Let's take our template div we have so far (the one we centered) and add some more attributes for our width and height.

<div align="center" width="200px" height="500px"> </div>

Notice how I only put the tag name once! Each attribute gets the equal sign and double quotes around the value. "px" means pixel, and like I said I'm picky about height but maybe you're not. So let's look at it:

You're probably thinking, "um overlord there isn't anything there" and to that I say you are absolutely correct. All of that blank space is supposed to be your div (and since empty divs are invisible blocks like I said earlier it's really just a little shorter than it should be), but for some reason proboards doesn't like it when I use multiple attributes like I SHOULD be able to -shakes fist at proboards-

But that's okay because that actually segues quite nicely into our next topic.

Styles, Properties, and Values

If we were to use an individual attribute for each thing we wanted to modify for our div our code would be so long, especially for highly stylized templates. Luckily, there's a shortcut that works really nicely on proboards called the style attribute. Essentially, when you use the style attribute you're just taking all of the attributes you wanted to use and shoving them all into one. It will look something like this:

<div style="property:value;"> </div>

"style" is your new attribute. Your property is basically your old attribute, i.e. width, just in a different spot, and your value is pretty much the same as before. Pay special attention to the double quotes and the semi-colon. They are super important. A semi-colon goes after each property/value set, including the last one. So let's use our original width and height as an example.

<div align="center"><div style="width:200px;height:500px;"> </div></div>

Okay, at this point you probably think I'm crazy. I know it doesn't look like anything is there, but trust me, it is. Remember - divs are invisible until you modify them either in the style tags or by putting something in the content.

Now, why did I put that alignment property in its own div? Well, you need to remember that a div style only modified what's inside the div. So, in order to center the entire template itself, and not just what's inside of the template, you have to put an extra div around it.

Background Color

So let's do just that. Let's modify the background color of our div. We do this by adding a "background-color:#xxxxxx;" property value set.

A pound sign followed by 6 numbers/letters is how you tell the computer to show a certain color. There are various websites you can use, but I like to use WEBSITE NAME HERE. If you plan to do a lot of graphic-y stuff, I also recommend the browser extension NAME HERE. I really like the color #ccccff, so I'm going to use that for our background:

<div align="center"><div style="width:200px;height:500px;background-color:#ccccff;"> </div></div>

Becomes

Okay! So now that we can actually see our div, I think I might want to change up the dimensions a little bit. To me, it seems a little too thin and too tall to be a regular posting template. Let's try a 400x500 size. So here's our code:

<div align="center"><div style="width:400px;height:500px;background-color:#ccccff;"> </div></div>

And our template so far:

Text Color, Font, & Size

Some people like to put quotes in their templates and that's just what I'm gonna do. I'm going to use the quote "She needed a hero, so that's what she became." I'm going to split it between the top and the bottom. First, let's just see what it looks like when we just sorta pop the first half in there.

<div align="center"><div style="width:400px;height:500px;background-color:#ccccff;">she needed a hero</div></div>

And our result...

she needed a hero

... Is kind of uggie. Or at least it's very plain looking. So how do we fix that? MORE STYLE TAGS. now here is where we need to make a big decision..... Do we just add more property/value sets to the one we already have? Or do we make ENTIRELY NEW TAGS and nest it inside?

Well let's think. I want the quote to be big, but the other text for the actual post to be sort of small. And I think I want the big text to be a pink color, but the little text to be white. And I think I even want the big text to be a different font all together. So since I want the big text to be so much different from all the other text, I'm going to start a new div that ONLY surrounds the text that it's going to modify. Don't forget to add another closing tag!

<div align="center"><div style="width:400px;height:500px;background-color:#ccccff;"><div>she needed a hero</div></div></div>

It's always a good idea to change the color and the font before you pick a size so that you know exactly what you're working with. Sometimes different fonts are different sizes even tho they say they're the same size, so it can cause trouble and frustration if you pick the size first. I like the color #cc8acc. Let's try that. To change font color, you just add a "color:#xxxxxx;" just like with the background color.

<div align="center"><div style="width:400px;height:500px;background-color:#ccccff;"><div style="color:#cc8acc;">she needed a hero</div></div></div>

To change the font, you use "font-family:'specific name', generalfamily;"

Okay, lets pause before I show you that example. Where it says specific name, you want to put the name of the font itself, such as times new roman or comic sans. If it's more than one word, you need SINGLE quotes, not double!!! Hell even if it's one word I still put the single quotes in. Then you need a comma, and then you need to put a general family name as a back up in case your computer doesn't recognize the font you chose. That way, it at least knows you want it to look a certain way, and it'll try its best to get as close as possible.

If you want to be completely, 99.99% sure that the font you picked will show up on every computer ever, it's a good idea to use a websafe font. That link includes an entire list of fonts you can use that will more than likely show up on every computer, and the general family name you can list them under. For Anrui specifically, we also have some Google fonts installed that you can use also.

So for example I'm going to use the font named Miniver. Since I'm going for a cursive look, I'll use cursive as my general family name.

<div align="center"><div style="width:400px;height:500px;background-color:#ccccff;"><div style="color:#cc8acc;font-family:'Miniver', cursive;">she needed a hero</div></div></div>

Okay. Let's check that.

she needed a hero

Yes, we are getting better. Let's mess with the font size by using our "font-size:00px;" set.

<div align="center"><div style="width:400px;height:500px;background-color:#ccccff;"><div style="color:#cc8acc;font-family:'Miniver', cursive;font-size:16px;">she needed a hero</div></div></div>

Just like with the width and height, we measure our font in pixels on proboards. So let's try that and see how much of a difference we have.

she needed a hero

Looking good! Now because we want the main body of the post to be styled differently than default also, we need to add another div to style.

<div align="center"><div style="width:400px;height:500px;background-color:#ccccff;"><div style="color:#cc8acc;font-family:'Miniver', cursive;font-size:16px;">she needed a hero</div><div>main text will go here!</div></div></div>

she needed a hero

main text will go here!

Awesome. Remember, even though we didn't hit the enter key, it still put a line break because we started a new div.

So I don't think I want to change the font family for my main text. The one we have as the default is very readable on computers and tablets, and I don't want my template to look too clashing. I do, however, want to change the font color, and possibly the size. Let's go with dark blue to contrast the light background. I'm going to add in my color property set, and also some dummy text so I can really see what it will look like as an actual post.

<div align="center"><div style="width:400px;height:500px;background-color:#ccccff;"><div style="color:#cc8acc;font-family:'Miniver', cursive;font-size:16px;">she needed a hero</div><div style="color:#595987;">They're creepy and they're kooky mysterious and spooky. They're all together ooky the Addams Family. Thank you for being a friend. Travelled down the road and back again. Your heart is true you're a pal and a confidant. Straightnin' the curves. Flatnin' the hills Someday the mountain might get ‘em but the law never will. You wanna be where you can see our troubles are all the same. You wanna be where everybody knows Your name. we might as well say... Would you be mine? Could you be mine? Won't you be my neighbor.

Till the one day when the lady met this fellow and they knew it was much more than a hunch. The year is 1987 and NASA launches the last of Americas deep space probes. These days are all Happy and Free. These days are all share them with me oh baby. The mate was a mighty sailin' man the Skipper brave and sure. Five passengers set sail that day for a three hour tour a three hour tour. Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Today still wanted by the government they survive as soldiers of fortune. Why do we always come here? I guess well never know. Its like a kind of torture to have to watch the show?</div></div></div>

she needed a hero

They're creepy and they're kooky mysterious and spooky. They're all together ooky the Addams Family. Thank you for being a friend. Travelled down the road and back again. Your heart is true you're a pal and a confidant. Straightnin' the curves. Flatnin' the hills Someday the mountain might get ‘em but the law never will. You wanna be where you can see our troubles are all the same. You wanna be where everybody knows Your name. we might as well say... Would you be mine? Could you be mine? Won't you be my neighbor.

Till the one day when the lady met this fellow and they knew it was much more than a hunch. The year is 1987 and NASA launches the last of Americas deep space probes. These days are all Happy and Free. These days are all share them with me oh baby. The mate was a mighty sailin' man the Skipper brave and sure. Five passengers set sail that day for a three hour tour a three hour tour. Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Today still wanted by the government they survive as soldiers of fortune. Why do we always come here? I guess well never know. Its like a kind of torture to have to watch the show?

That doesn't look too bad. Let's make the font a little bigger, and then also I think I want this text to be justified. So I can either add a new div like we did earlier, or I can use the text align property set since I'm modifying what's INSIDE the div. Let's do that:

<div align="center"><div style="width:400px;height:500px;background-color:#ccccff;"><div style="color:#cc8acc;font-family:'Miniver', cursive;font-size:16px;">she needed a hero</div><div style="color:#595987;font-size:14px;text-align:justify;">They're creepy and they're kooky mysterious and spooky. They're all together ooky the Addams Family. Thank you for being a friend. Travelled down the road and back again. Your heart is true you're a pal and a confidant. Straightnin' the curves. Flatnin' the hills Someday the mountain might get ‘em but the law never will. You wanna be where you can see our troubles are all the same. You wanna be where everybody knows Your name. we might as well say... Would you be mine? Could you be mine? Won't you be my neighbor.

Till the one day when the lady met this fellow and they knew it was much more than a hunch. The year is 1987 and NASA launches the last of Americas deep space probes. These days are all Happy and Free. These days are all share them with me oh baby. The mate was a mighty sailin' man the Skipper brave and sure. Five passengers set sail that day for a three hour tour a three hour tour. Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Today still wanted by the government they survive as soldiers of fortune. Why do we always come here? I guess well never know. Its like a kind of torture to have to watch the show?</div></div></div>

she needed a hero

They're creepy and they're kooky mysterious and spooky. They're all together ooky the Addams Family. Thank you for being a friend. Travelled down the road and back again. Your heart is true you're a pal and a confidant. Straightnin' the curves. Flatnin' the hills Someday the mountain might get ‘em but the law never will. You wanna be where you can see our troubles are all the same. You wanna be where everybody knows Your name. we might as well say... Would you be mine? Could you be mine? Won't you be my neighbor.

Till the one day when the lady met this fellow and they knew it was much more than a hunch. The year is 1987 and NASA launches the last of Americas deep space probes. These days are all Happy and Free. These days are all share them with me oh baby. The mate was a mighty sailin' man the Skipper brave and sure. Five passengers set sail that day for a three hour tour a three hour tour. Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Today still wanted by the government they survive as soldiers of fortune. Why do we always come here? I guess well never know. Its like a kind of torture to have to watch the show?

Okay so now it's justified and at a readable size, but not only it is squeezed all the way to the edges of the template, but we also don't have room for our ending quote! We can fix this in a multitude of ways, but I'm going to do the simplest method and just change the width and the height. im also going to be just putting "dummy text" instead of the entire two paragraphs so that these posts don't get too stretched.

<div align="center"><div style="width:400px;height:500px;background-color:#ccccff;"><div style="color:#cc8acc;font-family:'Miniver', cursive;font-size:16px;">she needed a hero</div><div style="width:300px;height:350px;color:#595987;font-size:14px;text-align:justify;">dummy text </div></div></div>

she needed a hero

They're creepy and they're kooky mysterious and spooky. They're all together ooky the Addams Family. Thank you for being a friend. Travelled down the road and back again. Your heart is true you're a pal and a confidant. Straightnin' the curves. Flatnin' the hills Someday the mountain might get ‘em but the law never will. You wanna be where you can see our troubles are all the same. You wanna be where everybody knows Your name. we might as well say... Would you be mine? Could you be mine? Won't you be my neighbor.

Till the one day when the lady met this fellow and they knew it was much more than a hunch. The year is 1987 and NASA launches the last of Americas deep space probes. These days are all Happy and Free. These days are all share them with me oh baby. The mate was a mighty sailin' man the Skipper brave and sure. Five passengers set sail that day for a three hour tour a three hour tour. Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Today still wanted by the government they survive as soldiers of fortune. Why do we always come here? I guess well never know. Its like a kind of torture to have to watch the show?

Well, we've fixed our problem of being right up against the edge, but now our text is too long to the point where it's actually coming out the bottom of the template! It does this when the amount of text in a div is more than what can fit in a particular height and width. We can fix this by either removing both of the div's height values so that the entire template becomes stretched, or we can add a scroll.

To Scroll, or Not to Scroll?

So first let's look at the code and template when I removed the heights.

<div align="center"><div style="width:400px;background-color:#ccccff;"><div style="color:#cc8acc;font-family:'Miniver', cursive;font-size:16px;">she needed a hero</div><div style="width:300px;color:#595987;font-size:14px;text-align:justify;">dummy text </div></div></div>

she needed a hero

They're creepy and they're kooky mysterious and spooky. They're all together ooky the Addams Family. Thank you for being a friend. Travelled down the road and back again. Your heart is true you're a pal and a confidant. Straightnin' the curves. Flatnin' the hills Someday the mountain might get ‘em but the law never will. You wanna be where you can see our troubles are all the same. You wanna be where everybody knows Your name. we might as well say... Would you be mine? Could you be mine? Won't you be my neighbor.

Till the one day when the lady met this fellow and they knew it was much more than a hunch. The year is 1987 and NASA launches the last of Americas deep space probes. These days are all Happy and Free. These days are all share them with me oh baby. The mate was a mighty sailin' man the Skipper brave and sure. Five passengers set sail that day for a three hour tour a three hour tour. Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Today still wanted by the government they survive as soldiers of fortune. Why do we always come here? I guess well never know. Its like a kind of torture to have to watch the show?

There's still no room for the ending quote, but because there's no height set, we can still add it in and it will just stretch. Overall, not a bad option.

You can also had a scroll bar using the overflow property set. If you want the scroll bar to be there regardless of whether or not it's needed, you just use "scroll" for your value. If you want it to only be there when it's needed, you use "auto" for your value. So let's put the heights back in and use auto for our example.

<div align="center"><div style="width:400px;height:500px;background-color:#ccccff;"><div style="color:#cc8acc;font-family:'Miniver', cursive;font-size:16px;">she needed a hero</div><div style="width:300px;height:350px;color:#595987;font-size:14px;text-align:justify;overflow:auto;">dummy text </div></div></div>

she needed a hero

They're creepy and they're kooky mysterious and spooky. They're all together ooky the Addams Family. Thank you for being a friend. Travelled down the road and back again. Your heart is true you're a pal and a confidant. Straightnin' the curves. Flatnin' the hills Someday the mountain might get ‘em but the law never will. You wanna be where you can see our troubles are all the same. You wanna be where everybody knows Your name. we might as well say... Would you be mine? Could you be mine? Won't you be my neighbor.

Till the one day when the lady met this fellow and they knew it was much more than a hunch. The year is 1987 and NASA launches the last of Americas deep space probes. These days are all Happy and Free. These days are all share them with me oh baby. The mate was a mighty sailin' man the Skipper brave and sure. Five passengers set sail that day for a three hour tour a three hour tour. Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Today still wanted by the government they survive as soldiers of fortune. Why do we always come here? I guess well never know. Its like a kind of torture to have to watch the show?

Either option is fine! I'm going to stick with the scroll, just because that's what I prefer.

So now to add our end quote, since I want it to be styled the same way as the first part, I can just copy and paste!

<div align="center"><div style="width:400px;height:500px;background-color:#ccccff;"><div style="color:#cc8acc;font-family:'Miniver', cursive;font-size:16px;">she needed a hero</div><div style="width:300px;height:350px;color:#595987;font-size:14px;text-align:justify;overflow:auto;">dummy text </div><div style="color:#cc8acc;font-family:'Miniver', cursive;font-size:16px;">so that's what she became</div></div></div>

she needed a hero

They're creepy and they're kooky mysterious and spooky. They're all together ooky the Addams Family. Thank you for being a friend. Travelled down the road and back again. Your heart is true you're a pal and a confidant. Straightnin' the curves. Flatnin' the hills Someday the mountain might get ‘em but the law never will. You wanna be where you can see our troubles are all the same. You wanna be where everybody knows Your name. we might as well say... Would you be mine? Could you be mine? Won't you be my neighbor.

Till the one day when the lady met this fellow and they knew it was much more than a hunch. The year is 1987 and NASA launches the last of Americas deep space probes. These days are all Happy and Free. These days are all share them with me oh baby. The mate was a mighty sailin' man the Skipper brave and sure. Five passengers set sail that day for a three hour tour a three hour tour. Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Today still wanted by the government they survive as soldiers of fortune. Why do we always come here? I guess well never know. Its like a kind of torture to have to watch the show?

so that's what she became

And there's our template! Now like I said in the beginning, this template is the bare basics. It's readable, and it's styled. Does it look the best? Nah. There is definitely more id do to it to make it even better. But it works. We'll be covering more stuff in the next few chapters, and I'd love to see what you can do with THAT information to make THIS template better ;3