OOC: How to Code Preplay
Hello! This is your friendly neighborhood Rikku-mun. A while ago I posted a guide to coding tables for your userinfo page. I'm back for more fun and excitement with a little thing I like to call
PREPLAYING 101: SET-UP, TABLES, TIPS, AND TRICKS
(Warning: this is huge.)
Getting Started
Why Preplay?
People play scenes out ahead of time for a number of reasons. If you've got a few players with differing availabilities, it might be easiest to have a post open for a while, giving everyone a chance to chime in. Preplay is also handy for major plot developments, where something specific needs to happen before the post goes up.
How Do You Preplay?
The simplest way to preplay is to write text back and forth with the other person(s) involved. Sending e-mail can work, or collaborating on a shared Google document. Then one person takes all of the text and posts it to their journal. This method is especially good for times when one or both of you can't access LJ.
The more common method is to put up a locked/filtered post and have everyone comment using their journals as if the post is already appearing in the game. [Sometimes, the post in question is backdated; see this excellent post on backdating.] After the scene is completed, one person codes the icons and comments into a table and posts the results.
Setting Up Preplay
I set up a fake preplay post on my journal here. (Note: the fake scene is utter crack, but it's still helpful as a point of reference.)
The first thing to notice are the OCD threads. OCD threads aren't always necessary, but they're helpful for coordinating major scenes where several things need to happen. If it's just a scene of a few people talking, you can skip the OCD.
One of the advantages of OCD threads is that it allows events to be played out out-of-order. Seely might be pinging in to the thread about running from the blueberry monster before Gavin and Sam light the blueberry sigil's candle; since his reactions there don't depend on what they do, there's no worry about events contradicting themselves. So long as a thread isn't dependent on the outcome of (or emotional responses contained in) an earlier thread, it's usually safe to play out, which helps when you have players with differing availabilities.
Once the post is set up, the poster should notify the other players (and provide a link, hopefully), so that everyone can ping in. For scenes requiring major coordination, it can help to get a group chat going on IM, to clarify any questions or concerns, or even just who has next ping.
(If this is part of a larger plot, it's also helpful to have e-mails or other locked/filtered posts where people can ask questions or get updates on what happens when and how everything goes down. In plotting, OOC communication is totally essential; even if things seem obvious to you, they may not be to everyone else. It's better to say something twice than to forget to say it at all.)
Again, once you've got the post finished, someone codes it and posts it. So how do you code an LJ post?
Tables, Part 1: The Basics
Since we want to include icons with the comments, we're going to need a table. A simple one, with two columns, the left of which will always contain a 100x100 icon and the right of which will always contain text.
Simple enough to start, right?
TEXT
The entry text itself is going outside of the table, as a preface to the LJ-cut, so let's skip down to the first thread and start there.
The first comment (that isn't OCD set-up) is Seely's, here. Let's code that and see what happens.
Right-click on Seely's (very nice shirt-removing) icon. If you're using Firefox or one of its clones, you should see an option called "Copy Image Location." [If you're not, don't worry, read on.]
Select that, and then go to the table. Remove "ICON" and hit Control-V for paste. This gives you:
TEXT
If you're in Internet Explorer, then you have my sympathy. I mean, what you want to do is right-click on the icon and select "Properties."
The Properties window will pop up. The line marked "Address (URL)" is the icon location.
Select it with a Control-C to copy, and then use Control-V to paste it into place as indicated above.
Similarly, let's highlight Seely's text:
and paste that over where it says "TEXT."
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
So, how's it look?
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Okay! We've got the basics down. We just add a new row for each comment, and start a new table for each thread. Smaller threads can be lumped into tables together, if it looks better. Put it all behind an lj-cut to save everyone's Friends page.
We could leave it there, but there are all kinds of interesting tips and tricks to make your table look better and load faster, so read on.
Once we've got the settings the way we want them, we can set up a template for easy copy-pasting. Sound good?
Tables, Part 2: Clean-Up
The first thing we want to do is add a width and height tag to the icons. This lets your browser build the table before it has all of the pictures loaded, which means it loads faster and jumps less while you're trying to read. So:
should become
While we're at it, let's add a border to the image tag. Just makes it look prettier.
Let's also center that image tag; it looks better than the default left-align.
Last thing: let's set the first td's width to 110 pixels. Gives a nice cushion of space.
We added a border to the image tag a moment ago; let's throw one on the whole table. It'll look cleaner this way.
should become
Tables also look neater when they don't stretch the whole way across the page - and full-width tables can do weird LJ-breaking things if you have comment pages in your own journal's style. So let's set the width to 80% as well.
And cellspacing and cellpadding give everything a little breathing room. So.
Going back to our original table, which if you'll recall look like this:
TEXT
we now have:
TEXT
In the case of Seely's shirt-stripping, we've gone from
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
to
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
or, if you'd like a visual reference:
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Neat! This is a nice, clean table layout. For additional comments, you would simply add that many s in. For a thread with three comments, the blank template would look like:
TEXT
TEXT
TEXT
and so on. The first three comments of this thread, plugged into that:
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Sam had already taken his shirt off in preparation for the ritual. Blueberries left stains, after all. "Oh yeah? What's that?"
What's a guy to do but join in? Off came the shirt.
"Do a little dance? Make a little love? Get down tonight?"
which looks like:
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Sam had already taken his shirt off in preparation for the ritual. Blueberries left stains, after all. "Oh yeah? What's that?"
What's a guy to do but join in? Off came the shirt.
"Do a little dance? Make a little love? Get down tonight?"
We're not out of the woods yet for possible problems in coding tables, so we're going to code out a full thread down in Part 4. Part 3 deals with some extras you can add to your tables to make them look fancier or make it clearer who's speaking; if you like this style as it is, feel free to skip down to Part 4.
Tables, Part 3: Getting Fancy With It
Option One: Adding Names
This goes in the left column, with the icons. So we start with:
Then we change the width, just to make sure none of this is going to bleed over too badly. 125 is usually good.
Next we're going to add a break tag (
) after the image. This will make the text we add afterwards go onto the next line down.
Lastly, we add the name, with bold tags around it so it stands out. We'll keep this inside the image's tag.
NAME
When you add the name, you can either type out the character's name:
Seely
Seely
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
or use their LiveJournal username:
socksofcool
socksofcool
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
or if you really want to, both:
Seely (socksofcool)
Seely (socksofcool)
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Although "both" usually looks better if you add in another break tag first.
Seely
(socksofcool)
Seely
(socksofcool)
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Option Two: Colors
There are two things to discuss with background colors: how to add them, and how to pick them. We'll deal with the tagging first and then get into the pretty bits. Cool?
Color tagging goes on the tag, as a "bgcolor=" attribute. BG, in this case, means background. The quote mark is followed by a pound sign and then the hexadecimal code for a specific color.
Going back to Seely's comment:
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
I'm not going to bother with a visual; this isn't going to look any different yet. #FFFFFF is the hexadecimal code for white.
Going back to the three-comment table from earlier, let's try adding a color for each of them. Just for simplicity's sake, we'll use #FF0000 (bright red) for Seely, #00FF00 (neon green) for Sam, and #0000FF (bright blue) for Gavin.
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Sam had already taken his shirt off in preparation for the ritual. Blueberries left stains, after all. "Oh yeah? What's that?"
What's a guy to do but join in? Off came the shirt.
"Do a little dance? Make a little love? Get down tonight?"
Let's get a visual.
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Sam had already taken his shirt off in preparation for the ritual. Blueberries left stains, after all. "Oh yeah? What's that?"
What's a guy to do but join in? Off came the shirt.
"Do a little dance? Make a little love? Get down tonight?"
Wow, that's seriously ugly. Okay. That leads into the second point: choose your colors wisely.
The first thing to remember is that your text is going to be black, so you want colors that are pale enough that it isn't hard to read black text on them. In the examples above, the blue's almost too dark to read properly, and the green is blinding.
How do you find colors? One option is to go to the Hex Hub, which lists thousands of color swatches and the hexadecimal values for each. Or check out the Color Scheme Generator, which lets you click around different shades on the color wheel and supplies complementary and contrasting shades from there.
You can also tie the colors in to your characters. I usually code Rikku in a pale orangey-peach shade (#FFD8B5). And when we get to the Blueberry Monster in the sample table, I'm sure you can guess what color it's going to be.
Note: you'll probably have to do some previewing to make sure your colors go together without clashing or two of them looking too similar. You can always copy and paste what you have into LJ's Post an Entry screen, hit "Preview", and see how the table looks there.
The Hues Hub gave me a nice teal for Seely (#D4EDF7), a buttery yellow for Sam (#FFF599), and a mint green for Gavin (#CCEBAD).
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Sam had already taken his shirt off in preparation for the ritual. Blueberries left stains, after all. "Oh yeah? What's that?"
What's a guy to do but join in? Off came the shirt.
"Do a little dance? Make a little love? Get down tonight?"
Here's the visual:
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Sam had already taken his shirt off in preparation for the ritual. Blueberries left stains, after all. "Oh yeah? What's that?"
What's a guy to do but join in? Off came the shirt.
"Do a little dance? Make a little love? Get down tonight?"
Hey, now we're getting somewhere. Let's make a note of these colors and use them again in our sample table.
But first, we do Version 1, the way we set it up in Part 2. Shall we?
Tables, Part 4: Sample Tables
Version 1: Everything Goes to Hell
Don't mind the disastrous name; that's just what the thread is called.
There are seven comments at that link, but the top one is just the OCD set-up, so we'll need a table with six comment placeholders, like so.
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
Or you can open the table, add s as they occur, and close it at the end. Either way works fine. Other than the above template, I'm going to be doing the latter, so that there aren't blank rows making this even longer.
The first thing we want to do is code in Rikku's comment here. Note: bold, italics, strikethrough, and other such tags do not get picked up when you copy and paste the text, so you will have to add those back in manually.
Blank template:
TEXT
Add the icon:
TEXT
Add the text:
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
(The fact that "This was bad" is all the way over to the left is totally fine and not something you should worry about.)
Format for the text, if necessary:
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
which means our table starts like this:
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
We do the same for Gavin's comment:
"Did you rip reality again?" Gavin asked, backing away slowly.
before running into our first difficulty: Seely and the NPC Villain pinged in at the exact same time.
Simultaneous pings happen a lot in-game, and usually one person deletes their comment and reposts. It's not really necessary in preplay, because you can always fix it in the tagging. In this case, we're going to change the order to NPC, then Seely, because it seems like that lets Sam's comment flow a little better.
This means we have (remembering the italics for "hungry"):
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
"Guys, I think running might be a good idea."
Here's an interesting point. The NPC villain is being played by Rikku's journal, and is taking up one of her icon slots. If we upload that icon somewhere else, we can then set the
tag to point there instead of LJ. That means I can delete the icon from Rikku's LJ without losing the image for that plot.
(Only for preplay, obviously. If the villain had stomped around town with his evil blueberry minions, then deleting the icon would make those comments revert to Rikku's default, and that's a personal call on whether you keep the icon in play for that or not.)
I uploaded the pie icon to Photobucket:
Photobucket includes tagging for HTML, but their tags have all kinds of added bits that I don't like, such as an tag that links you back to Photobucket, and an tag plugging them, so we're not going to use that. We're going to select the middle line, the one marked "URL Link."
The nice thing is that Photobucket will copy the link to your clipboard if you just click anywhere in that field.
[Randomly? It feels very meta to upload screenshots of Photobucket to Photobucket.]
This means we change:
to
We code the last two comments to finish things off:
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
Which makes the whole table:
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
"Did you rip reality again?" Gavin asked, backing away slowly.
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
"Guys, I think running might be a good idea."
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
How does it look?
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
"Did you rip reality again?" Gavin asked, backing away slowly.
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
"Guys, I think running might be a good idea."
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
Not bad! Time for Version #2!
Version 2: Everything Goes to Hell (Again)
We're going to work backwards with this one; I'm going to assume that you read Version 1, and modify it accordingly, and then show you the templates you'd need to create it. Okay?
The first thing we want to do is add in everybody's name. So we're going to change all of those widths from 110px to 125px, and add "
NAME" between the image tag and .
NAME
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
NAME
"Did you rip reality again?" Gavin asked, backing away slowly.
NAME
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
NAME
"Guys, I think running might be a good idea."
NAME
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
NAME
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
Now we fill in those names. In this case, it's better to use the character's name rather than LJ usernames, because we've got an NPC in there.
Rikku
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
Gavin
"Did you rip reality again?" Gavin asked, backing away slowly.
Blueberry Monster
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
Seely
"Guys, I think running might be a good idea."
Sam
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
Gavin
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
Let's peek at it:
Rikku
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
Gavin
"Did you rip reality again?" Gavin asked, backing away slowly.
Blueberry Monster
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
Seely
"Guys, I think running might be a good idea."
Sam
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
Gavin
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
Nice! Now. We already have colors for Seely, Gavin and Sam. I use #FFD8B5 for Rikku, and let's use #E7DEED, a nice blue, for ze monsta.
So we go in and add these tags to the s.
Rikku
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
Gavin
"Did you rip reality again?" Gavin asked, backing away slowly.
Blueberry Monster
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
Seely
"Guys, I think running might be a good idea."
Sam
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
Gavin
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
So, how did that turn out?
Rikku
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
Gavin
"Did you rip reality again?" Gavin asked, backing away slowly.
Blueberry Monster
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
Seely
"Guys, I think running might be a good idea."
Sam
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
Gavin
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
Congratulations, that is one sweet looking table. Okay, it's kinda colorful, but you're usually not going to have five people all going in order like that. And it's nice and distinctive, at least.
So let's see what we'd use as templates for each of these. If you remember, our blank for Version 1 was:
TEXT
Seely first! We add his color onto the and change the td width to 125. Then we add in his name after the image.
Seely
TEXT
Similarly, Sam's would be:
Sam
TEXT
Gavin:
Gavin
TEXT
Rikku:
Rikku
TEXT
The Blueberry Monster is slightly different. Since it's an NPC with only one icon, we can just put that icon right into the template and not worry about it again.
Blueberry Monster
TEXT
How do the templates help us? Well. Let's see what would happen if we'd want to code another thread, like The Blueberry Sigil.
We'd start with the table tag:
and from there, the thread alternates between Gavin and Sam for seven comments.
Gavin
TEXT
Sam
TEXT
Gavin
TEXT
Sam
TEXT
Gavin
TEXT
Sam
TEXT
Gavin
TEXT
We add in the icons, the text, and close the table with a tag to give us:
Gavin
Gavin, holding the Blueberry candle like it was the most precious gold in the land, carefully lit it with the magic he had in his fingers.
Magic fingers. Teehee.
Sam
Sam carefully held the sigil over the candle, not burning himself because he was just that awesome at this sort of thing.
Gavin
The candle burned a bright, bright blue and illuminated both Sam mwahahah modding the light and Gavin's faces. "We look pretty damn cool."
Sam
"We totally look cool," Sam agreed as the light flared haha, I can mod too!. "This is why we get all the girls."
Gavin
"That Zoe chick is hot," Gavin said modding Zoe's hotness!. "Think we could get her?"
Sam
"Ooh, we'd get a hot older woman and piss off my dad. I say we go for it," Sam said as the sigil flared. "You know, if we live that long."
Gavin
"We're gonna live forever," Gavin said and kick a leg kick. "I got the rhythm in me tonight."
Which, then, looks like this:
Gavin
Gavin, holding the Blueberry candle like it was the most precious gold in the land, carefully lit it with the magic he had in his fingers.
Magic fingers. Teehee.
Sam
Sam carefully held the sigil over the candle, not burning himself because he was just that awesome at this sort of thing.
Gavin
The candle burned a bright, bright blue and illuminated both Sam mwahahah modding the light and Gavin's faces. "We look pretty damn cool."
Sam
"We totally look cool," Sam agreed as the light flared haha, I can mod too!. "This is why we get all the girls."
Gavin
"That Zoe chick is hot," Gavin said modding Zoe's hotness!. "Think we could get her?"
Sam
"Ooh, we'd get a hot older woman and piss off my dad. I say we go for it," Sam said as the sigil flared. "You know, if we live that long."
Gavin
"We're gonna live forever," Gavin said and kick a leg kick. "I got the rhythm in me tonight."
It really is that easy. Tables are pretty straightforward once you get the hang of them.
Wrapping It Up
Once each thread is a table, see if any tables should be combined. That's easy enough to accomplish; remove the tag from the former and the tag from the latter, and delete the return spaces.
After that, add in an LJ-cut around the table(s) - possibly a few, one for each plot point - and put an OOC note at the bottom. For example, for our piequest, I would close with:
(OOC: preplayed with socksofcool, psychic_wonder, and sixstandingby. NFI, but OOC is love!)
For reference, the coded and completed pie post is here.
Final Notes
Important things to keep in mind:
My sincere thanks to the muns who helped with this. ♥
Questions? Comments? Suggestions? Tweaks? Cookies? Quiche?
PREPLAYING 101: SET-UP, TABLES, TIPS, AND TRICKS
(Warning: this is huge.)
Getting Started
Why Preplay?
People play scenes out ahead of time for a number of reasons. If you've got a few players with differing availabilities, it might be easiest to have a post open for a while, giving everyone a chance to chime in. Preplay is also handy for major plot developments, where something specific needs to happen before the post goes up.
How Do You Preplay?
The simplest way to preplay is to write text back and forth with the other person(s) involved. Sending e-mail can work, or collaborating on a shared Google document. Then one person takes all of the text and posts it to their journal. This method is especially good for times when one or both of you can't access LJ.
The more common method is to put up a locked/filtered post and have everyone comment using their journals as if the post is already appearing in the game. [Sometimes, the post in question is backdated; see this excellent post on backdating.] After the scene is completed, one person codes the icons and comments into a table and posts the results.
Setting Up Preplay
I set up a fake preplay post on my journal here. (Note: the fake scene is utter crack, but it's still helpful as a point of reference.)
The first thing to notice are the OCD threads. OCD threads aren't always necessary, but they're helpful for coordinating major scenes where several things need to happen. If it's just a scene of a few people talking, you can skip the OCD.
One of the advantages of OCD threads is that it allows events to be played out out-of-order. Seely might be pinging in to the thread about running from the blueberry monster before Gavin and Sam light the blueberry sigil's candle; since his reactions there don't depend on what they do, there's no worry about events contradicting themselves. So long as a thread isn't dependent on the outcome of (or emotional responses contained in) an earlier thread, it's usually safe to play out, which helps when you have players with differing availabilities.
Once the post is set up, the poster should notify the other players (and provide a link, hopefully), so that everyone can ping in. For scenes requiring major coordination, it can help to get a group chat going on IM, to clarify any questions or concerns, or even just who has next ping.
(If this is part of a larger plot, it's also helpful to have e-mails or other locked/filtered posts where people can ask questions or get updates on what happens when and how everything goes down. In plotting, OOC communication is totally essential; even if things seem obvious to you, they may not be to everyone else. It's better to say something twice than to forget to say it at all.)
Again, once you've got the post finished, someone codes it and posts it. So how do you code an LJ post?
Tables, Part 1: The Basics
Since we want to include icons with the comments, we're going to need a table. A simple one, with two columns, the left of which will always contain a 100x100 icon and the right of which will always contain text.
Simple enough to start, right?
TEXT
The entry text itself is going outside of the table, as a preface to the LJ-cut, so let's skip down to the first thread and start there.
The first comment (that isn't OCD set-up) is Seely's, here. Let's code that and see what happens.
Right-click on Seely's (very nice shirt-removing) icon. If you're using Firefox or one of its clones, you should see an option called "Copy Image Location." [If you're not, don't worry, read on.]
Select that, and then go to the table. Remove "ICON" and hit Control-V for paste. This gives you:
TEXT
If you're in Internet Explorer, then you have my sympathy. I mean, what you want to do is right-click on the icon and select "Properties."
The Properties window will pop up. The line marked "Address (URL)" is the icon location.
Select it with a Control-C to copy, and then use Control-V to paste it into place as indicated above.
Similarly, let's highlight Seely's text:
and paste that over where it says "TEXT."
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
So, how's it look?
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Okay! We've got the basics down. We just add a new row for each comment, and start a new table for each thread. Smaller threads can be lumped into tables together, if it looks better. Put it all behind an lj-cut to save everyone's Friends page.
We could leave it there, but there are all kinds of interesting tips and tricks to make your table look better and load faster, so read on.
Once we've got the settings the way we want them, we can set up a template for easy copy-pasting. Sound good?
Tables, Part 2: Clean-Up
The first thing we want to do is add a width and height tag to the icons. This lets your browser build the table before it has all of the pictures loaded, which means it loads faster and jumps less while you're trying to read. So:
should become
While we're at it, let's add a border to the image tag. Just makes it look prettier.
Let's also center that image tag; it looks better than the default left-align.
Last thing: let's set the first td's width to 110 pixels. Gives a nice cushion of space.
We added a border to the image tag a moment ago; let's throw one on the whole table. It'll look cleaner this way.
should become
Tables also look neater when they don't stretch the whole way across the page - and full-width tables can do weird LJ-breaking things if you have comment pages in your own journal's style. So let's set the width to 80% as well.
And cellspacing and cellpadding give everything a little breathing room. So.
Going back to our original table, which if you'll recall look like this:
TEXT
we now have:
TEXT
In the case of Seely's shirt-stripping, we've gone from
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
to
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
or, if you'd like a visual reference:
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Neat! This is a nice, clean table layout. For additional comments, you would simply add that many s in. For a thread with three comments, the blank template would look like:
TEXT
TEXT
TEXT
and so on. The first three comments of this thread, plugged into that:
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Sam had already taken his shirt off in preparation for the ritual. Blueberries left stains, after all. "Oh yeah? What's that?"
What's a guy to do but join in? Off came the shirt.
"Do a little dance? Make a little love? Get down tonight?"
which looks like:
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Sam had already taken his shirt off in preparation for the ritual. Blueberries left stains, after all. "Oh yeah? What's that?"
What's a guy to do but join in? Off came the shirt.
"Do a little dance? Make a little love? Get down tonight?"
We're not out of the woods yet for possible problems in coding tables, so we're going to code out a full thread down in Part 4. Part 3 deals with some extras you can add to your tables to make them look fancier or make it clearer who's speaking; if you like this style as it is, feel free to skip down to Part 4.
Tables, Part 3: Getting Fancy With It
Option One: Adding Names
This goes in the left column, with the icons. So we start with:
Then we change the width, just to make sure none of this is going to bleed over too badly. 125 is usually good.
Next we're going to add a break tag (
) after the image. This will make the text we add afterwards go onto the next line down.
Lastly, we add the name, with bold tags around it so it stands out. We'll keep this inside the image's tag.
NAME
When you add the name, you can either type out the character's name:
Seely
Seely
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
or use their LiveJournal username:
socksofcool
socksofcool
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
or if you really want to, both:
Seely (socksofcool)
Seely (socksofcool)
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Although "both" usually looks better if you add in another break tag first.
Seely
(socksofcool)
Seely
(socksofcool)
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Option Two: Colors
There are two things to discuss with background colors: how to add them, and how to pick them. We'll deal with the tagging first and then get into the pretty bits. Cool?
Color tagging goes on the tag, as a "bgcolor=" attribute. BG, in this case, means background. The quote mark is followed by a pound sign and then the hexadecimal code for a specific color.
Going back to Seely's comment:
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
I'm not going to bother with a visual; this isn't going to look any different yet. #FFFFFF is the hexadecimal code for white.
Going back to the three-comment table from earlier, let's try adding a color for each of them. Just for simplicity's sake, we'll use #FF0000 (bright red) for Seely, #00FF00 (neon green) for Sam, and #0000FF (bright blue) for Gavin.
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Sam had already taken his shirt off in preparation for the ritual. Blueberries left stains, after all. "Oh yeah? What's that?"
What's a guy to do but join in? Off came the shirt.
"Do a little dance? Make a little love? Get down tonight?"
Let's get a visual.
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Sam had already taken his shirt off in preparation for the ritual. Blueberries left stains, after all. "Oh yeah? What's that?"
What's a guy to do but join in? Off came the shirt.
"Do a little dance? Make a little love? Get down tonight?"
Wow, that's seriously ugly. Okay. That leads into the second point: choose your colors wisely.
The first thing to remember is that your text is going to be black, so you want colors that are pale enough that it isn't hard to read black text on them. In the examples above, the blue's almost too dark to read properly, and the green is blinding.
How do you find colors? One option is to go to the Hex Hub, which lists thousands of color swatches and the hexadecimal values for each. Or check out the Color Scheme Generator, which lets you click around different shades on the color wheel and supplies complementary and contrasting shades from there.
You can also tie the colors in to your characters. I usually code Rikku in a pale orangey-peach shade (#FFD8B5). And when we get to the Blueberry Monster in the sample table, I'm sure you can guess what color it's going to be.
Note: you'll probably have to do some previewing to make sure your colors go together without clashing or two of them looking too similar. You can always copy and paste what you have into LJ's Post an Entry screen, hit "Preview", and see how the table looks there.
The Hues Hub gave me a nice teal for Seely (#D4EDF7), a buttery yellow for Sam (#FFF599), and a mint green for Gavin (#CCEBAD).
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Sam had already taken his shirt off in preparation for the ritual. Blueberries left stains, after all. "Oh yeah? What's that?"
What's a guy to do but join in? Off came the shirt.
"Do a little dance? Make a little love? Get down tonight?"
Here's the visual:
Seely started tugging off his shirt. "Before we risk death, I really feel there's something we should do."
Sam had already taken his shirt off in preparation for the ritual. Blueberries left stains, after all. "Oh yeah? What's that?"
What's a guy to do but join in? Off came the shirt.
"Do a little dance? Make a little love? Get down tonight?"
Hey, now we're getting somewhere. Let's make a note of these colors and use them again in our sample table.
But first, we do Version 1, the way we set it up in Part 2. Shall we?
Tables, Part 4: Sample Tables
Version 1: Everything Goes to Hell
Don't mind the disastrous name; that's just what the thread is called.
There are seven comments at that link, but the top one is just the OCD set-up, so we'll need a table with six comment placeholders, like so.
TEXT
TEXT
TEXT
TEXT
TEXT
TEXT
Or you can open the table, add s as they occur, and close it at the end. Either way works fine. Other than the above template, I'm going to be doing the latter, so that there aren't blank rows making this even longer.
The first thing we want to do is code in Rikku's comment here. Note: bold, italics, strikethrough, and other such tags do not get picked up when you copy and paste the text, so you will have to add those back in manually.
Blank template:
TEXT
Add the icon:
TEXT
Add the text:
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
(The fact that "This was bad" is all the way over to the left is totally fine and not something you should worry about.)
Format for the text, if necessary:
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
which means our table starts like this:
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
We do the same for Gavin's comment:
"Did you rip reality again?" Gavin asked, backing away slowly.
before running into our first difficulty: Seely and the NPC Villain pinged in at the exact same time.
Simultaneous pings happen a lot in-game, and usually one person deletes their comment and reposts. It's not really necessary in preplay, because you can always fix it in the tagging. In this case, we're going to change the order to NPC, then Seely, because it seems like that lets Sam's comment flow a little better.
This means we have (remembering the italics for "hungry"):
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
"Guys, I think running might be a good idea."
Here's an interesting point. The NPC villain is being played by Rikku's journal, and is taking up one of her icon slots. If we upload that icon somewhere else, we can then set the
tag to point there instead of LJ. That means I can delete the icon from Rikku's LJ without losing the image for that plot.
(Only for preplay, obviously. If the villain had stomped around town with his evil blueberry minions, then deleting the icon would make those comments revert to Rikku's default, and that's a personal call on whether you keep the icon in play for that or not.)
I uploaded the pie icon to Photobucket:
Photobucket includes tagging for HTML, but their tags have all kinds of added bits that I don't like, such as an tag that links you back to Photobucket, and an tag plugging them, so we're not going to use that. We're going to select the middle line, the one marked "URL Link."
The nice thing is that Photobucket will copy the link to your clipboard if you just click anywhere in that field.
[Randomly? It feels very meta to upload screenshots of Photobucket to Photobucket.]
This means we change:
to
We code the last two comments to finish things off:
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
Which makes the whole table:
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
"Did you rip reality again?" Gavin asked, backing away slowly.
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
"Guys, I think running might be a good idea."
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
How does it look?
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
"Did you rip reality again?" Gavin asked, backing away slowly.
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
"Guys, I think running might be a good idea."
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
Not bad! Time for Version #2!
Version 2: Everything Goes to Hell (Again)
We're going to work backwards with this one; I'm going to assume that you read Version 1, and modify it accordingly, and then show you the templates you'd need to create it. Okay?
The first thing we want to do is add in everybody's name. So we're going to change all of those widths from 110px to 125px, and add "
NAME" between the image tag and .
NAME
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
NAME
"Did you rip reality again?" Gavin asked, backing away slowly.
NAME
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
NAME
"Guys, I think running might be a good idea."
NAME
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
NAME
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
Now we fill in those names. In this case, it's better to use the character's name rather than LJ usernames, because we've got an NPC in there.
Rikku
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
Gavin
"Did you rip reality again?" Gavin asked, backing away slowly.
Blueberry Monster
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
Seely
"Guys, I think running might be a good idea."
Sam
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
Gavin
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
Let's peek at it:
Rikku
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
Gavin
"Did you rip reality again?" Gavin asked, backing away slowly.
Blueberry Monster
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
Seely
"Guys, I think running might be a good idea."
Sam
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
Gavin
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
Nice! Now. We already have colors for Seely, Gavin and Sam. I use #FFD8B5 for Rikku, and let's use #E7DEED, a nice blue, for ze monsta.
So we go in and add these tags to the s.
Rikku
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
Gavin
"Did you rip reality again?" Gavin asked, backing away slowly.
Blueberry Monster
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
Seely
"Guys, I think running might be a good idea."
Sam
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
Gavin
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
So, how did that turn out?
Rikku
Rikku stared. "Oh. That ... that doesn't look like pie."
This was bad.
Gavin
"Did you rip reality again?" Gavin asked, backing away slowly.
Blueberry Monster
There was a terrible sound, and an evil, demon-faced monster from Hell emerged from the portal.
Then six more came after him.
And they were all hungry.
Seely
"Guys, I think running might be a good idea."
Sam
"Uh, running? Yes, running would be a very good idea right now," Sam said, doing just that.
Gavin
"I'm down with running," Gavin said but couldn't help stare at Sam's backside as he ran. Pretty.
Congratulations, that is one sweet looking table. Okay, it's kinda colorful, but you're usually not going to have five people all going in order like that. And it's nice and distinctive, at least.
So let's see what we'd use as templates for each of these. If you remember, our blank for Version 1 was:
TEXT
Seely first! We add his color onto the and change the td width to 125. Then we add in his name after the image.
Seely
TEXT
Similarly, Sam's would be:
Sam
TEXT
Gavin:
Gavin
TEXT
Rikku:
Rikku
TEXT
The Blueberry Monster is slightly different. Since it's an NPC with only one icon, we can just put that icon right into the template and not worry about it again.
Blueberry Monster
TEXT
How do the templates help us? Well. Let's see what would happen if we'd want to code another thread, like The Blueberry Sigil.
We'd start with the table tag:
and from there, the thread alternates between Gavin and Sam for seven comments.
Gavin
TEXT
Sam
TEXT
Gavin
TEXT
Sam
TEXT
Gavin
TEXT
Sam
TEXT
Gavin
TEXT
We add in the icons, the text, and close the table with a tag to give us:
Gavin
Gavin, holding the Blueberry candle like it was the most precious gold in the land, carefully lit it with the magic he had in his fingers.
Magic fingers. Teehee.
Sam
Sam carefully held the sigil over the candle, not burning himself because he was just that awesome at this sort of thing.
Gavin
The candle burned a bright, bright blue and illuminated both Sam mwahahah modding the light and Gavin's faces. "We look pretty damn cool."
Sam
"We totally look cool," Sam agreed as the light flared haha, I can mod too!. "This is why we get all the girls."
Gavin
"That Zoe chick is hot," Gavin said modding Zoe's hotness!. "Think we could get her?"
Sam
"Ooh, we'd get a hot older woman and piss off my dad. I say we go for it," Sam said as the sigil flared. "You know, if we live that long."
Gavin
"We're gonna live forever," Gavin said and kick a leg kick. "I got the rhythm in me tonight."
Which, then, looks like this:
Gavin
Gavin, holding the Blueberry candle like it was the most precious gold in the land, carefully lit it with the magic he had in his fingers.
Magic fingers. Teehee.
Sam
Sam carefully held the sigil over the candle, not burning himself because he was just that awesome at this sort of thing.
Gavin
The candle burned a bright, bright blue and illuminated both Sam mwahahah modding the light and Gavin's faces. "We look pretty damn cool."
Sam
"We totally look cool," Sam agreed as the light flared haha, I can mod too!. "This is why we get all the girls."
Gavin
"That Zoe chick is hot," Gavin said modding Zoe's hotness!. "Think we could get her?"
Sam
"Ooh, we'd get a hot older woman and piss off my dad. I say we go for it," Sam said as the sigil flared. "You know, if we live that long."
Gavin
"We're gonna live forever," Gavin said and kick a leg kick. "I got the rhythm in me tonight."
It really is that easy. Tables are pretty straightforward once you get the hang of them.
Wrapping It Up
Once each thread is a table, see if any tables should be combined. That's easy enough to accomplish; remove the tag from the former and the tag from the latter, and delete the return spaces.
After that, add in an LJ-cut around the table(s) - possibly a few, one for each plot point - and put an OOC note at the bottom. For example, for our piequest, I would close with:
(OOC: preplayed with socksofcool, psychic_wonder, and sixstandingby. NFI, but OOC is love!)
For reference, the coded and completed pie post is here.
Final Notes
Important things to keep in mind:
- How I do tables is not necessarily the RIGHT way to do tables; this is just how I know to do them.
- How I do tables is not necessarily how YOU should do tables; find a format that looks good to you and is easy to work with and go from there.
- What matters the most isn't how pretty the table is; it's how clearly the table conveys the information contained inside to readers.
- When in doubt, have Animal come in and eat your NPC monsters and dead bodies.
- Coding preplay is nothing to be afraid of. Promise.
My sincere thanks to the muns who helped with this. ♥
Questions? Comments? Suggestions? Tweaks? Cookies? Quiche?