
Hello, today i want to show you how easily you can highlight selected category in default prestashop module: block categories. This module displays all available categories in your store. By default it is located in left hand side column. Selected category <li> element has got class="selected", take a look on module template file:
<li {if isset($last) && $last == 'true'}class="last"{/if}>
<a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if}
title="{$node.desc|strip_tags|trim|escape:'htmlall':'UTF-8'}">{$node.name|escape:'htmlall':'UTF-8'}</a>
{if $node.children|@count > 0}
<ul>
{foreach from=$node.children item=child name=categoryTreeBranch}
{if $smarty.foreach.categoryTreeBranch.last}
{include file="$branche_tpl_path" node=$child last='true'}
{else}
{include file="$branche_tpl_path" node=$child last='false'}
{/if}
{/foreach}
</ul>
{/if}
</li>
What does it mean? It mean that you can add simple css definition into your global.css file. So, please open yout theme directory (/themes/YOUR_THEME/) and then open global.css file. Add somewhere (no matter where) this code:
#categories_block_left li a.selected {
background: orange;
}
Ofcourse instead background:orange; you can use other color or url to image like:
#categories_block_left li a.selected {
background: url('http://url.to.your.image.dot.com/image.jpg');
}
effect:

Article written byMilosz Myszczuk, PrestaShop expert. CEO and founder of the VEKIA interactive agency. Learn more.
If you like this article, support our work!

Conditional Order Validation lets you block or warn checkout when a cart breaks your rules. Set cond...
129.00 €

Sell optional checkout services your customers choose: gift wrapping, shipping insurance, express ha...
149.00 €

Charge handling, service or packaging fees only when your rules match. Conditional Order Fees adds a...
129.00 €

Apply conditional order discounts using native cart rules. Create BOGO deals, buy N get M free, spen...
149.00 €