Внешний вид "колонки подкатегорий" - своими руками - ZOO 2.х

<?php if ($this->params->get('template.show_sub_categories') && $category->getChildren()): ?>
		<p class="sub-categories">
			<?php
			
				$children = array();
				foreach ($category->getChildren() as $child) {
					if (!$child->totalItemCount()) continue;
					$link = $this->app->route->category($child);
					$item_count = ($this->params->get('template.show_sub_categories_item_count'))? ' <span>('.$child->totalItemCount().')</span>' : '';
					$children[] = '<a href="'.$link.'" title="'.$child->name.'">'.$child->name.'</a>'.$item_count;
				}
				echo implode(', ', $children);
				
			?>
		</p>
		<?php endif; ?>

<?php if ($this->params->get('template.show_sub_categories') && $category->getChildren()): ?>
	<ul class="col">

		<?php
		
			$children = array();
			foreach ($category->getChildren() as $child) {
				if (!$child->totalItemCount()) continue;
				$link = $this->app->route->category($child);
				$item_count = ($this->params->get('template.show_sub_categories_item_count'))? ' <span>('.$child->totalItemCount().')</span>' : '';
				$children[] = '<li class="double"><a href="'.$link.'" title="'.$child->name.'">'.$child->name.'</a>'.$item_count;
			}
			echo implode('</li>', $children);
			
		?>

	</li></ul>
	<?php endif; ?>

<li class="double">

ul.col{
  width:550px;                  /* ширина области для колонок -подбирайте для своего шаблона сами */
  margin-bottom:20px;
  overflow:hidden;                           
  border-top:1px solid #ccc;              

}
li.double{
  white-space: nowrap;                                     /* Запрещаем перенос строк */
  overflow: hidden;                                          /* Обрезаем все, что не помещается в область */
  text-overflow: ellipsis;                                  /* Добавляем многоточие */
  line-height:auto;                                        /* авто высота строк*/
  border-bottom:1px dotted #ccc;                 /* точечное подчеркивание пункта серого цвета */
  float:left;                                              /* Выравниваем элемент по левому краю */
  padding-left:5px;                                   /* Устанавливаем отступ слева от колонки */
  display:inline;                                       /* Устанавливаем как встроенный элемент */
  width:49%;                                        /* ширина одной колонки */
}
li.triple{
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  line-height:auto; 
  border-bottom:1px dotted #ccc;
  float:left;  
  padding-left:5px;  
  display:inline;
  width:32.222%; 
}
li.quad{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /
  line-height:auto;
  border-bottom:1px dotted #ccc;
  float:left;
  padding-left:5px;  
  display:inline;
  width:24%;
}
li.six{
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  line-height:auto;
  border-bottom:1px dotted #ccc;
  float:left; 
  padding-left:5px;  
  display:inline;
  width:15.555%; 
}