CODING 101

[celeste trista aurelia]

[classy=header]proboards basics[/classy]

DISCLAIMER: I am not responsible for any headaches you get from trying to read this.

while by no means is this an excellent tutorial (or even a good one), I'm making this to maybe make a few things clearer about the scripts that have been added to antiquity. if you can't code at all, you might be better off searching for a legit tutorial made by someone who can teach better than I can.

I think, by now, most of you know what the usual proboards codes do, but here's a refresher of the most common ones:
bold ([b]text here[/b])
italics ([i]text here[/i])
underline ([u]text here[/u])
strikeout ([s]text here[/s])
color ([color=hex code]text here[/color])
^superscript ([sup]text here[/sup])
_subscript ([sub]text here[/sub])
size ([size=#]text here[/size])
where # starts at one (being small) and goes up (getting larger).

generally, using the other ones (such as the glow, shadow, and move/marquee) aren't exactly suggested because sometimes it doesn't work across browsers -- whatever looks pretty on one computer might not look so swell on another. along with those codes are ones that are still frequently used, such as [blockquote][/blockquote] and the justify tag (the 'J' button).

blockquote does this: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius tempor neque, quis dictum magna ultrices accumsan. Aenean sit amet elit quis orci ultrices adipiscing.

justify (which is actually in effect this entire post except the blockquote example section does this: Duis interdum ultricies nunc in varius. Nulla dolor ipsum, tincidunt ut sagittis ac, faucibus vel eros. Suspendisse rhoncus viverra dui vel feugiat. Suspendisse in vehicula lorem. Etiam vel lorem dui, a ultrices nisl. Sed eros arcu, suscipit eu accumsan non, adipiscing ac ipsum. Vivamus gravida, metus consectetur condimentum tempor, nunc tellus semper tortor, in consequat nunc tellus a ante.

with blockquotes (in posts: in essays and whatnot it's used for other things), it's generally to add some padding to both sides and make the post look more streamlined, and justify serves the same function by pushing both the right and left margins flush against the sides.

lists ([ul][/ul]) only push over the left margin, and are useful when you want to list (duh) objects. it looks something like this, with each bulletpoint looking like

[/li][li] when you're typing it out, but showing up like this in posts:

• object one
  
• object two
  
• object three

in case you were wondering how I got a bunch of codes to show up in my post without using [code][/code] tags, I used these: [noubbc][/noubbc]. not many people know about it or use it (in my opinion), but it's very convenient sometimes.

I ... really don't want to list out all the little buttons that are up there, but if you have any questions feel free to ask? (or just try it out for yourself; the best way to learn is by trial and error.)

next up will be style and classy tags, I guess. once you learn the basics of style tags, classy tags are a breeze.[/justify][/blockquote]
[newclass=header]font-family: georgia; font-size: 40px; font-style: italic; margin-bottom: -10px[/newclass]

[celeste trista aurelia]

[classy=header]style tags[/classy]

let's see how fast I can finish writing up this entire tutorial, yeah?

anyway, style tags are a lot like css -- but since I learned (really bad, as in horribad) css after styles, don't worry if you don't know css. I had no clue what css was when I started. here's what style tags look like: [ style=][ /style] (without the spaces, obviously; you can't stick style, justify, and classy tags into the noubbc tags. it just doesn't work, for various reasons.) of course, that by itself does absolutely nothing; it's what you define in the tags that make things start to look pretty.

when you start out with style tags, you need to learn how they work. styles that open have to close, just like any other tag, and whatever you decide to do with your style tag (make your text colorful, enlarged, smaller, whatever) only affects whatever is inside of the tags; same with the other tags. for example, if you decide to bold things, only the words inside of the [b][/b] are bolded, right?

now comes the heart of this section: the stuff after the equal sign in the first part of the tag. I have no clue what they're really called, so I'll call them 'parts' (you'll find out what they are in a second) -- and parts work like this. each part must be seperated by a semicolon, and there are two parts to a ... part. uh, rather, there's two halves to a part. the first half is what you're defining, the second is what you want to define it to, seperated by a colon.

trust me, this'll all make sense in a bit. I hope.

for example, take this:

hi look at me I'm some kind of text!

I put the text into a style tag, and defined the font -- yeah, you could just use [font=georgia][/font] instead of styles, but just wait. the inside of my opening style tag looks something like this: style=font-family: georgia. the entire part would be the 'font-family: georgia' while the first half is 'font-family' -- that tells the board that 'oh, I'm going to define the font'. the font could be anything: arial, tahoma, courier now, comic sans ms. in this case, I chose georgia, which I then put in as the second half. together, that's a part. (if you wanted another example, I could just as easily have gone 'font-family: verdana' and the font would be verdana, not georgia.)

now I'm going to show you why style tags can be very useful sometimes:

hi look, here's more text.

if you wanted to do this the normal way, you'd end up with some nasty stuff on your hands. I mean, look at this: [font=georgia][size=4][b][i][color=ffffff]hi look, here's more text.[/color][/i][/b][/size][/font]I'm not sure about you guys, but I'm a lazy dip -- typing out all the opening tags and then closing them all afterward kind of make me not want to try. that's where style tags come in handy.

instead of all of those tags, you can put them all into one style tag (since they're affecting the same piece of text). so the inside now looks like this, with all of my parts properly seperated:
style=font-family: georgia; font-size: 18px; font-weight: bold; font-style: italic; color: #ffffff
I know it looks like a lot of work, but it's just putting a few pieces together. once you've gotten the hang of that, you can do pretty much anything. (be careful, though! this coding is a bit different than what most are used to; 'size: 20px' does nothing, but 'font-size: 20px' works just fine.)

tl;dr: ... I can't make this any shorter. I think I'm just a long-winded person.

instead of classy tags next, I think I'm just going to devote the next post to explaining a lot of the common parts used in style tags.

[celeste trista aurelia]

[classy=header]style tags (cont.)[/classy]

here are the parts (some are only the first half, because you can put whatever you want for the second half -- don't forget the colon between the two!):
font-family -- this lets you choose a font to use.
font-size -- usually in pixels, this defines your size. the larger the number, the bigger the text. the units are generally pixels, or 'px' -- 10px font is the equivalent of size 1 font on proboards (the default size for this forum, I think.)
font-weight: bold -- the equivalent of [b][/b].
font-style: italic -- the equivalent of [i][/i].
text-align: center, text-align: right, text-align: left, and text-align: justify -- these are the equivalents of [center][/center], [right][/right], [left][/left], and the justify tag.
text-decoration: underline -- the equivalent of [u][/u]
color: #hexcode -- replace 'hexcode' with whatever color you want; ffffff is white, 000000 is black.
background-color: #hexcode -- this will make the background of your text whatever color you put in.
width -- define a maximum width, in pixels. so if you want your text area to be thinner, but don't want to use ten thousand blockquotes, don't fret! simply define a width (such as 300px), stick it in the style around your text (becoming 'width: 300px') and BAM. it's thinner now.
height -- same concept as width, but with height. there's something really nifty about height, though: if you don't want something to go past, say, five hundred pixels long, you can stick in a scrollbar! it's pretty great, but please do not make scrollbars that activate at 200px high for posts. that's ridiculous, and why would you ever want to make someone read that.
overflow: auto -- just chuck that in after you've defined a height and it'll automatically create a scrollbar for you once it goes over your defined height.

again, feel free to ask questions (and by no means are these all that you could possibly use), but trial and error is your best friend. look here for more css codes.

[celeste trista aurelia]

[classy=header]classy tags[/classy]

once you start to make things with style tags, you start to realize that even style tags can get unwieldy. for example, I made a template that had something like this repeatedly:
style=font-family: georgia; font-size: 25px; font-style: italic; line-height: 25px; text-align:center; color: #89B399

and this is what it looks like.

.... I'm not sure about you guys, but typing all of that out everytime I wanted to make text look like that? no thank you. not to mention the fact that the same code -- the same parts -- appeared in my code about four times. so, instead of having that giant, nasty-looking thing, I used classy tags. it made things look so much neater!

classy tags look like this: [ classy=][ /classy] (again, without spaces.) in order to use these tags, you need to name your code -- in this case I called it 'large text'. then, somewhere at the bottom of my post (it could really go anywhere -- usually it's at the bottom, but it can be at the top too), I added in this: [ newclass=largetext]font-family: georgia; font-size: 25px; font-style: italic; line-height: 25px; text-align:center; color: #89B399[ /newclass]. again, without spaces. essentially, I took all of the parts that appeared over and over and just put it into a newclass. once that's done, all I have to do is put in [ classy=largetext][ /classy] instead of the whole style shebang. like this:
[classy=largetext]whoo hoo![/classy]
convenient, isn't it? what's even more convenient is that you only need to define newclass once per page -- look at the big words at the beginning of every one of my tutorial posts. I put those in classy tags (quote if you want to see!), but I only put in the newclass part in the first post. after that, you can just use a classy tag and it'll work like a charm!

the exception is whenever you move onto the next page of posts -- then you have to define the newclass again, or else it'll not show up. (and be careful not to have two classys with the same name on one page! weird stuff is going to happen, and you definitely don't want that.)

again, feel free to ask questions, and trial and error is your friend.

... after this should logically be the basics of tables, but dear arceus that's a lot to explain. maybe it'll come later. right now, though, this is pretty much how style and classy tags work; I'm sorry to everyone who read this, because I'm sure it gave quite a kicking headache. "orz

[newclass=largetext]font-family: georgia; font-size: 25px; font-style: italic; line-height: 25px; text-align:center; color: #89B399[/newclass]