1. What is Col?
Col is a multicolumn CSS-based design plugin for IncPlugins.
2. Col installation
Download the latest Col release. It comes with IncPlugins Pro. Unzip it to any temporary directory. Copy col.php to your IncPlugins directory. Add the plugin include line to the IncPlugins settings file settings.php.
3. Using Col
Define Column and Margin Sizes
Col allows you to use 3- or 4-column design. You must define two Col parameters:
- Base column width
- Space between columns
Use these variables: $col_width and $col_space. It will automatically calculate another sizes. If $col_width is odd, all the generated culumn sizes will be odd. If it is even, all other sizes will be even. It is very useful for dotted borders, because they must be odd for good look.
Columns
You can use two functions:
- function col($num, $of)
- function col_end()
Here are:
- $num — Column number code (1, 2, 3, 4, 12, 23, 34, 123, 234, 15, 25)
- $of — Maximal column number (2, 3, 4)
Example of two column design:
<?col(12,4)?> Left column content <?col(34,4)?> Right column content <?=col_end()?>
You can insert another two columns into the right column:
<?col(12,4)?> Left column content <?col(34,4)?> <?col(1,2)?> Left subcolumn <?col(2,2)?> Right subcolumn <?=col_end()?> <?=col_end()?>
If your column is three-column based, you can also insert two columns. They have special codes: 15 for the left column and 25 for the right one. Example:
<?col(1,4)?> Left column content <?col(234,4)?> Right column content <?col(15,3)?> Left <?col(25,3)?> Right <?=col_end()?> <?=col_end()?>
Floating Columns
To insert floating columns use these two functions:
- function col_right($num = 1)
- function col_left($num = 1)
Here is:
- $num — Column count code (1, 2, 15)
Example:
... <?col_right()?> Floating column content <?=col_end()?> ...
How to Close Column with Disabled CSS Floating
Set boolean variable $col_clear to true before call col_end().
The plugin will insert empty <div> with CSS style
clear: both;.
User Defined Columns
You can extend Col columns by another codes. Create your CSS styles for all your custom columns with a name like: col99of100.
To insert this column you can use code:
... <?col(99,100)?> ...
See the Col source for details.