[SOLVED] Facebook picture as the link in the footer?

[LasseSJ]

Hi.

 

I'm using Presta 1.54.

 

I already have a Facebook Follow Us link in the footer, but I need it to only show a facebook Picture and Work as the link too when you click on the picture.

I would like to keep the Follow us in top of the Picture link:

http://smartkajak.dk...egory&id_lang=1

 

Also I would like to make it possible to adjust the size (H+W) of the .png Picture file.

 

Thank you!

BR Lasse

Edited April 18, 2013 by LasseSJ (see edit history)

[PascalVG]

[EDIT: Darn, I edited the text, and when saving, something went wrong. Ill try to re-create it :-(( ]

 

A little more complex that just add a link to a picture here, as the Facebook is not just a picture added to the item. It is set as the 'background' of the list item AND it is not a direct image file, but a PIECE of a so called sprite file (sprite file is a sort of combination of images put together in one file, for (load) speed purposes. Then it cuts out the part it needs to show.

 

So what we have to do is here, delete the background picture, done in the themes/<your theme folder>/css/global.css (line 2075):

 

#social_block li.facebook {background:url(../../../modules/blocksocial/img/sprite_pict_social_block.png) no-repeat 0 6px;}

 

and change into:

 

#social_block li.facebook {background:transparent;}

 

 

No that we got rid of the background image, we need to add a new picture and make it a link, and get rid of the 'Facebook' text.

 

This can be done in the file blocksocial.tpl . to do this neatly, we need to override it.:

Check if the file /themes/<your theme folder>/modules/blocksocial/blocksocial.tpl exists. If not, copy it to this place from the original: /modules/blocksocial/blocksocial.tpl .

 

Edit the (copied!) file:

 

It's a tiny file, with only a few lines:

Find the line:

 

{if $facebook_url != ''}<li class="facebook"><a href="{$facebook_url|escape:html:'UTF-8'}">{l s='Facebook' mod='blocksocial'}</a></li>{/if}

 

 

and change it into:

 

{if $facebook_url != ''}<li class="facebook"><a href="{$facebook_url|escape:html:'UTF-8'}"><img src="{$img_dir}facebook_logo.png" width="XXX" height="YYY" alt="{l s='Facebook' mod='blocksocial'}"></a></li>{/if}

 

[*EDIT: because of Lasse's reply below, I changed the code a little to {img_dir} ]

 

Make your own facebook logo and save it into:

/themes/<your theme folder>/img/facebook_logo.png

Check the width and height of your picture and change the XXX and YYY accordingly in the line above.

 

Hope this does the trick...

Pascal

Edited April 15, 2013 by PascalVG (see edit history)

[LasseSJ]

Hi Pascal.

 

The image I uploaded to IMG wont be displayed, I attached it here (in any case).

Also I need the first small facebook logo gone, not transparent, as I need the new facebook logo to start from the beginning of the left side along with the text.

 

Maybe this is easier to do (same result), using the free coolshare module:

I have the facebook logo I need on the top NeXT to the cart using coolshare:

http://smartkajak.dk/prestashop/index.php

I need it moved to the footer, and I want to erase the previous facebook link in the footer and the link needs edited.

I need a FOLLOW US on the top of this facebook Picture too.

 

Thank you Pascal.

 

BR Lasse

[PascalVG]

Hi Lasse,

 

Picture not displayed my fault (didn't try out the code, small change needed ../../ should be {$img_dir}

 

so, in /themes/<your theme folder>/modules/blocksocial/blocksocial.tpl, change original line into:

 

 

{if $facebook_url != ''}<li class="facebook"><a href="{$facebook_url|escape:html:'UTF-8'}"><img src="{$img_dir}facebook_logo.png" width="100" height="100" alt="{l s='Facebook' mod='blocksocial'}"></a></li>{/if}

 

Logo still expected in /themes/<your theme folder>/img/facebook_logo.png so make sure you save it there.

 

The transparent, REPLACES the old logo background, and makes sure the picture underneath this column is visible (we could take it fully out as well, as it is transparent by default...).

 

So, if you want you can change line 2075 in /themes/<your theme folder>/css/global.css:

#social_block li.facebook {}

 

Really, this are the two only changes needed. You can see the result of this here (temporarily, I may delete this in the near future again):

http://prestatestshop.buymethai.com/index.php

 

Hope this helps,

Pascal

[LasseSJ]

There it was.

 

But it doesn't look good, there's too much space between FOLLOW US and Contact.

How do I fix this?

http://smartkajak.dk/prestashop/index.php

 

Thank you for your time Pascal.

BR Lasse

[PascalVG]

Hi Lasse,

your image has quite a big (invisible) border around the Facebook picture. Take any image editor and cut away the edges. Then save.

 

(Here a link to your pic with smaller edges) :

( http://i1164.photobucket.com/albums/q561/Pascalvangeest/facebookb_zps293f6f0a.png )

[LasseSJ]

Great.

I'm new at .png formats too. Now it fits better.

I would still like to move the Follow US further Down to CONTACT in the footer.

Is that possible?

 

http://smartkajak.dk/prestashop/index.php

 

Thanks,

Lasse

[PascalVG]

Not sure what you want. Do you want to move the whole block text a little down (to the current level of Contact us), so that you have some black space at the top?

That can be done in global.css, line 2075:

 

 

 

#social_block {

padding: 125px 10px 10px 10px;

}

 

If that's not what you want, please elaborate or draw some pic, so I have a better idea what you need...

 

Pascal

[LasseSJ]

Thank you Pascal!!