Melorama's Coding Tutorials

[Deleted]

(I wasn't sure where to put this, but if it's not where it should be one of the staffers can move it to its rightful place ;D)

---

Welcome to my coding tutorial thread!

So while I was making a gift table for Akh (in return for my awesome signature!) she wanted to know how I made it... so I guess I'm here to show y'all how to create tables! : )

But first! Before we get onto actually creating some fancy-looking tables, we need to learn the basic codes that go into making a table. (NOTE: this coding is suited towards Proboards v5 so it may not work on other sites!)

---

Alignment Codes:
Here are some examples to show you what I mean by "alignment".

To move your text to the left

[div align="left"]text here[/div]

To move your text to the right

[div align="right"]text here[/div]

To center your text

[div align="center"]text here[/div]

Another alternative to centering text that is a lot easier to use is

[center]text here[/center]

These codes can be found in the posting buttons at the top of where you go to reply to a thread, but I thought it best to add them anyways.

---

Font Codes:
Now, let's move onto colours!

Colours are fun and can spice up your otherwise plain post.
To do this just type out the following:

[font color="#000000"]text here[/font]
To change the colour of your font just change the "#000000" (just the zero's, you must leave the hash tag!) to the hex code of the colour you want.

To change fonts, use this code:

[font face="font name here"]text here[/font]

To change the size of your text, do the same as you did with the colour code but change "color" to "size" and instead of a hex code add in the size you want (1,2,3,etc.). (Also, the size of the normal text used on here is font size 4 ^~^)

[font size="number"]text here[/font]

---

Other Codes:
Codes such as bold, italics, underlined and strike-through are very simple to do, and I am sure many of you already know how to use them. But for those that don't know:

Bold
[b]text here[/b]
Italics
[I]text here[/I]
Underlined
[u]text here[/u]
Strike-through
[s]text here[/s]

---

Image Codes:
Adding an image is really simple already as the button is right there for you to use in the reply thread buttons, but for the tutorial's sake I'll show you how to write it out anyways.

Here is an image:

Here is the code to produce the image instead of just a link:

[img alt=" " src="link here" style="max-width:100%;"]
Remember: the only thing you should change in this code is the link of the image, otherwise the code won't work!
If you'd like to change the size of the image, simply find "max-width" (right before the tag closes) and change the percentage to whatever you'd like. For example, changing it from "100%" to "50%" will shrink the image to half its original size.

---

And there you have it! You now know the basic codes (all of which are used in creating tables!) that can make your post look pretty even without using a table. In the next post I'll show you how to code a basic scroll table.
If you have any questions please feel free to PM me or catch me on the chatbox. I promise I don't bite! : )

[Deleted]

How to create a basic scroll table : )

FIRST! Let's look at a table (created by yours truly).

Lorem ipsum dolor sit amet, sollicitudin amet amet metus metus ultrices, magna sed tincidunt suspendisse, faucibus felis rhoncus magna. Non velit fusce, dictum quis rhoncus nec, mauris sit massa libero vitae id qui. Sem arcu pellentesque amet enim est eget, commodo urna, urna ac augue vitae est ex sociosqu. Nullam fermentum vivamus, non quam soluta velit vestibulum aliquet eu, justo nec at. Class mi odio a faucibus sed, nulla imperdiet, tellus nibh quis, non mi in cillum purus pellentesque, malesuada enim consectetuer vestibulum. Litora odio ultricies, et enim lacus ut velit accumsan est, aenean et convallis aut vivamus, cras mauris ante at mus sit. Vitae posuere ligula, quam lectus elementum dui ante convallis. Euismod augue, elit sit, vel a sed vestibulum suspendisse nulla, quis laboriosam. Quisque rutrum, fermentum orci, leo eget vel vulputate aut lectus.

Ut ultricies habitasse, consectetuer mauris sed commodo ut id, auctor a amet, dis egestas ultrices neque, penatibus voluptate aliquam. Eget mollis maecenas, sodales sit sapien sint, neque scelerisque lobortis enim sed cursus maecenas, at diam, nunc ligula. Ut urna non ac, sit at illum, mauris rutrum aliquam nibh malesuada dui, et purus urna accumsan pulvinar parturient quam, aliquet non est malesuada ante.

Nascetur lobortis dolor eget pede, at nec faucibus lectus cursus nec nascetur, nulla fringilla vitae vehicula tempor, massa et donec, ac molestie vel eget viverra. Turpis nam magna soluta et praesent eget, officia molestie luctus proident porttitor per, tincidunt potenti, vestibulum quam eget augue elit luctus, odio convallis. Iaculis ante enim justo suspendisse, nibh felis nulla ullamcorper cursus iaculis. Magnis eget suspendisse parturient, placerat suscipit dis, adipisicing varius neque morbi torquent.

A Table

---

[div align="center"][div style="padding:0px 25px 25px;width:275px;height:350px;overflow:auto;background-color:rgb(205, 205, 205);"][div style="text-align:justify;"][font face="verdana" color="#000000" size="1"][img alt=" " src="http://i.imgur.com/TOr3qQu.png" style="max-width:100%;"]
Lorem ipsum dolor sit amet, sollicitudin amet amet metus metus ultrices, magna sed tincidunt suspendisse, faucibus felis rhoncus magna. Non velit fusce, dictum quis rhoncus nec, mauris sit massa libero vitae id qui. Sem arcu pellentesque amet enim est eget, commodo urna, urna ac augue vitae est ex sociosqu. Nullam fermentum vivamus, non quam soluta velit vestibulum aliquet eu, justo nec at. Class mi odio a faucibus sed, nulla imperdiet, tellus nibh quis, non mi in cillum purus pellentesque, malesuada enim consectetuer vestibulum. Litora odio ultricies, et enim lacus ut velit accumsan est, aenean et convallis aut vivamus, cras mauris ante at mus sit. Vitae posuere ligula, quam lectus elementum dui ante convallis. Euismod augue, elit sit, vel a sed vestibulum suspendisse nulla, quis laboriosam. Quisque rutrum, fermentum orci, leo eget vel vulputate aut lectus.

Ut ultricies habitasse, consectetuer mauris sed commodo ut id, auctor a amet, dis egestas ultrices neque, penatibus voluptate aliquam. Eget mollis maecenas, sodales sit sapien sint, neque scelerisque lobortis enim sed cursus maecenas, at diam, nunc ligula. Ut urna non ac, sit at illum, mauris rutrum aliquam nibh malesuada dui, et purus urna accumsan pulvinar parturient quam, aliquet non est malesuada ante.

Nascetur lobortis dolor eget pede, at nec faucibus lectus cursus nec nascetur, nulla fringilla vitae vehicula tempor, massa et donec, ac molestie vel eget viverra. Turpis nam magna soluta et praesent eget, officia molestie luctus proident porttitor per, tincidunt potenti, vestibulum quam eget augue elit luctus, odio convallis. Iaculis ante enim justo suspendisse, nibh felis nulla ullamcorper cursus iaculis. Magnis eget suspendisse parturient, placerat suscipit dis, adipisicing varius neque morbi torquent. [/font]
[/div][/div][/div]

When you look at the whole raw code like that it can seem like a rather frightening mess of computer jargon, but it's actually pretty straightforward once you know what it is you are looking at.
First off, let's get rid of all that filler text in the middle (where you would put your post).
[div align="center"][div style="padding:0px 25px 25px;width:275px;height:350px;overflow:auto;background-color:rgb(205, 205, 205);"][div style="text-align:justify;"][font face="verdana" color="#000000" size="1"][img alt=" " src="http://i.imgur.com/TOr3qQu.png" style="max-width:100%;"]
Text here.[/font]
[/div][/div][/div]

There, that's not so bad, right?
Still no? Okay, then... let's continue.
Let's take another look at that raw code again.
[div align="center"][div style="padding:0px 25px 25px;width:275px;height:350px;overflow:auto;background-color:rgb(205, 205, 205);"][div style="text-align:justify;"][font face="verdana" color="#000000" size="1"][img alt=" " src="http://i.imgur.com/TOr3qQu.png" style="max-width:100%;"]
Text here.[/font]
[/div][/div][/div]

Breaking it Down

---

Now, what are we actually looking at here? HTML (BBcode in this case as we're using square brackets) is a language which behaviours are put in between said square brackets ([ these things]) to create what we call "tags". Tags can be anything from something as simple as bold ([ b ]) to as big and scary looking as a div box ([ div ]). Tags encase everything you want to define behaviours for. Tags must always be closed or the table will break!
Anyways, so looking up at that code there, we can see it's only a few different tags.
There's center:[div align="center"]and then allll the way at the very end[/div]
A div:[div style="padding:0px 25px 25px;width:275px;height:350px;overflow:auto;background-color:rgb(205, 205, 205);"]
Another div within a div (think divception):[div style="text-align:justify;"]
A font tag:[font face="verdana" color="#000000" size="1"]
Let's focus on the "div" tags for now.

Divs - what are they, why are they so important? Also, the first div

---

Why are there more than one of them?
Well you see, div tags are like little divders. They separate things. When you look at this code for the table, you can see you're looking at different areas that you're trying to make look and behave certain ways.
The first div is to center the post (we don't really need to worry about this one anymore. Just remember to end the table with a closing div!). The second div sets the width and height for the table, as well as the background colour and the scroll bar you see on the right. The third div is telling the text in the table what to do (in this case align centered, otherwise known as justified).
The font tag is basically setting what font type, size and colour the text is.
The "img" tag is the code for the image you see on the top (if you put this at the very bottom of your post the picture will show up at the bottom of your table).

So, let's look at the second div again and break it up.
[div style="padding:0px 25px 25px;width:275px;height:350px;overflow:auto;background-color:rgb(205, 205, 205);"]
Looking at the code, you can see the basic BBcode structure: [type of tag="UTTER NONSENSE"][/end of tag] ... but what is all that utter nonsense? It doesn't look like BBcode. And that's because it's not. It's CSS. CSS is more of a descriptive language that makes everything look pretty, whereas BBcode is more structural.
So, we use CSS to describe the div and what we want it too look like. CSS also has its own rules for syntax (in this case the structure of the tag). Basically, it's just "element you're focusing on: what you want;" And you can just pile all these tags onto each other to create one descriptive paragraph of nonsense.
Let's take a closer look at the CSS elements in the second div.

Padding:padding:0px 25px 25px
This is just the amount of pixels everything in the table is from the edge of the table.

Width and height:width:275px;height:350px
This means that the table will be 275 pixels wide and 350 pixels high.

Scroll bar:overflow:auto
This puts in the scroll bar you see on the very right of the table.

Background colour:background-color:rgb(205, 205, 205)
This means that the colour of the background will be what the rgb is (in this case a dark-ish grey).
And look, that was it! All of that code that looked really frightening is just a bunch of really easy commands. Once you know what they are, you can just drag and drop whatever you want into it.

The Third Div, Font Tag and Image

---

[div style="text-align:justify;"][font face="verdana" color="#000000" size="1"][img alt=" " src="http://i.imgur.com/TOr3qQu.png" style="max-width:100%;"]
For more complex tables there would be a little bit more CSS in these tags, but for this simple table there isn't much needed.

Text-align:text-align:justify
This means that all the text will fill out the whole line. Other options are, of course, center, left, or right. But I recommend using left or justified.

Font colour:[font color="#000000"]
The "colour" tag always refers to the font colour. So in this case, my text is black.

Font face:[font face="verdana"]
This is the font you're using in your table. Here it is Verdana. But you could choose to use Arial, Georgia, Tahoma, or anything like that. It's up to you.

Image:[img alt=" " src="http://i.imgur.com/TOr3qQu.png" style="max-width:100%;"]
This is the image that will go at the top of your table. Just paste the direct image link between the quotations after the src= and it will show up. On more complex tables there would be more options for the background image, but I'll leave that for when I show you how to make those more complex tables.

The End!

---

And look! We just went through all that code, and it wasn’t even that hard. Hopefully I’ve taught y’all a little something about CSS and BBcode… enough that you can understand what you’re looking at and how tables work.
If you are ever having problems with your table not doing what you want it to, the code being broken and are unsure how to fix it, or not sure what code to use to get the behaviour you want, I’m always happy to help! ^~^

[Deleted]

Hey, Melo, I'll delete this when you see it but you forgot to add one more ' " ' to your [**div align="center"]

tag.

You could also explain the padding one because some people who have no idea of what HTML and CSS is wouldn't know which part is for which part of the padding e.g. right, left, up, down and the values to distance from it.
The first one after the let's break it down.

[Deleted]

Thanks for the heads up Akh! And I'll add that in a little later today when I have some more time : )

[Deleted]

I can do most coding, I'm actually pretty good, but I just have a little problem, I have no idea what to substitute rgb for and what the numbers are, can you explain that?