Show categories ans sub-categories on the footer

[WebDevAE]

Hi,

 

I'm developping a shop, and I have a little problem : I'd like to show all categories ans sub-categories on the footer of my website.

Here is what I have : http://imgur.com/2Af9ba9

and here is what I'd like to have : http://imgur.com/mIiwqKN

 

So, I'd like to know if there is a free module, or which modifications I must do on the blockcategories_footer.tpl file: 

<div class="blockcategories_footer">
<!-- Block categories module -->
	<h4 class="title_block">{l s='Categories' mod='blockcategories'}</h4>
<div class="category_footer" style="float:left;clear:none;width:{$widthColumn}%">
	<div style="float:left" class="list">
		<ul class="tree {if $isDhtml}dhtml{/if}">
	
		{foreach from=$blockCategTree.children item=child name=blockCategTree}
			{if $smarty.foreach.blockCategTree.last}
				{include file="$branche_tpl_path" node=$child last='true'}
			{else}
				{include file="$branche_tpl_path" node=$child}
			{/if}
		
			{if ($smarty.foreach.blockCategTree.iteration mod $numberColumn) == 0 AND !$smarty.foreach.blockCategTree.last}
		</ul>
	</div>
</div>

<div class="category_footer" style="float:left;clear:none;width:{$widthColumn}%">
		<div style="float:left" class="list">
		<ul class="tree {if $isDhtml}dhtml{/if}">
			{/if}
			{/foreach}
		</ul>
	</div>
</div>
<br class="clear"/>
<!-- /Block categories module -->
</div>

Thanks in advance for your help !

[WebDevAE]

Nobody ?

Edited January 28, 2015 by Webmasterdom (see edit history)

[patelakash317]

Have you got the solution??

Simply replace existing blockcategories_footer.tpl file with:

 

{if $blockCategTree && $blockCategTree.children|@count}
<!-- Block categories module -->

    <div class="topwidth">
        <div id="categories_block_left" class="block">
            <div class="block_content col-md-12">
                <div class=" {if $isDhtml}dhtml{/if} list-group">
                 <!--<ul> tree -->
                    {foreach from=$blockCategTree.children item=child name=blockCategTree}
                        {if $smarty.foreach.blockCategTree.last}
                           
                                <div class="footcat">
                                    {include file="$branche_tpl_path" node=$child last='true'}
                                </div>
                           
                        {else}
                        {*$child.name*}
                          
                                <div class="footcat">
                                <!-- Personalisation -->
                                    {include file="$branche_tpl_path" node=$child}
                                </div>
                            
                        {/if}
                    {/foreach}
                </div>
            </div>
        </div>
    </div>

<!-- /Block categories module -->
{/if}

 

And Add this CSS

 

.footcat{
    width: 11%;
    float: left;
}

.footcat li{
    list-style: none;
    text-transform: uppercase;
    color: #1D1060;
}

.footcat li a{
    padding: 0 !important;
}

.footer-container #footer .footcat li a{
    color: #1D1060;
    border:none;
}

.footer-container #footer .footcat li a:hover{
    background-color: #c9c7dd;
    opacity: 0.5 ;
    color: #1D1060 ;
}


/*subcategory css*/
.footer-container #footer .footcat li ul li a{
    color: #ffffff;
    border:none;
}

.footer-container #footer .footcat li ul li{
    padding: 0;
}

.footer-container #footer .footcat li ul li a:hover{
    background-color: #C9C7DD ;
    opacity: 0.5 ;
    color: #1D1060 ;
}

#categories_block_left li li a:before{
    content: none;
}

Edited September 5, 2015 by patelakash317 (see edit history)

[JohnROX]

Add the CSS where?