Punki's FancyPost Tutorial

[/td][/tr][/table]
(Remove *)

It is vital that you not end the table coding as you would end a nested string of BBCodes. Why? Because then you will will get some useless text at the bottom that isn't nearly as pretty to look at as a useless text-free FancyPost. Besides, how you end it is the magic of tables.

The [*table] code makes everything following it part of a table. The [*tr] code starts a table row; Meaning that everything following it is on the same line. However, only the [*td] code can come after the [*tr] code. The [*td] makes a table cell; All content you wish to put into one table cell gets put there.
In this case, a FancyPost.
To put FancyPosts side-by-side, simply end the FancyPost, end the table cell ([/td]), then start another table cell ([*td]), and so on, and so forth. When you have your desired amount of FancyPosts side-by-side, just end the cell, end the row, and end the table.
Not only do you now have working tables, but you also have no useless, ugly text at the bottom.


Now you can experiment to your heart's desire with tables!

Now, adding multiple FancyPosts is fairly simple. It's how you choose to style them and put them together that counts.

I've seen some pretty interesting styles, and used a few myself.
Some people like to use geometric shapes and colors.
To do this, most people generally make a FancyPost, color it, accordingly, then add more FancyPosts to the top, bottom, sides, or all three, without rounding their corners, and adjusting their height and width to fit into the FancyPost as they like.

Neat, huh?

Another style is what I like to refer to as the sandwich style.
That's where you have one FancyPost on top, at least one in the middle, and one on the bottom.
I'm seen some great stuff done with this style.

(For your information, I was too lazy to build one from scratch on the spot, so I borrowed one of my personal Christmas fancies, and was too lazy to convert it.)

There are lots of different ways to use multiple Fancies. Experiment! Let your imagination explore the boundaries, of which there aren't many.

Now, scrollies are fairly easy to add and use.
overflow: auto;
That's all there is to it. Can you believe that?

Margins! Always a handy thing to know how to work.
Now, margins has nothing to do with how close to the edges of the FancyPost your content gets. (That's padding, and we'll discuss that next.) Margins has to do with how close or far your FancyPost is to the right left, top, or bottom.

margin-left: NUMBERpx;
margin-right: NUMBERpx;
margin-top: NUMBERpx;
margin-bottom: NUMBERpx;

Simply work your 'NUMBERpx' magic. In this scenario, the number of pixels you enter will affect how far or close to that specific margin your FancyPost will be.
A positive number of pixels will push your FancyPost in the opposite direction of the margin, and a negative will pull whatever's on that margin closer to your FancyPost.

Comprende?
Good!

Now, remember in Section Two when I was teaching you about rounded corners? Remember that example I gave you?

If you can figure out how I did that, I'd say we're almost done with this section.

Onto padding!

Now, padding is a nice thing to know about. It's just bound to make your FancyPost-making easier.
Padding adds extra pixels to the FancyPost, almost like cushioning it. For FancyPost coders out there trying to figure out why their picture backgrounds don't quite fit, the default padding would be your reason why!
When you write up the code for a FancyPost, default padding is automatically added. However, you can change up the padding by using this code;

padding: NUMBERpx;

Just work your 'NUMBERpx' magic here, kiddies. However many pixels you put it in is how much padding there's going to be.
Want your FancyPost and your background picture to match up?
Just put '0px' where 'NUMBERpx' is.

Do you see the difference?
(To those of you who may not have noticed, I've been using 200x250px dimensions for every example. The example above has 200x250px dimensions, it just has no padding.)

And that concludes Section Three; Fancy+Fancy!

Please remember that Probards BBC and WCRPG BBC+FancyPost coding don't mix, so some of the examples don't work. I've left them unconverted so you can test them yourselves, on WCRPG.

[/td][*td][fancypost bgcolor=#COLOR; border: NUMBERpx BORDERTYPE #COLOR; height: NUMBERpx; width: NUMBERpx][/fancypost][/td][/tr][/table][fancypost bgcolor=#COLOR; border: NUMBERpx BORDERTYPE #COLOR; height: NUMBERpx; width: NUMBERpx][/fancypost][/td][td][fancypost bgcolor=#COLOR; border: NUMBERpx BORDERTYPE #COLOR; height: NUMBERpx; width: NUMBERpx][/fancypost][/td][/tr][/table]

So there is a base code for you to use for example. The two shorter boxes that go next to each other, and above/below the wider fancypost, get a second table all to themselves, within their [*td][/td] tag. Then, without ending the first table's first [*td][/td] tag, put the wider fancypost below them. End that table cell, and begin the next one. In this, you will put the long fancypost that goes next to all of them. Then end the table. Yeah, it's a little confusing. If you have questions, I'll be happy to answer them. Or, you can do things the hard way, the best way to learn, and dissect my example below.


Next up, Scroll No Scroll!
This is a trick delivered to me by the gracious Quill, so everyone listen up. Ever wanted to have a scrolling box that doesn't look completely ridiculous? Here's the code.

[fancypost bgcolor=; border: 0px solid transparent; height: NUMBERpx; width: NUMBERpx; overflow: hidden;][fancypost bgcolor=#COLOR; border: NUMBERpx BORDERTYPE #COLOR; height: NUMBERpx; width: NUMBERpx; overflow: auto;] text [/fancypost][/fancypost]

Basically, create an invisible "mother fancy" with a hidden scrollie, and then create a visible FancyPost to fit inside it that has regular scrolling - AND YOU GET INVISIBLE SCROLLING.


That concludes Section Five; Coding Tricks!

Please remember that Probards BBC and WCRPG BBC+FancyPost coding don't mix, so some of the examples don't work. I've left them unconverted so you can test them yourselves, on WCRPG.