I’m using the latest 4.1.2 version and when I click on a main category, the subcategories display in as horizontal text links. How can i fix this to display in vertical in two columns?
Here’s a link to the 4.x demo that shows subcategories arranged horizontally:
Use on-site template editing to find the templates that are used for that section and then you'll know what CSS and/or template code needs to be modified.
To do that, you can change design/themes/your-theme/templates/categories/view.tpl
Change:
```php
{if $subcategories}
$category.category_id”|fn_url}”>
{if $category.main_pair}
{include file=“common/image.tpl”
show_detailed_link=false
images=$category.main_pair
no_ids=true
image_id=“category_image”
image_width=$settings.Thumbnails.category_lists_thumbnail_width
image_height=$settings.Thumbnails.category_lists_thumbnail_height
}
{/if}
{$category.category}
{/if}
{/foreach}
{/foreach}
{foreach from=$splitted_subcategories item=“ssubcateg”}
{foreach from=$ssubcateg item=category name=“ssubcateg”}
{if $category}
{/if}
To:
```php
{if $subcategories}
{foreach from=$splitted_subcategories item="ssubcateg"}
-
{if $category.main_pair}
{include file="common/image.tpl"
show_detailed_link=false
images=$category.main_pair
no_ids=true
image_id="category_image"
image_width=$settings.Thumbnails.category_lists_thumbnail_width
image_height=$settings.Thumbnails.category_lists_thumbnail_height
}
{/if}
{$category.category}
{foreach from=$ssubcateg item=category name="ssubcateg"}
{if $category}
{/if}
{/foreach}
{/foreach}
{/if}
You can change other things around as well. I don't want the subcategory images for this site, but I do want the category image displayed. So I created a hook called design/themes/my-theme/templates/addons/my_changes/hooks/categories/view.override.tpl and put in:
```php
{if $subcategories or $category_data.description || $category_data.main_pair}
{math equation="ceil(n/c)" assign="rows" n=$subcategories|count c=$columns|default:"2"}
{split data=$subcategories size=$rows assign="splitted_subcategories"}
{include file="common/image.tpl" show_detailed_link=false images=$category_data.main_pair no_ids=true image_width=$settings.Thumbnails.category_lists_thumbnail_width image_height=$settings.Thumbnails.category_lists_thumbnail_height hide_if_no_image=false}
{if $category_data.description && $category_data.description != ""}
{$category_data.description nofilter}
{/if}
{if $subcategories}
{foreach from=$splitted_subcategories item="ssubcateg"}
-
{$category.category}
{foreach from=$ssubcateg item=category name="ssubcateg"}
{if $category}
{/if}
{/foreach}
{/foreach}
{/if}
{/if}
{if $smarty.request.advanced_filter}
{include file="views/products/components/product_filters_advanced_form.tpl" separate_form=true}
{/if}
{if $products}
{assign var="layouts" value=""|fn_get_products_views:false:0}
{if $category_data.product_columns}
{assign var="product_columns" value=$category_data.product_columns}
{else}
{assign var="product_columns" value=$settings.Appearance.columns_in_products_list}
{/if}
{if $layouts.$selected_layout.template}
{include file="`$layouts.$selected_layout.template`" columns=$product_columns}
{/if}
{elseif !$subcategories || $show_no_products_block}
{__("text_no_products")}
{else}
{/if}
{capture name="mainbox_title"}{$category_data.category}{/capture} ```
I hope that helps.
Thanks,
Brandon
Thank you very much for your help brandonvd! The first part of your answer really helped me to find the solution to my problem.
Also i had to change the style.css like this (changes are in bold):
.subcategories {
float: left;
line-height: 17px;
padding: 1px 25px 0 15px;
margin: 0 0 15px;
}
.subcategories ul {
line-height: 16px;
}
.subcategories li {
width: 280px;
}
.subcategories ul li {
display: block;
border-bottom: 5px solid #D2E4EC;
padding: 5px 1px;
margin: 1px 0px;
}
.subcategories ul li a {
display: block;
padding: 3px 6px;
}
.subcategories ul li:hover {
border-bottom-color: #56A3DD !important;
}
.subcategories ul li a:hover {
text-decoration: none;
}
.subcategories ul li.with-image {
text-align: center;
}
.subcategories ul li.with-image img {
display: block;
margin:auto;
padding-bottom: 10px;
}
.table-width.subcategories td {
vertical-align: bottom;
padding: 13px;
}
.table-width.subcategories .with-image a strong {
display: block;
padding-top: 10px;
As for the second part of your answer i will give it a try!