The Idiot's Guide To Code

[attr="class","jarguidetext"]
[break][break]
[b]this is bold text[/b][break][break]
[break][break]
[i]this is italic text[/i][break][break]
[break][break]
[u]this is underline text[/u]

[attr="class","jarguidetext"]

You can align things in different ways. However, this section will only detail the easy way to center your stuff.[break][break]
Here's how you can easily center some text. The following is the coded, centered text:[break][break]
[break][break]
Here is the code:[break]
[center]This text is centered[/center]

[attr="class","jarguidetext"]

"a href" is used to link text to sites, or to simply give another link. One can click on the text and will be taken to a new page. The first example allows you to write text that will link you to another page (template credits are done this way) whereas the other simply links the text.[break]
[a href="linkhere"]Text that links[/a] or [a href]link here[/a]

[attr="class","jarguidetext"]
[break]
"img src" is used to link an image.[break][break]
[img src="imagelinkhere"][/img] or [img]imagelinkhere[/img]

[attr="class","jarguidetext"]

Divs are used to create different sections in your code. For example, the text in this guidebook is in a separate div from the title div or the subtitle div. Within these divs, you can style things to be completely different, such as changing the font, background color, width, height, etc.[break][break]
[div]this is a div[/div][break][break]
However, within these divs, you need to specify some things: style and align.[break][break]

Align is used to set just WHERE the div goes. If you align it to the left, the div will be set at the left. Align it to the right, it will be set to the right. Usually, we want things to be centered, so if you align it to the center, it'll be set in the center.[break][break]
[div align=left]This div will be set to the left[/div].
[div align=right]This div will be set to the right[/div].
[div align=center]This div will be centered[/div][break][break]

Style makes your div look pretty. You can use it to color the background, create a border, change the text, decide how large you want your div, and more![break][break]
Here is an example of a use for div style. I've styled this div to be 100px wide and 50px high and to have a grey background.[break][break]
[break][break]
Here is the code for the above div:[break]
[div style="width:100px;height:50px;background:grey]This div uses "div style"[/div]

[attr="class","jarguidetext"]

The background can be changed using the color hex code (the ones with # and a string of a combination of 6 letters or numbers). I use this Color Picker to help pick colors. Or, you can use this Generate - Cooler to get some really nice color schemes.[break][break]
If I want to style a background to be black, I use the hex code for orange (which is #ffa500) and I can set it like so:[break][break]
[div style="background:#ffa500"]This background is orange[/div][break][break]

You can also make an image into the background. The code for this differs in that you need the link for the image, as well as a slight change in the code that comes after "background:"[break][break]
Here is a div of 100px width and height, with a 100x100 background:[break][break]
[break][break]
And here is the code for the above div:[break][break]
[div style="width:100px;height:100px;background:url(https://cdn-learn.adafruit.com/assets/assets/000/012/878/thumb100/led_strips_doge.bmp?1386611464);"]This div has an image background[/div]

[attr="class","jarguidetext"]

Using the width to style your div changes how, well, WIDE, your div is. For example, if I want my div to be smaller, then the value will be smaller.[break][break]
[div style="width:100px;"]This div is 100px wide[/div]
[div style="width:400px;"]This div is 400px wide[/div]
So if I created a div that is 100px wide, it will look like this: (note: I have styled it to have a background color so as to be more visible)[break][break]

The code looks like this:[break][break]
[div style="width:100px;background:#D9D9D9]This div is 100px wide[/div][break][break]

Using the height to style your div changes how long the div is. For example, if I want my div to be 100px tall and 100px wide, it will look like this: (note: again, I have colored the background)[break][break]

The code looks like this:[break][break]
[div style="width:100px;height:100px;background:#D9D9D9]This div is 100px wide and 100px high[/div][break][break]
Note that sometimes you do NOT need to specify a height: If you do not include a height, the div will expand to accommodate all the elements that are within it.[break][break]
Say I have a LOT of text and a div that is 200px wide and 100px high:[break][break]
[break][break]
[div style="width:150px;height:100px;background:#efefef;]I have a lot of text here oh yes i do i have enough text to fill this box and to fill it enough that maybe this box overflows with text so much so that I will need to show you just how the height doesn't need to be defined[/div][break][break]
See how the text overflows? You can simply remove the height component so your div encompasses all the text.[break][break]
[break][break]
[div style="width:150px;height:100px;background:#efefef;]I have a lot of text here oh yes i do i have enough text to fill this box and to fill it enough that maybe this box overflows with text so much so that I will need to show you just how the height doesn't need to be defined[/div][break][break]
See how it encompasses the text? That's how the div goes around all the text.[break][break]
Scrollbars will be covered later. :3

[attr="class","jarguidetext"]

Borders have several different types, and you can also code borders to be of different thicknesses. You can even choose which sides you want to have a border on![break][break]
solid gives you one solid border[break]
double makes your border have two lines rather than one[break]
dotted makes your border be a dotted line[break][break]
For example, here is a div which is 100px wide, 100px high, has a white background and has a solid orange border that is 10px thick:[break][break]
[break][break]
The code is:[break]
[div style="width:100px;height:100px;background:#fff;border:10px solid #ffa500;][/div][break][break]
Here's what the same box would look like if it used dotted and double borders:[break][break]
[break][break]
[break][break]
Here's the code:[break]
[div style="width:100px;height:100px;background:#fff;border:10px double #ffa500;"]This div has a double orange border of 10px[/div]

[div style="width:100px;height:100px;background:#fff;border:10px dotted #ffa500;"]This div has a dotted orange border of 10px[/div][break][break]
You can also align where you want the border to be. For example, if I want a div that is 100px wide, 100px high, has a background with hex code #D1F4FF and has a solid black border on the bottom and on the right, it would look like so:[break][break]
[break][break]
The code for this is as follows:[break]
[div style="width:100px;height:100px;background:#D1F4FF;border-bottom:10px solid #000;border-right:10px solid #000;]This div is 100px wide, 100px high, has a blue background and black border on bottom & right[/div]

[attr="class","jarguidetext"]
You can align your text in different ways. Aligning your text to the left moves your text...left! Aligning your text to the right makes your text be placed at the right. There are several different ways of aligning your text:[break][break]
left aligns your text to the left.[break]
right aligns your text to the right.[break]
center aligns your text to the center.[break]
justify aligns your text so the sides match up evenly.[break][break]
The following show the divs and the codes used to align your text.[break][break]
[break][break]
[div style="width:100px;height:50px;background:#efefef;text-align:left;"]This aligns your text left[/div][break][break]

[break][break]
[div style="width:100px;height:50px;background:#efefef;text-align:right;"]This aligns your text right[/div][break][break]

[break][break]
[div style="width:100px;height:50px;background:#efefef;text-align:center;"]This aligns your text to center[/div][break][break]

[break][break]
[div style="width:100px;height:50px;background:#efefef;text-align:justify;"]This aligns your text justify[/div]

[attr="class","jarguidetext"]
You can use padding to space away the text or other elements from the sides of the div. Padding is also controlled with px.[break][break]
Here is a div of 100px width, 100px height, white background, 10px solid orange border and 10px padding: [break][break]
[break][break]
Here is the code:[break]
[div style="width:100px;height:100px;background:#fff;border:10px solid #ffa500;padding:10px;]This div has 10px padding[/div][break][break]
Padding can help a lot when it comes to spacing things, but it also adds to the width and height of the div. So the 10px padding actually made the width and height of the div (excluding border) to be 120px by 120px.[break][break]
Padding applies to ALL SIDES of the div.

[attr="class","jarguidetext"]
You can create margins to change the position of your divs. For example, if you want your div to not be in the center, you can use margins to move the div up and down or left and right.[break][break]
Here is an example of a normal 100px by 100px div, without margins:[break][break]
[break][break]
Now here is the div with a left margin of 150px:[break][break]
[break][break]
See how the div has moved to the right? That's because we made a margin that is 150px wide to the left of the div, pushing it right. Below is the code used to create that margin:[break][break]
[div style="width:100px;height:100px;background:#ffa500;margin-left:150px;"][/div][break][break]
You can move your margin in any direction:[break][break]
margin-left creates a margin to your left.[break]
margin-right creates a margin to your right.[break]
margin-top creates a margin at the top.[break]
margin-bottom creates a margin at the bottom.[break][break]
You can even go into the negative numbers! If you made a div with "margin-left:-100px", the div would be shifted to the right as you make the margin smaller.[break][break]
[break][break]
[break][break]
Here is the code for the negative margin:[break][break]
[div style="width:100px;height:100px;background:#ffa500;margin-left:-100px;"][/div]

[attr="class","jarguidetext"]
OK so this is my quick little lesson on newclass. It's actually a very simple concept to understand, once you get the hang of it. It also makes your codes much easier to read and much neater as well.[break][break]
So say I want to make a square, 100x100 div that is orange in color (color hex code #ffa500) and has text in it that is white.. Normally, without newclass, it would look like this:[break][break]
[break][div style="width:100px;height:100px;background:#ffa500;"][font face="verdana"][font color="ffffff"]text in box[/font][/font][/div][break][break]
Well, you can also do this in newclass! But first, quick lesson on the "font face" and "font color":[break][break]
In newclass, "font face" is changed to "font-family". So if I want a Verdana font, then it would look like this in newclass: "font-family:verdana;"[break][break]
Font color is simplified. All it is in newclass is simply like so: "color:#fff;"[break][break]
Just like in regular bbcode, the semicolons simply separate different elements of the div.[break][break]
OK now back to newclass. Remember how the div had all those different parts? We can simplify it with newclass. This is the original code:[break][break]
[break][div style="width:100px;height:100px;background:#ffa500;"][font face="verdana"][font color="ffffff"]text in box[/font][/font][/div][break][break]
This is the newclass code:[break][break]
[break][div][attr="class","demo1"][/div][break][break]
Much simpler, right? Except, where did the attr and class and demo come from?[break][break]
Thing is, in newclass, it's like you're replacing the divs with tags. So for the above, I named that class "demo1" and at the end, I laid out exactly what I wanted the class to do. So currently, at the bottom of my code, I have this:[break][break]
[newclass=.demo1]width:100px;height:100px;background:#ffa500;color:#fff;[/newclass][break][break]
The [newclass] allows me to label a class, which is the thing that comes after the = sign. Note that classes in the newclass box need to have a . before the class name, and that when it's called into the actual template (by using the attr="class","classname") it does not have the . before it.[break][break]
Another important thing about newclass: use [nospaces]. This tag is extremely helpful so it doesn't mess up your code. You'll need to use break tags, but it'll help with your code a lot. Trust me. It's never fun to see code break because you've forgotten nospaces.[break][break][break]
A LITTLE EXTRA!!![break][break]
Let's talk googlefonts. What if you're getting sick of the old times new roman, verdana, arial, etc? You can easily incorporate googlefonts by using this: [break][break]
[googlefont=fontname][break][break]
So say I had the same orange box from earlier, but I want to change the font to Abel. For this example, I'm using a new newclass, but it will look exactly the same as the demo1. This time, I'll name the newclass demo2:[break][break]
[nospaces][googlefont=Abel]
[newclass=.demo2]width:100px;height:100px;background:#ffa500;color:#fff;font-family:Abel[/newclass][break]
[nospaces][googlefont=Abel][div][attr="class","demo2"]text in box[/div]
[newclass=.demo2]width:100px;height:100px;background:#ffa500;color:#fff;font-family:Abel[/newclass][break][break]
Well, look at that! The text is all fancy-schmancy now. You can go to the GOOGLE FONTS page and look up fonts. For fonts that are more than one word, simply use a + instead of a space between them. Within the newclass, you do not need this + however. This + only applies to the googlefont tag. So for example, the newclass would look like this:[break][break]
[newclass=.demo2]width:100px;height:100px;background:#ffa500;color:#fff;font-family:Open Sans[/newclass][break][break]
As opposed to the googlefont tag which will look like this:[break][break]
[googlefont=Open+Sans][break][break]
OK so let me know if you have any questions. Newclass takes some practice, but once you get the hang of it, it's much easier to read since you can place ALL newclass tags at the bottom of the code. It doesn't need to be in the middle.[break][break]
Alright! Have fun with Newclass!

[newclass=.newclassclass]width:400px;text-align:justify;font-family:Open Sans;[/newclass]
[newclass=.demo1]width:100px;height:100px;background:#ffa500;color:#fff;[/newclass]