That annoyed me, so I made a small class that you can add to your journal style to shortcut that (and probably would make the tutorials alot easier to read if anyone wants to update those).
Just cut and paste this into your journal style (not inside of another function!):
###########################################
# Shortcut the FlatBox #
###########################################
class flatbox {
function flatbox_header();
function flatbox_footer();
function flatbox_bubble(); #a flatbox containing simply a non-breaking space- a one line spacer.
}
function flatbox::flatbox_bubble() {
var Color header = $*header_bgcolor;
var Color headerMinus5 = $header->darker(50);
var Color headerPlus3 = $header->lighter(30);
var string corner_color = "/p0"+$headerPlus3->substr(1,6)+"1"+$headerMinus5->substr(1,6)+"2"+$header->substr(1,6);
"""<tr><td colspan=7>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-left.gif/$corner_color" width="5" height="5" alt="" border="0" /></td>
<td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
<td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-right.gif/$corner_color" width="5" height="5" alt="" border="0" /></td>
</tr><tr>
<td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
</tr><tr>
<td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
</tr><tr>
<td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
<td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
<td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
<td class="tabBg" width="100%">
<div align="center"> </div>
<td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
<td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
<td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
</tr><tr>
<td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-left.gif/$corner_color" width="5" height="5" alt="" border="0" /></td>
<td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
<td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-right.gif/$corner_color" width="5" height="5" alt="" border="0" /></td>
</tr><tr>
<td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
</tr><tr>
<td class="dkLine"> <img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
</tr>
</table></td></tr>
""";
}
function flatbox::flatbox_header() {
var Color header = $*header_bgcolor;
var Color headerMinus5 = $header->darker(50);
var Color headerPlus3 = $header->lighter(30);
var string corner_color = "/p0"+$headerPlus3->substr(1,6)+"1"+$headerMinus5->substr(1,6)+"2"+$header->substr(1,6);
"""
<tr><td colspan=7>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-left.gif/$corner_color" width="5" height="5" alt="" border="0" /></td>
<td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
<td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-right.gif/$corner_color" width="5" height="5" alt="" border="0" /></td>
</tr><tr>
<td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
</tr><tr>
<td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
</tr><tr>
<td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
<td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
<td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
<td class="tabBg" width="100%">
<div align="center">""";
}
function flatbox::flatbox_footer() {
var Color header = $*header_bgcolor;
var Color headerMinus5 = $header->darker(50);
var Color headerPlus3 = $header->lighter(30);
var string corner_color = "/p0"+$headerPlus3->substr(1,6)+"1"+$headerMinus5->substr(1,6)+"2"+$header->substr(1,6);
"""
</div>
<td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
<td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
<td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
</tr><tr>
<td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-left.gif/$corner_color" width="5" height="5" alt="" border="0" /></td>
<td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
<td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-right.gif/$corner_color" width="5" height="5" alt="" border="0" /></td>
</tr><tr>
<td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
</tr><tr>
<td class="dkLine"> <img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
</tr>
</table></td></tr>
""";
}
Once you've got that class in your style, you can use it like so:
At the top of whatever function, you add this line:
var flatbox f = new flatbox;
That has to be done once and only once in whatever function you want to use this in.
That done, all you have to do is replace all those table, tr, and td tags that were making the box with this:
$f->flatbox_header();
[whatever content you want in your component]
$f->flatbox_footer();
Also, in doing this, I learned that backing up your journal style is important... heh... almost had a big boo-boo.