Jump to content

How to align the social buttons Like, Google plus and Tweet in product.tpl


Recommended Posts

Hi,

Excuse me I did not know much but I would like to know how to align the buttons "Like" "+1" and "Tweet" on a horizontal line?

See example in the attached image please thank you

My code file product.tpl (theme PrestaShop) :

><!-- usefull links-->
</pre>
<ul>

       {literal} </ul>
<div></div>[removed][removed] {/literal}<br>           {if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT



Thank you for your help

Nassim

48862_GjHnWoDFmgna8aZ6zCcQ_t

Link to comment
Share on other sites

  • 4 weeks later...

Alo!

 

Have a question: are you using some bookmarking service like addthis+? I can see that it calls an iFrame in order to show the external buttons. First, all external services use their own css and this cannot be edited.

 

The second thing to notice is that social buttons are showing inside the left product column, inside the usefull links list. This space is not as wide as buttons require to show up in one line.

 

Can you take this buttons out of this list? are you using a module to do this and is hooked in the 'useful links' hook or something like that?

 

let me know ;)

  • Like 1
Link to comment
Share on other sites

Alo!

 

Have a question: are you using some bookmarking service like addthis+? I can see that it calls an iFrame in order to show the external buttons. First, all external services use their own css and this cannot be edited.

 

The second thing to notice is that social buttons are showing inside the left product column, inside the usefull links list. This space is not as wide as buttons require to show up in one line.

 

Can you take this buttons out of this list? are you using a module to do this and is hooked in the 'useful links' hook or something like that?

 

let me know ;)

 

Hi Susi,

 

Thanks a lot for your help, I use two modules, one for the button and the other for like 1 +. Before I tested trying to put the code directly into the .tpl files Prestashop theme, but I had many difficulties because I am not a developer myself I learn :-) But I'll try your suggestions and I'll give you news :-)

 

Best Regards,

 

Nassim

Link to comment
Share on other sites

Hello again, try to hook those modules in product footer instead of useful links, also remember to move this modules to the top positions inside the hook list.

 

I recomend using some service like www.addthis.com because you can put the code in your .tpl file (in product.tpl) and you will have all buttons in a row.

 

Search for line 406 in your product.tpl file, this assuming you're using prestashop original theme and there is product footer hook, you can paste addthis code there and will have something like you want.

 

Cheers!

 

{if $quantity_discounts}
<!-- quantity discount -->
<ul class="idTabs">
<li><a style="cursor: pointer" class="selected">{l s='Quantity discount'}</a></li>
</ul>
<div id="quantityDiscount">
<table class="std">
	<tr>
		{foreach from=$quantity_discounts item='quantity_discount' name='quantity_discounts'}
			<th>{$quantity_discount.quantity|intval}
			{if $quantity_discount.quantity|intval > 1}
				{l s='quantities'}
			{else}
				{l s='quantity'}
			{/if}
			</th>
		{/foreach}
	</tr>
	<tr>
		{foreach from=$quantity_discounts item='quantity_discount' name='quantity_discounts'}
			<td>
			{if $quantity_discount.price != 0 OR $quantity_discount.reduction_type == 'amount'}
				-{convertPrice price=$quantity_discount.real_value|floatval}
			{else}
   				-{$quantity_discount.real_value|floatval}%
			{/if}
			</td>
		{/foreach}
	</tr>
</table>
</div>
{/if}

{$HOOK_PRODUCT_FOOTER} [color="#FF0000"]<---PASTE HERE! BUT DON'T TAKE AWAY THAT HOOK OR IT WILL BE USELESS[/color]

<!-- description and features -->
{if $product->description || $features || $accessories || $HOOK_PRODUCT_TAB || $attachments}
<div id="more_info_block" class="clear">
<ul id="more_info_tabs" class="idTabs idTabsShort">
	{if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
	{if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
	{if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
	{if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
	{$HOOK_PRODUCT_TAB}

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Hello again, try to hook those modules in product footer instead of useful links, also remember to move this modules to the top positions inside the hook list.

 

I recomend using some service like www.addthis.com because you can put the code in your .tpl file (in product.tpl) and you will have all buttons in a row.

 

Search for line 406 in your product.tpl file, this assuming you're using prestashop original theme and there is product footer hook, you can paste addthis code there and will have something like you want.

 

Cheers!

 

{if $quantity_discounts}
<!-- quantity discount -->
<ul class="idTabs">
<li><a style="cursor: pointer" class="selected">{l s='Quantity discount'}</a></li>
</ul>
<div id="quantityDiscount">
<table class="std">
	<tr>
		{foreach from=$quantity_discounts item='quantity_discount' name='quantity_discounts'}
			<th>{$quantity_discount.quantity|intval}
			{if $quantity_discount.quantity|intval > 1}
				{l s='quantities'}
			{else}
				{l s='quantity'}
			{/if}
			</th>
		{/foreach}
	</tr>
	<tr>
		{foreach from=$quantity_discounts item='quantity_discount' name='quantity_discounts'}
			<td>
			{if $quantity_discount.price != 0 OR $quantity_discount.reduction_type == 'amount'}
				-{convertPrice price=$quantity_discount.real_value|floatval}
			{else}
				-{$quantity_discount.real_value|floatval}%
			{/if}
			</td>
		{/foreach}
	</tr>
</table>
</div>
{/if}

{$HOOK_PRODUCT_FOOTER} [color="#FF0000"]<---PASTE HERE! BUT DON'T TAKE AWAY THAT HOOK OR IT WILL BE USELESS[/color]

<!-- description and features -->
{if $product->description || $features || $accessories || $HOOK_PRODUCT_TAB || $attachments}
<div id="more_info_block" class="clear">
<ul id="more_info_tabs" class="idTabs idTabsShort">
	{if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
	{if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
	{if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
	{if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
	{$HOOK_PRODUCT_TAB}

Any help with align?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...