sub categories image/text display help

[dolly123]

Dear members,

 

This will be my first post looking for help. I've been searching online and on this forum all over but can't seem to find a solution to my problem. I hope someone here can help me.

 

I am running PS 1.5.x, and would like to know how to re-align the sub categories images along with text in a grid format or center rather than the default list style. Attached picture is the default view of subcategories, which is the default list format.

 

original layout

 

Trying to Achieve this layout - possibly align title and description under images

 

Could someone kindly guide me to right thread although i've searched and found nothing that could help me. Thanks a bunch!!

 

warm regards

Dolly

[vekia]

in this case you have to edit the css styles for .tpl file elements: category.tpl located in your theme directory.

you've got there {foreach} loop:

 

{foreach from=$subcategories item=subcategory}
   <li class="clearfix">
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
  {if $subcategory.id_image}
   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {else}
   <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {/if}
 </a>
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
 {if $subcategory.description}
  <p class="cat_desc">{$subcategory.description}</p>
 {/if}
   </li>
  {/foreach}

 

this is the code for the subcategories. YOu have to edit <li> element css styles.

Styles for this element are here: /themes/default/css/category.css near the line: 50

.inline_list li {
padding: 10px 0;
border-bottom: 1px dotted #ccc;
}

 

add there:

width: 100px;
height: 100px;
display:inline-block;

 

of course you can modifye the width & height values - everything depends on your needs