1. What is Box?

Box is a service plugin for square blocks for IncPlugins.

2. Box installation

Download the latest Box release. It comes with IncPlugins Pro. Unzip it to any temporary directory. Copy box.php to your IncPlugins directory. Add the plugin include line to the IncPlugins settings file settings.php.

3. Using Box

3.1. Box Ideology

This plugin is a service plugin. It means that it cannot be used directly. It contains no CSS code to show different box styles. But you can create these styles manually or download additional style plugins.

Any box contain:

Some of them may not be available, so you can create complex or simple boxes both.

3.2. Insert Boxes

To insert new box, you can call these two functions:

Here are:

Example of a simple box:

<?=box('','box1')?>
Box content
<?=box_end()?>

This code will produce this HTML output:

<div class="box1">
Box content
</div>

You can use header and footers. Example:

<?=box('Header code','box1')?>
Box content
<?=box_end('Footer code')?>

This code will produce this HTML output:

<div class="box1">
<div class="box1_head">Header code</div>
Box content
<div class="box1_foot">Footer code</div>
</div>

3.3. Complex Boxes

Examples shows you simple boxes with one <div> for a frame and a header with footer. But you can create comples boxes.

Example:

<?=box('Header code','box1_3')?>
Box content
<?=box_end('Footer code')?>

<?=box('Header code','box1_2')?>
Box content
<?=box_end('Footer code')?>

<?=box('Header code','c1','c2','c3','c4')?>
Box content
<?=box_end('Footer code')?>

This code will produce this HTML output:

<div class="box1_3"><div class="box1_2"><div class="box1">
<div class="box1_3_he_3"><div class="box1_3_he_2"><div class="box1_3_he">Header code</div></div></div>
Box content
<div class="box1_3_fo_3"><div class="box1_3_fo_2"><div class="box1_3_fo">Footer code</div></div></div>
</div></div></div>

<div class="box1_2"><div class="box1">
<div class="box1_2_he_2"><div class="box1_2_he">Header code</div></div>
Box content
<div class="box1_2_fo_2"><div class="box1_2_fo">Footer code</div></div>
</div></div>

<div class="c1">
<div class="c2">Header code</div>
<div class="c4">
Box content
</div>
<div class="c3">Footer code</div>
</div>

The plugin uses CSS style name signatures to create right borders.

You can use these signatures for your boxes:

3.4. Create CSS Styles for your Box

The plugin generates special CSS style names: _head, _foot, _he_3, _he_2, _he, _fo_3, _fo_2, _fo, _3, _2.

Define these CSS classes for your custom designed box.

Example:

.box1 {
    border: solid #d0d0d0;
    border-width: 1px;
    padding: 6px;
    font-size: 11px;
    margin-bottom: 10px;
}

.box1_head {
    font-weight: bold;
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 4px;
}

.box1_foot {
    margin-top: 4px;
    font-weight: bold;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
}

3.5. Special Box Functions

Function function box_clear() inserts a special invisible box with a clear: both; CSS style.

Function
function more($link ,$title = '', $sep_l = '&raquo; ', $sep_r = '', $follow = true) inserst a link to any page. It is often used in web site portals.

Here are:

Functions
function box_table($class, $div_class = 'box_table_fix2')
and function box_table_end() are used to create tables.

Here box_table_fix2 is used to fix 100% width tables in IE6.