Latest Register Log In

+ Advanced Search

Vertical Ordering

Vertical Ordering
By
02/15/07 (Edited 03/10/14)

Some people want to order their listings vertically instead of horizontally. If you do it in one column it's easy of course, but multiple vertical column ordering gets a bit complex:

1) At Admin -> Settings -> General use 0 listings per row.
2) Remove the table html from around the listings in the "show listings in category" and "listing bit" templates, including the <td> and </td> inside the listing bit. You may or may not wish to alter the "search listings" and "search all" templates as well.
3) In "show listings in category", surround the listing list with a 50% width div float, such as <div style="width: 50%; float: left;"> ... </div>.
4) In order to detect at which listing the second column should begin, put this in the template:
<?php if ({LINKNUMBER} == (int)({CATLINKSHERE} / 2) { ?> </div><div style="width: 50%; float: left;"> <?php } ?>

That will switch columns at the halfway mark. Example for the "show listings in category" template:
<div style="float: left; width: 50%;">
<!-- BEGIN REGULAR LINKS -->
[INSERTFILE=linkbit]
<?php if ({LINKNUMBER} == (int)({CATLINKSHERE} / 2) { ?> </div><div style="width: 50%; float: left;"> <?php } ?>
<!-- END REGULAR LINKS -->
</div>


The same idea can be modified for categories:
1) At Admin -> Settings -> General use 0 categories per row.
2) Remove the table html around categories from the main index and show listings in category templates, including the <td> and </td> inside the each-category area. You may wish to alter the search categories and search all templates as well.
3) Place the category list in a 50% width div float, <div style="width: 50%; float: left;"> ... </div>.
4) In order to detect at which category the second column should begin, put this in the template (within the <!-- BEGIN REGULAR --> area) for the main index template and the show listings in category template:
<?php if ({CATNUMBER} == (int)({CATNUMSIBLINGS} / 2)) { ?> </div><div style="width: 50%; float: left;"> <?php } ?>


That will switch columns at the halfway mark. Complete example for "show listings in category":
<div style="width: 50%; float: left;">
<!-- BEGIN SUBCATEGORIES -->
<!-- BEGIN REGULAR -->
<p>
<img src="{IMAGESURL}/folder.gif" > <a href="{CATURL}" class="categoryname">{CATNAME}</a> ({CATNUMLINKS}) {CATHASNEW} {CATADMIN}<br >
<!-- BEGIN SUBSUB -->
<a href="{CATURL}">{CATNAME}</a>,
<!-- END SUBSUB -->
<IF {CATDESCRIPTIONBOOL}><br >{CATDESCRIPTION}</IF>
<IF {SWITCH_FORUMVIEWS} or {SWITCH_ONLINEFORUM}><br ></IF>
<IF {SWITCH_FORUMVIEWS}>{CATVIEWS} {LANG_GENERAL_VIEWS}</IF><IF {SWITCH_FORUMVIEWS} and {SWITCH_ONLINEFORUM}>, </IF>
<IF {SWITCH_ONLINEFORUM}>{CATNUMONLINE} {LANG_GENERAL_VIEWING}</IF>
</p>
<?php if ({CATNUMBER} == (int)({CATNUMSIBLINGS} / 2)) { ?> </div><div style="width: 50%; float: left;"> <?php } ?>
<!-- END REGULAR -->
<!-- END SUBCATEGORIES -->
</div>


Instead of using div floats, you can also use a table with one row. Just change the halfway insertion HTML to </td><td> for that to trigger the new column.




Description Showing items in multiple vertical columns instead of horizonal.
Rating
Views 1049 views. Averaging 0 views per day.