Jump to content

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


Recommended Posts



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:



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


Thank you!

BR Lasse

Edited by LasseSJ (see edit history)
Link to comment
Share on other sites

[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...


Edited by PascalVG (see edit history)
Link to comment
Share on other sites

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:


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


Link to comment
Share on other sites

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):



Hope this helps,


Link to comment
Share on other sites

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...



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...