Developer 27.10.2013 category, developer, highlight, quick tip, tpl, tutorial

Highlight selected category in block categories module

It's time to start quick tip series! Read how to highligh selected category in block categories module, simple modification and simple css styles. enjoy!

 

highlight selected category prestashop

 

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:

categories block prestashop selected li element

 

 

 

Zdjęcie autora: Milosz Myszczuk

Artykuł napisany przez Milosza Myszczuka, eksperta PrestaShop i oficjalnego moderatora społeczności PrestaShop. CEO i założyciel agencji interaktywnej VEKIA. Dowiedz się więcej.

If you like this article, support our work!

Comments