|
|
Post by αℓℓı on Jun 19, 2008 23:33:47 GMT -5
Want to make your posts super-fancy but don't know how? Forget exactly how to do something? Know how to do something but want to make sure you're doing it right?
Look no further, for here I will provide you wish a reference for the codes you can use on Kairuu's forum.
These will be posted in order of function, based on the layout of the buttons that are below the 'Subject' line of your post--yes, those little gray/tan/off-white buttons. To their right is a "Colors" drop-down menu and, below it, a "font" drop-down menu. Those will be at the end of the list. Let's begin.
First of all, you need to know one thing, and one thing only: "tags" are the [ and ] that surround your coding when you use BBcode. When I say tags, I mean [] and [/]. [] is your starting tag, with whatever your function (the identity of whatever goes in between the two brackets) is inside of it. [/] is your ending tag, with the same function name being placed between the / and the ]. If you're a bit confused, don't worry, you'll see what I mean.
Bold
[b]Text Here[/b]
Anything you type between the bold tags will be bolded.
Italic
[i]Text Here[/b]
Anything you type between the italic tags will be italicized.
Underline
[u]Text here[/u]
Anything you type between the underline tags will be underlined.
Strike
[strike]Text here[/strike]
or
[s]Text here[/s]
Anything you type between the strike lines will have a strike through it.
[glow=red,2,300]Glow[/glow]
[glow=color,pxsize,300]Text Here[/glow]
Adds a glow to your text. Be warned that this will only be visible to those who are using Internet Explorer, and only those using it on Windows. (Can you even use IE on Macs? I don't think so.)
[shadow=red,left,300]Shadow[/shadow]
[shadow=color,direction,300]Text Here[/shadow]
Adds a dropshadow to your text. Be warned that, like the glow function, this will only be visible to those who are using Internet Explorer on Windows.
[move]Text Here[/move]
The BBCode version of marquee, without the ability to set different functions. Will make your text move to the left. Be warned that many people find this an annoying code and it should not be used in excess, if even at all.
Pre
[pre]Text Here[/pre]
Sets your font to a Pre-style.
Left
[left]Text Here[/left]
Aligns your text to the left.
Center
[center]Text Here[/center]
Aligns your text to the center.
Right
[right]Text Here[/right]
Aligns your text to the right.
Horizontal Rule
[hr]
Inserts a horizontal rule. Do you see those gray bars between each code? That's a horizontal rule. You can't align them, you can't have more than one per row. They're used as dividers.
Size
[size=1]Text Here[/size]
You can set the size to anything between 1 and 9. Anything higher will simply be at the 9 size (though may or may not appear bigger depending on your computer). Some computers (like mine, for instance, apparently) do not display the size changes, but others may.
This sets the size of your text.
Font
[font=verdana]Text Here[/font]
Sets the face of your font. You can also do this with the drop-down menu below the 'Colors' drop-down menu. You can decide the face of your font by it's name. Try not to use fancy fonts that require downloading because most people will not have those downloaded.
Fonts considered safe:
Sans Serif | Arial | Times New Roman | Verdana | Courier New | Comic Sans MS | Tahoma | Georgia | Lucida Console
At least, on Windows computers.
Blockquote
[blockquote]Text Here[/blockquote]
Each blockquote set will move your text inward more. Do you see how this whole post is one set inward? That's because one set of blockquote tags surrounds it. You can use multiple blockquote tags, but if you use too many and it's only a few words per line, it will be annoying for others to read.
URL
[url=LinkHere]Title Here[/url]
Put the http:// in "LinkHere" and name your link in "Title Here". Inserts a hyperlink.
FTP - File Transfer Protocol
[ftp=ftp link here]Title Here[/ftp]
Put the URL to the FTP in "ftp link here". Insert your title in "Title Here".
Inserts a link to an FTP address. If you don't know what this is, don't use it.
Image
[img]URL here[/img]
Insert the http:// in "url here" to insert an image in your post.
Sadly, we cannot use imgleft or imgright tags here. I wish we could.
Mailto
[email]Email address here[/email]
Serves the same function as the mailto:"addresshere" HTML command.
Insert your email address in between the tags to create a direct link to your email address.
Tables
Because tables are so vast to use and understand, they're getting their own post below. So please look to the following post for the Tables Guide.
Tables are very useful things, after all.
Sup
[sup]Text Here[/sup]
Makes your text smaller and raises it.
If you confuse Sup and Sub sometimes, think "Sup"="Up".
Sub
[sub]Text Here[/sub]
Makes your text smaller and lowers it.
TrueType
[tt]Text Here[/tt]
Makes your font a TrueType font.
Code
[code]Text Here[/ code]
Note that you must take out the space between / and code.
I had to include the space so it would display properly.
This allows you to put BBCode and HTML in a post without it actually formatting or ruining the post. This is useful if you're trying to show someone how to do things (such as what I'm doing here) or are showing how to code things with HTML.
See the white things showing you how to write the BBCode? That's how a code displays.
[quote]Text Here[/quote]
Quotes text.
Lists
Because they can be very fun to work with, lists have also gotten their own post. They are below Tables, and are the third post here. So please check the third post for the List Guide.
Colors Drop-Down Menu
When you select a color, it will put in your code for you, much like the buttons. Much like the buttons, also, if you select text and then click the link, it will envelop all selected text in the code.
[color=colorhere]Text Here[/color]
Or
[color=hexhere]Text Here[/color]
If you want a simple color, such as "red", "white", "black", "blue", "teal", or such, or any colors on the drop-down color list, you can simply use the first code and replace colorhere with your desired color text.
If you want to get fancy and know what you are doing, you can use HEX numbers.
HEX numbers are six-digit numbers representing certain colors. On most sites you must include a # sign before the number but, here, for whatever reason, it will not color your text if you do include it.
For an amazing site that lists more hex numbers than you could possibly think of, feel free to visit: Hex Hub
Any text with the color tags around it will be colored that way.
If you include more than one color tag at once, such as:
[color=green]Hello, I'm [color=teal]Alli[/color].[/color]
That will display as:
Hello, I'm Alli.
Try not to use too many color codes at once or your computer might explode, or the coding may simply not work properly as codes will often confuse themselves and use other end tags when you don't want them to.
Font Face
Much like the red 'A' tag next to the color codes, you can use this drop-down menu to choose fonts to display your text in. It is the same code and lists a couple more fonts than I did, but I'm not positive if they're all on all computers. Being I already explained fontface code to you, I won't explain it any more again here.
|
|
|
|
Post by αℓℓı on Jun 20, 2008 0:54:23 GMT -5
Tables
Alright. So, like I said, here's your guide to tables. They can be fairly involved and can be messed up pretty easily, so make sure you take careful notice and be sure not to confuse /td and /tr!
First off, you should know that tables create... tables.
Yeah. Pretty simple, huh? Off the basics.
The order for posting tables must always be TABLE, TR, and TD.
Table is your surrounding tags. All your TRs and TDs and content MUST be in between the table tags.
TR is your Table Row tag. You must close your previous table row to insert a new table row. They are the second tags, and must always surround your TD tags.
TD is your Table Define tag. You must close your previous table define to insert a new table define. They are the final tags, and must always be between TR tages. Table Define (at least, so I've taken to calling it) is what surrounds the content of each table cell. For ever TD you have in a TR, you will have one cell. You can also call these cells "columns", but it's much easier to refer to them as cells, because they don't actually create columns if you don't have as many rows.
If one row doesn't have as many TD tags as the others, then they will result in Blank Cells where those cells would have been.
Let's start with a basic, simple table.
I'm going to keep out the other decorations for now--because you can use other BB code within your tables to define other variables, such as colors and font sizes and everything else you can think of.
[table][tr][td]This is a basic, one-celled table.
There is one row, and only one cell in this row.[/td][/tr][/table]
The above code will result in the following table:
This is a basic, one-celled table.
There is one row, and only one cell in this row. |
When you insert another TD tag, you will insert another cell. If you have not ended your previous TR, this cell will be in the same row as the first cell.
[table][tr][td]First Cell, Row One[/td][td]Second Cell, Row One[/td][/tr][/table]
The above code will result in the following table:
| First Cell, Row One | Second Cell, Row One |
Now, let's add a new row. First, you must close off your previous row (TR) before you can begin a new row, or else you will pretty much scramble your coding. Note that all TD codes must also be correctly ended, and still within your TR codes. Remember to include a TD in your new TR to define a new cell!
Below, I will show you a basic two-row table with one cell per row.
[table][tr][td]First Cell, Row One[/td][/tr]
[tr][td]First Cell, Row Two[/td][/tr][/table]
That code will create the following table:
| First Cell, Row One | | First Cell, Row Two |
Now you can create tables with multiple cells in multiple rows. Here is a table with three rows and three cells per row:
[table][tr][td]First Cell, Row One[/td][td]Second Sell, Row One[/td][td]Third Cell, Row One[/td][/tr]
[tr][td]First Cell, Row Two[/td][td]Second Cell, Row Two[/td][td]Third Cell, Row Two[/td][/tr][/table]
This coding will create this table:
| First Cell, Row One | Second Sell, Row One | Third Cell, Row One | | First Cell, Row Two | Second Cell, Row Two | Third Cell, Row Two |
Now, allow me what I meant when I called a cell "blank" when describing tables.
A blank cell is, essentially and simply, a cell with no date in it. You have two types of blank cells: those you define, and those you do not define.
A defined blank cell is a cell which you have coded with TD tags, but have not put any information in between those tags.
An undefined blank cell is a cell which you have not coded TD tags with and, thus, have also not included any information.
Here is a defined blank cell:
[table][tr][td][/td][td]Second Cell, Row One[/td][/tr]
[tr][td]First Cell, Row Two[/td][td]Second Cell, Row Two[/td][/tr][/table]
| Second Cell, Row One | | First Cell, Row Two | Second Cell, Row Two |
As you can see, the defined blank cell is the upper left cell.
Here is an undefined blank cell:
[table][tr][td]First Cell, Row One[/td][td]Second Cell, Row One[/td][/tr]
[tr][td]First Cell, Row Two[/td][/tr][/table]
| First Cell, Row One | Second Cell, Row One | | First Cell, Row Two |
The undefined blank cell is the lower right cell.
Undefined blank cells are more difficult to make and are typically not recommended, as if you mess up attempting to insert an undefined blank cell, you may realize it's simply defining itself as a previous cell.
If you want a blank cell, you should use a defined blank cell. Undefined blank cells are usually accidentally made.
... Yes, as you can see, they look the same.
Now that you have the basic logistics of a table down, you can now have some fun with the inside of your table. Oh, but first! You can also align your table. Whatever alignment tags you have around the outside of the table will not effect the inside of the table.
So if you want your table to display in the middle of your page, you simply surround your table in center tags, as follows:
[center][table][tr][td]Table![/td][/tr][/table][/center]
See? The text inside will be left-aligned by default, so if you want to align that, as well, you must include an align code. These align codes must be inside the TD tags, so you must align every single cell if you want them to all have the same alignment. A bit annoying, isn't it? But it means you can have multiple alignments in your cells. You can have multiple alignments in one cell, even.
[table][tr][td][center]Center-Aligned Cell[/center][/td][/tr]
[tr][td][right]Right-Aligned Cell[/right][/td][/tr]
[tr][td][center]Center-Aligned[/center]
[right]Right-Aligned[/right][/td][/tr][/table]
That code will display as the following:
Center-Aligned Cell | Right-Aligned Cell | Center-Aligned
Right-Aligned |
So now we can decorate. Basically, whatever regular BB code tags you want to put around your text, you can use! But remember that they must always be within the TD tags.
So let's say you want a table center-aligned in your post, with right-aligned text in the first cell displaying as pink, and center-aligned text in the second cell displaying as teal, and left-aligned text in the third cell displaying as green.
You would use the following code:
[table][tr][td][right][color=pink]Text[/color][/right][/td]
[td][center][color=teal]Text[/color][/center][/td]
[td][left][color=green]Text[/color][/left][/td][/tr][/table]
And if you want each on a different row, you'd simply use a similar but slightly-different code:
[table][tr][td][right][color=pink]Text[/color][/right][/td][/tr]
[tr][td][center][color=teal]Text[/color][/center][/td][/tr]
[tr][td][left][color=green]Text[/color][/left][/td][/tr][/table]
You can insert links, images, and other suck things in your tables, as well. You can even use HR tags, but mind that they might stretch your cell!
The following code will give you a table with bold, centered green text, an image, and a URL:
[table][tr][td][center][color=green][b]Hey, lookit this drawing Alli did!
[img]http://i242.photobucket.com/albums/ff28/ArtificialTalent/Lureball2.png[/img]
[hr]
Here's the link to the full-sized version, though:
[url=http://i242.photobucket.com/albums/ff28/ArtificialTalent/Lureballcopy.png]Click here![/url][/color][/b][/color][/center][/td][/tr][/table]
And this is what that code will look like:
Hey, lookit this drawing Alli did!
Here's the link to the full-sized version, though:
Click here! |
Well, that's about all I can teach you for now about tables. If you have any questions, feel free to post and I'll gladly answer your questions. If your table code isn't working and you can't figure out why, go ahead and post here with your coding in CODE tags and I'll help you fix it. Or you can PM me if you want to ensure that I notice.
Happy coding. :]
|
|
|
|
Post by αℓℓı on Jun 20, 2008 1:12:36 GMT -5
Alright, so here's the third part of the BB Coding guide--all about lists!
What are lists?
Lists are... shouldn't you already know what a list is? Well, a list is, in essence, a... uhm... list. Y'know, like a shopping list, or a list of people-to-eventually-killglomp.
Well, list tags can be used for pretty much anything: making a list for things like rules and keeping them all even with each other, or indenting a paragraph, which you can also do with blockquote tags. Unlike blockquote tags, however, the list tags will not take space off between either side of the paragraph--it will go as far as allowed. They can be combined with blockquote tags to make uneven effects.
Let's get straight into the examples though so I can show you what I mean.
First of all, you will need your list tags.
[ul][/ul]
Got them? Good. Now, your content that you want will be, obviously, between the list tags. Anything outside of the list tags will be separated.
Now, you can include more than one list tag. For instance, here is how many list tags will look, and I'll number each:
[/ul][/ul][/ul][/ul][/ul] You have to make sure that you close ever single list tag that you open. So if you have six 'list' tags, you mist have six '/list' end tags. Now, you can use the marker [/li][li] to define your list. The amount of list tags will effect what the [/li][li] marker looks like. Here I will show you what it looks like for six list tags. As you can see, they stop differentiating after three. Now, if you want some examples of how text will look, let's show you them with paragraphs in them. Mind that this whole post is in a blockquote tag, so it will push the right side further from the edge than it would normally for your list tags. [/ul][/ul] Note that that example is only using three list tags. All BBCode will work with lists, like coloring your text and such, just like with tables. You can also use multiple list codes and have them cascade how you want without ending them all at the same time. For example: [ul]Here is my first list.
[ul]Here is my second list.[/ul]
Here is my third list.[/ul]That code will display as: Here is my third list.[/ul] Note that whenever you end a list tag, a line will be broken in between the end tag and the next line, whether the next line is within list tags or not. Meaning that there will be an extra line--as you can see with the code above.
If you ever think your lists are messed up, or are displaying extra "list" or "/list" in text, make sure you have the correct amount of end /list tags, as that is the most common culprit. If that doesn't seem to be the case and you're still finding yourself struggling with a broken code, feel free to post or PM me and I'll be glad to help you fix it. Happy coding~ :] [/blockquote] |
|
