Jump to content

Recommended Posts

Hello,

 

I'm sharing with you very simple small tip how you can add to block_categories_menu default supperfish vertical menu from the block_top_menu. You learn a basic functionality and to fit it with your theme you might continue to work with your css files. The basic idea of this small tip is that you don't need to buy or upload any new files. We use the files that we already have in system. This works for new Prestashop 1.5.x.

 

/modules/blockcategories/category-tree-branch.tpl

 

@line 28

 

#1 tip: to disable or turn off onmouseover tooltip block categories <a> tag link remove this: title="{$node.desc|escape:'htmlall':'UTF-8'}"

 

<a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if}>{$node.name|escape:'htmlall':'UTF-8'}</a>

 

#2 tip: to show names of categories instead of description in onmouseover tooltips block categories <a> tag change to: title="{$node.name|escape:'htmlall':'UTF-8'}"

 

<a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if} title="{$node.name|escape:'htmlall':'UTF-8'}">{$node.name|escape:'htmlall':'UTF-8'}</a>

 

 

---

 

/modules/blockcategories/blockcategories.tpl

 

@line 31

 

add new class "sf-vertical" after "sf-menu":

 

<ul class="tree sf-menu sf-vertical clearfix sf-js-enabled sf-shadow">

 

---

 

/modules/blocktopmenu/css/superfish-modified.css

 

add these lines at the end of file:

 

/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/

.sf-vertical, .sf-vertical li {
width: 200px;
background: transparent url(../img/bg_blocktopmenu.png) repeat 0 0; /* change this if you want to play with background color */
/*background: #999;*/
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
left: 200px; /* match ul width */
top: 0;
}

/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/

/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** this will remove margin-left from global.css to display submenu ***/
#categories_block_left li ul {margin-left:0 !important;}

post-128839-0-62425800-1351339724_thumb.png

  • Like 4

Share this post


Link to post
Share on other sites

  • 1 month later...
  • 1 month later...
  • 3 weeks later...
  • 3 weeks later...
  • 3 months later...

Hello,

 

I'm having problems in editing the file

 

/modules/blockcategories/blockcategories.tpl

 

I cannot find in it the line <ul class="tree sf-menu sf-vertical clearfix sf-js-enabled sf-shadow"> but what I find is only

<ul class="tree {if $isDhtml}dhtml{/if}">

.

 

Is it because I'm using the last version of Prestashop 1.5.4.1? Can anyone help me?

 

Thank you

Share this post


Link to post
Share on other sites

  • 2 weeks later...
  • 2 weeks later...
  • 2 months later...
  • 2 months later...
  • 1 month later...
  • 1 month later...
  • 2 months later...

In 1.6 there are few block categories file:

 

blockcategories.tpl

{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <contact@prestashop.com>
*  @copyright  2007-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{if $blockCategTree && $blockCategTree.children|@count}
<!-- Block categories module -->
<div id="categories_block_left" class="block">
	<h4 class="title_block">{if isset($currentCategory)}{$currentCategory->name|escape}{else}{l s='Categories' mod='blockcategories'}{/if}</h4>
	<div class="block_content">
		<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}
		{/foreach}
		</ul>
		{* Javascript moved here to fix bug #PSCFI-151 *}
		<script type="text/javascript">
		// <![CDATA[
			// we hide the tree only if JavaScript is activated
			$('div#categories_block_left ul.dhtml').hide();
		// ]]>
		</script>
	</div>
</div>
<!-- /Block categories module -->
{/if}

blockcategories_top.tpl

{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <contact@prestashop.com>
*  @copyright  2007-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

<!-- Block categories module -->
<div id="categories_block_top">
	<div class="category_top">
		<div class="list">
			<ul class="tree {if $isDhtml}dhtml{/if} sf-menu sf-js-enabled clearfix">

			{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 isset($blockCategTree.thumbnails) && $blockCategTree.thumbnails|count > 0}
					<div id="category-thumbnails">
					{foreach $blockCategTree.thumbnails as $thumbnail}
						<div>{$thumbnail}</div>
					{/foreach}
					</div>
				{/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"/>
</div>
<!-- /Block categories module -->

where do I make the changes?

Edited by kin0kin (see edit history)

Share this post


Link to post
Share on other sites

  • 1 month later...
  • 3 months later...

In 1.6 there are few block categories file:

 

blockcategories.tpl

{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <contact@prestashop.com>
*  @copyright  2007-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{if $blockCategTree && $blockCategTree.children|@count}
<!-- Block categories module -->
<div id="categories_block_left" class="block">
	<h4 class="title_block">{if isset($currentCategory)}{$currentCategory->name|escape}{else}{l s='Categories' mod='blockcategories'}{/if}</h4>
	<div class="block_content">
		<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}
		{/foreach}
		</ul>
		{* Javascript moved here to fix bug #PSCFI-151 *}
		<script type="text/javascript">
		// <![CDATA[
			// we hide the tree only if JavaScript is activated
			$('div#categories_block_left ul.dhtml').hide();
		// ]]>
		</script>
	</div>
</div>
<!-- /Block categories module -->
{/if}

blockcategories_top.tpl

{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <contact@prestashop.com>
*  @copyright  2007-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

<!-- Block categories module -->
<div id="categories_block_top">
	<div class="category_top">
		<div class="list">
			<ul class="tree {if $isDhtml}dhtml{/if} sf-menu sf-js-enabled clearfix">

			{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 isset($blockCategTree.thumbnails) && $blockCategTree.thumbnails|count > 0}
					<div id="category-thumbnails">
					{foreach $blockCategTree.thumbnails as $thumbnail}
						<div>{$thumbnail}</div>
					{/foreach}
					</div>
				{/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"/>
</div>
<!-- /Block categories module -->

where do I make the changes?

 

This would be great if someone would help for 1.6. 

Share this post


Link to post
Share on other sites

  • 3 months later...

Hello,

 

I'm sharing with you very simple small tip how you can add to block_categories_menu default supperfish vertical menu from the block_top_menu. You learn a basic functionality and to fit it with your theme you might continue to work with your css files. The basic idea of this small tip is that you don't need to buy or upload any new files. We use the files that we already have in system. This works for new Prestashop 1.5.x.

 

/modules/blockcategories/category-tree-branch.tpl

 

@line 28

 

#1 tip: to disable or turn off onmouseover tooltip block categories <a> tag link remove this: title="{$node.desc|escape:'htmlall':'UTF-8'}"

 

<a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if}>{$node.name|escape:'htmlall':'UTF-8'}</a>
#2 tip: to show names of categories instead of description in onmouseover tooltips block categories <a> tag change to: title="{$node.name|escape:'htmlall':'UTF-8'}"

 

<a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if} title="{$node.name|escape:'htmlall':'UTF-8'}">{$node.name|escape:'htmlall':'UTF-8'}</a>

---

 

/modules/blockcategories/blockcategories.tpl

 

@line 31

 

add new class "sf-vertical" after "sf-menu":

 

<ul class="tree sf-menu sf-vertical clearfix sf-js-enabled sf-shadow">
---

 

/modules/blocktopmenu/css/superfish-modified.css

 

add these lines at the end of file:

 

/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/

.sf-vertical, .sf-vertical li {
width: 200px;
background: transparent url(../img/bg_blocktopmenu.png) repeat 0 0; /* change this if you want to play with background color */
/*background: #999;*/
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
left: 200px; /* match ul width */
top: 0;
}

/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/

/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** this will remove margin-left from global.css to display submenu ***/
#categories_block_left li ul {margin-left:0 !important;}

Will this work on PS 1.6+

Share this post


Link to post
Share on other sites

  • 1 month later...
Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More