How Random Babbling Becomes Corporate Policy (t3knomanser) wrote in component_help,
How Random Babbling Becomes Corporate Policy
t3knomanser
component_help
  • Music: Johnny Cash - Don't Take Your Guns To Town

FlatBox

Alot of you use the "flatbox" style for your component- you know the look, the rounded-box that holds the component. Today, I was touching up my journal style, using that look in other places, and I discovered that I was doing a hellalot of cutting and pasting, and having miles of code to do one thing.

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.
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Help
  • 33 comments