Need help with an issue.. I've run into an issue with the tables used to create the grids in this file includes/templates/custom_template/common/tpl_columnar_display.php
I need to convert the tables to a CSS grid. The tables are a bit of a bear to deal with in responsive templates..
I've made some progress, but I'm not quite there yet.. I have incorporated the Column Divider Pro module with SNAF, and the dividers are not behaving EXACTLY as they should with the CSS tables and I'm puzzled how to fix it.. The horizontal divider is repeated 4 times, and I cannot get the vertical dividers to work JUST in between the inner cells.. (I am aware that my current edit only displays them on the left -- I commented out the code which is supposed to display it between cells because it didn't work) You can see my progress here:
http://eitestsite(dot)eyeitalia(dot)com/shop/index.php?main_page=products_all
Could use a set of eyes to point out how to get this working correctly..
Here's my modified includes/templates/custom_template/common/tpl_columnar_display.php file and the CSS to support my changes:
Supporting CSS
.vDotLine
{
background-color: transparent;
background-image: url(../images/delim_v.gif);
background-repeat: repeat-y;
background-attachment: scroll;
width: 20px;
/*font-size: 1px;*/
}
.hDotLine
{
background-image: url(../images/delim_v.gif);
padding:1px 0;
}
.tabTable {display: table;padding-left: 20px;/*font-size: 8pt;*/}
.trRow {display: table-row;}
.tdContent {display: table-cell;padding: 5px 8px;}
tpl_columnar_display.php changes
<?php
/**
* Common Template - tpl_columnar_display.php
*
* This file is used for generating tabular output where needed, based on the supplied array of table-cell contents.
*
* @package templateSystem
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_columnar_display.php 3157 2006-03-10 23:24:22Z drbyte $
*/
?>
<?php
if ($title) {
?>
<?php echo $title; ?>
<?php
}
?>
<div class="centerBoxWrapperContents">
<div class="tabTable">
<?php
if (is_array($list_box_contents) > 0 ) {
$MaxCol=0;
for($row=0;$row<sizeof($list_box_contents);$row++) {
$params = "";
//if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];
?>
<div class="trRow">
<?php
for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
$r_params = "";
if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
$r_params = str_replace(" back", "", $r_params);
$r_params = str_replace("50", "100", $r_params);
$r_params = str_replace("33", "100", $r_params);
// bof: Replace all widths with 100% for Column Divider Pro
$startpos = strpos($r_params, "width:");
if ($startpos != false) {
$endpos = strpos($r_params, ";", $startpos);
$res = substr($r_params, $startpos, ($endpos - $startpos ));
$r_params = str_replace($res, "width:100%", $r_params);
}
// eof: Replace all widths with 100% for Column Divider Pro
if (isset($list_box_contents[$row][$col]['text'])) {
?>
<?php
echo '<div class="tdContent vDotLine" style="width:'. (intval($col_width) - 0.5) .'%">' . $list_box_contents[$row][$col]['text'] . '</div>' . "\n";
?>
<?php if ($row == 0 && $col < (sizeof($list_box_contents[$row]) - 1)) {
// echo '<div class="tdContent vDotLine"></div>' . "\n";
$MaxCol += 1;
}
}
}
?>
</div> <!--end trRow-->
<?php
if ($row < (sizeof($list_box_contents)-1)) {?>
<div class="trRow">
<?php for($col=0;$col<($MaxCol + 1);$col++) {
echo '<div class="tdContent hDotLine"></div>';
} ?>
</div> <!--end trRow-->
<?php }
?>
<?php
}
}
?>
</div> <!--end table-->
</div>
My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.
