Jump to content

[solved] How to add new social icons

2grosiek7
 Share

Recommended Posts

PascalVG Newbie

PascalVG

Posted
Posted (edited)

Nothing comes easy here, as you have to hard code it. But if you can copy/paste and edit a graphic it's very simple.

Edit file:

/modules/blocksocial/blocksocial.php

 

and change these funtions (red text is example change. I added googleplus as example):

 

 

public function install()

{

return (parent::install() AND Configuration::updateValue('blocksocial_facebook', '') && Configuration::updateValue('blocksocial_twitter', '') && Configuration::updateValue('blocksocial_googleplus', '') && Configuration::updateValue('blocksocial_rss', '') && $this->registerHook('displayHeader') && $this->registerHook('displayFooter'));

}

 

public function uninstall()

{

//Delete configuration

return (Configuration::deleteByName('blocksocial_facebook') AND Configuration::deleteByName('blocksocial_twitter') AND Configuration::deleteByName('blocksocial_googleplus') AND Configuration::deleteByName('blocksocial_rss') AND parent::uninstall());

}

 

 

then edit function:

 

public function getContent()

{

...

if (isset($_POST['submitModule']))

{

Configuration::updateValue('blocksocial_facebook', (($_POST['facebook_url'] != '') ? $_POST['facebook_url']: ''));

Configuration::updateValue('blocksocial_twitter', (($_POST['twitter_url'] != '') ? $_POST['twitter_url']: ''));

Configuration::updateValue('blocksocial_googleplus', (($_POST['googleplus_url'] != '') ? $_POST['googleplus_url']: ''));

Configuration::updateValue('blocksocial_rss', (($_POST['rss_url'] != '') ? $_POST['rss_url']: ''));

$output = '<div class="conf confirm">'.$this->l('Configuration updated').'</div>';

}

 

...

...

 

 

<div class="clear"> </div>

<label for="twitter_url">'.$this->l('Twitter URL: ').'</label>

<input type="text" id="twitter_url" name="twitter_url" value="'.Tools::safeOutput((Configuration::get('blocksocial_twitter') != "") ? Configuration::get('blocksocial_twitter') : "").'" />

<div class="clear"> </div> // just copy from twitter above

<label for="googleplus_url">'.$this->l('Google+ URL: ').'</label>

<input type="text" id="googleplus_url" name="googleplus_url" value="'.Tools::safeOutput((Configuration::get('blocksocial_googleplus') != "") ? Configuration::get('blocksocial_googleplus') : "").'" />

<div class="clear"> </div>

<label for="rss_url">'.$this->l('RSS URL: ').'</label>

 

 

the last thing in this file:

 

 

public function hookDisplayFooter()

{

global $smarty;

 

$smarty->assign(array(

'facebook_url' => Configuration::get('blocksocial_facebook'),

'twitter_url' => Configuration::get('blocksocial_twitter'),

'googleplus_url' => Configuration::get('blocksocial_googleplus'),

'rss_url' => Configuration::get('blocksocial_rss')

));

return $this->display(__FILE__, 'blocksocial.tpl');

}

 

Then edit file: themes/default/modules/blocksocial/blocksocial.tpl

and add the following:

 

 

 

 

 

<div id="social_block">

<p class="title_block">{l s='Follow us' mod='blocksocial'}</p>

<ul>

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

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

{if $googleplus_url != ''}<li class="googleplus"><a href="{$googleplus_url|escape:html:'UTF-8'}">{l s='Google+' mod='blocksocial'}</a></li>{/if}

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

</ul>

</div>

 

 

finally edit the file themes//css/global.css

and find this block (around line 2030 I think):

 

 

/*************** Block SOCIAL ***************/

 

/*************** Block SOCIAL ***************/

#social_block {padding:15px 10px;}

#social_block li {padding-left:22px !important;}

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

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

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

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

 

The last thing to do is to (make a backup of and) edit the graphic:

/modules/blocksocial/img/sprite_pict_social_block.png

This is a sprite, i.e. a graphic file that combines more pictures in one file

Edit this file and copy the part from just below twitter, to just below rss, and add this cart below the rss picture: (see example file)

sprite_pict_social_block.png

then change the new circle to the social place you want to add (I made a simple G+)

save the file and replace with the original one.

 

In short this should do the trick. Go to modules and 'reset' the social block module. then go to configure and add a googleplus URL. Go to your front office, reload page and see if it works.

 

Hope this helps. Questions/Errors, please let me know.

Pascal

Edited by vekia (see edit history)
  • Like 7
Link to comment
Share on other sites
  • 2 months later...
  • 1 month later...
NOSaint Newbie

NOSaint

Posted
Posted

There's a typo in first file /modules/blocksocial/blockspecials.php.....it should be /modules/blocksocial/blocksocial.php so that might be the problem you guys are having.

 

But I followed his instructions and it worked perfectly! Thanks PascalVG! Great job on the tutorial! :D

Link to comment
Share on other sites
studio52 Newbie

studio52

Posted
Posted

Im brand new, so Im struggling a bit to learn even the simple basics..and learning how to edit a page is more difficult than in the past when I was editing a web page in WordPress...that was pretty straight forward...this seems a bit more challenging.

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

Im brand new, so Im struggling a bit to learn even the simple basics..and learning how to edit a page is more difficult than in the past when I was editing a web page in WordPress...that was pretty straight forward...this seems a bit more challenging.

hello

if you have got any questions - feel free to write, we are here to help

regards

Link to comment
Share on other sites
mymlondon Newbie

mymlondon

Posted
Posted

Hi

 

Firstly thanks for the code, great help.

 

Wondering if i could ask a small question?

 

I Edited the social block code, and it works, google plus shows up.

Only thing is that the Follow us header is now slightly lower than the other

headers.

 

Any Idea why this might be?

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

Hi

 

Firstly thanks for the code, great help.

 

Wondering if i could ask a small question?

 

I Edited the social block code, and it works, google plus shows up.

Only thing is that the Follow us header is now slightly lower than the other

headers.

 

Any Idea why this might be?

 

welcome on board!

 

please share url, it will be much easier to debug it

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

but this is the only one difference between the social and other blocks there

 

i think that this is the best way + creating additional style especially for social block:

#footer #social_block ul {
list-style-type: none;
line-height: 1.8em;
}

  • Like 1
Link to comment
Share on other sites
PascalVG Newbie

PascalVG

Posted
Posted

but this is the only one difference between the social and other blocks there

 

i think that this is the best way + creating additional style especially for social block:

#footer #social_block ul {
list-style-type: none;
line-height: 1.8em;
}

 

Yep, nice!

To summarize for everyone, delete the line as you suggested earlier, and then add this code above.

Like!

  • Like 1
Link to comment
Share on other sites
mymlondon Newbie

mymlondon

Posted
Posted

Thanks for all the help so far.

 

sorry to ask again.

 

i wanted to add a link for a blog

 

when ever i load the .php file i get a backend error

 

The following module(s) could not be loaded:

  1. blocksocial (parse error in /modules/blocksocial/blocksocial.php)
  2. blocksocial (class missing in /modules/blocksocial/blocksocial.php)

 

the site is bathrooom.co.uk

 

here are the files

 

(currently the php file is not online, the previous versions is becasue the shop dies not

show up)

 

/modules/blocksocial/blocksocial.php

 

 

 

public function install()

{

return (parent::install() AND Configuration::updateValue('blocksocial_facebook', '') && Configuration::updateValue('blocksocial_twitter', '') && Configuration::updateValue('blocksocial_googleplus', '') && Configuration::updateValue('blocksocial_blog', '') && && Configuration::updateValue('blocksocial_rss', '') && $this->registerHook('displayHeader') && $this->registerHook('displayFooter'));

}

 

public function uninstall()

{

//Delete configuration

return (Configuration::deleteByName('blocksocial_facebook') AND Configuration::deleteByName('blocksocial_twitter') AND Configuration::deleteByName('blocksocial_googleplus') AND Configuration::deleteByName('blocksocial_blog') AND Configuration::deleteByName('blocksocial_rss') AND parent::uninstall());

}

 

public function getContent()

{

// If we try to update the settings

$output = '';

if (isset($_POST['submitModule']))

{

Configuration::updateValue('blocksocial_facebook', (($_POST['facebook_url'] != '') ? $_POST['facebook_url']: ''));

Configuration::updateValue('blocksocial_twitter', (($_POST['twitter_url'] != '') ? $_POST['twitter_url']: ''));

Configuration::updateValue('blocksocial_googleplus', (($_POST['googleplus_url'] != '') ? $_POST['googleplus_url']: ''));

Configuration::updateValue('blocksocial_blog', (($_POST['blog_url'] != '') ? $_POST['blog_url']: ''));

Configuration::updateValue('blocksocial_rss', (($_POST['rss_url'] != '') ? $_POST['rss_url']: ''));

$output = '<div class="conf confirm">'.$this->l('Configuration updated').'</div>';

}

 

return '

<h2>'.$this->displayName.'</h2>

'.$output.'

<form action="'.Tools::htmlentitiesutf8($_SERVER['REQUEST_URI']).'" method="post">

<fieldset class="width2">

<label for="facebook_url">'.$this->l('Facebook URL: ').'</label>

<input type="text" id="facebook_url" name="facebook_url" value="'.Tools::safeOutput((Configuration::get('blocksocial_facebook') != "") ? Configuration::get('blocksocial_facebook') : "").'" />

 

<div class="clear"> </div>

<label for="twitter_url">'.$this->l('Twitter URL: ').'</label>

<input type="text" id="twitter_url" name="twitter_url" value="'.Tools::safeOutput((Configuration::get('blocksocial_twitter') != "") ? Configuration::get('blocksocial_twitter') : "").'" />

 

<div class="clear"> </div> // just copy from twitter above

<label for="googleplus_url">'.$this->l('Google+ URL: ').'</label>

<input type="text" id="googleplus_url" name="googleplus_url" value="'.Tools::safeOutput((Configuration::get('blocksocial_googleplus') != "") ? Configuration::get('blocksocial_googleplus') : "").'" />

 

<div class="clear"> </div> // just copy from twitter above

<label for="blog_url">'.$this->l('Blog URL: ').'</label>

<input type="text" id="blog_url" name="blog_url" value="'.Tools::safeOutput((Configuration::get('blocksocial_blog') != "") ? Configuration::get('blocksocial_blog') : "").'" />

 

<div class="clear"> </div>

<label for="rss_url">'.$this->l('RSS URL: ').'</label>

<input type="text" id="rss_url" name="rss_url" value="'.Tools::safeOutput((Configuration::get('blocksocial_rss') != "") ? Configuration::get('blocksocial_rss') : "").'" />

 

<div class="clear"> </div>

<br /><center><input type="submit" name="submitModule" value="'.$this->l('Update settings').'" class="button" /></center>

</fieldset>

</form>';

}

 

public function hookDisplayHeader()

{

$this->context->controller->addCSS(($this->_path).'blocksocial.css', 'all');

}

 

public function hookDisplayFooter()

{

global $smarty;

 

$smarty->assign(array(

'facebook_url' => Configuration::get('blocksocial_facebook'),

'twitter_url' => Configuration::get('blocksocial_twitter'),

'googleplus_url' => Configuration::get('blocksocial_googleplus'),

'blog_url' => Configuration::get('blocksocial_blog'),

'rss_url' => Configuration::get('blocksocial_rss'),

));

return $this->display(__FILE__, 'blocksocial.tpl');

}

}

?>

 

 

themes/thgr00027/modules/blocksocial/blocksocial.tpl

 

<div id="social_block">

<h4 class="title_block">{l s='Follow us' mod='blocksocial'}</h4>

<ul>

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

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

{if $googleplus_url != ''}<li class="googleplus"><a href="{$googleplus_url|escape:html:'UTF-8'}">{l s='Google+' mod='blocksocial'}</a></li>{/if}

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

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

</ul>

</div>

 

 

themes/thgr00027/css/modules/blocksocial/blocksocial.css

 

#social_block {padding:15px 10px; line-height: 1.8em; margin-top: -3px;}

#social_block li {padding-left:22px !important;}

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

#social_block li.twitter {background:url(img/sprite_pict_social_block.png) no-repeat 0 -28px;}

#social_block li.rss {background:url(img/sprite_pict_social_block.png) no-repeat 0 -57px;}

#social_block li.googleplus {background:url(img/sprite_pict_social_block.png) no-repeat 0 -86px;}

#social_block li.blog {background:url(img/sprite_pict_social_block.png) no-repeat 0 -112px;}

 

 

Thanks in advance

Link to comment
Share on other sites
PascalVG Newbie

PascalVG

Posted
Posted

It looks almost correct. Only thing I see is this:

public function install()

{

return (parent::install() AND Configuration::updateValue('blocksocial_facebook', '') && Configuration::updateValue('blocksocial_twitter', '') && Configuration::updateValue('blocksocial_googleplus', '') && Configuration::updateValue('blocksocial_blog', '') && && Configuration::updateValue('blocksocial_rss', '') && $this->registerHook('displayHeader') && $this->registerHook('displayFooter'));

}

 

(i.e. two '&' symbols). Take one out.

 

My $.02,

pascal

  • Like 1
Link to comment
Share on other sites
  • 1 month later...
WStefanko Newbie

WStefanko

Posted
Posted

Yep, I edited the files in my theme. I am just not sure on how to edit the sprite. Can I just replace it with the one to download from Pascal?

 

"The last thing to do is to (make a backup of and) edit the graphic:
/modules/blocksocial/img/sprite_pict_social_block.png
This is a sprite, i.e. a graphic file that combines more pictures in one file
Edit this file and copy the part from just below twitter, to just below rss, and add this cart below the rss picture: (see example file)
 

then change the new circle to the social place you want to add (I made a simple G+)
save the file and replace with the original one."

Link to comment
Share on other sites
PascalVG Newbie

PascalVG

Posted
Posted

Hi Stefan,

 

What you simply can do is take my sprite. Then edit it in Paint or so, or other simple graphics editor. Then paste your own picture on top of my G+ (Which isn't the official Google+ one, just some simple thing I made my self to show the idea)

Make sure your new picture has a height of exactly 30px, as we cut out every 30px a new picture from the sprite. Width as the original sprite width (can't remember how much that is, just open the sprite and you know)

 

Hope this helps. if still difficulty, just add your new small picture here and I'll put it in there for you.

pascal

Link to comment
Share on other sites
  • 3 months later...
agplacid Newbie

agplacid

Posted
Posted

Nothing comes easy here, as you have to hard code it. But if you can copy/paste and edit a graphic it's very simple.

Edit file:

/modules/blocksocial/blocksocial.php

 

and change these funtions (red text is example change. I added googleplus as example):

 

 

public function install()

{

return (parent::install() AND Configuration::updateValue('blocksocial_facebook', '') && Configuration::updateValue('blocksocial_twitter', '') && Configuration::updateValue('blocksocial_googleplus', '') && Configuration::updateValue('blocksocial_rss', '') && $this->registerHook('displayHeader') && $this->registerHook('displayFooter'));

}

 

public function uninstall()

{

//Delete configuration

return (Configuration::deleteByName('blocksocial_facebook') AND Configuration::deleteByName('blocksocial_twitter') AND Configuration::deleteByName('blocksocial_googleplus') AND Configuration::deleteByName('blocksocial_rss') AND parent::uninstall());

}

 

 

then edit function:

 

public function getContent()

{

...

if (isset($_POST['submitModule']))

{

Configuration::updateValue('blocksocial_facebook', (($_POST['facebook_url'] != '') ? $_POST['facebook_url']: ''));

Configuration::updateValue('blocksocial_twitter', (($_POST['twitter_url'] != '') ? $_POST['twitter_url']: ''));

Configuration::updateValue('blocksocial_googleplus', (($_POST['googleplus_url'] != '') ? $_POST['googleplus_url']: ''));

Configuration::updateValue('blocksocial_rss', (($_POST['rss_url'] != '') ? $_POST['rss_url']: ''));

$output = '<div class="conf confirm">'.$this->l('Configuration updated').'</div>';

}

 

...

...

 

 

<div class="clear"> </div>

<label for="twitter_url">'.$this->l('Twitter URL: ').'</label>

<input type="text" id="twitter_url" name="twitter_url" value="'.Tools::safeOutput((Configuration::get('blocksocial_twitter') != "") ? Configuration::get('blocksocial_twitter') : "").'" />

<div class="clear"> </div> // just copy from twitter above

<label for="googleplus_url">'.$this->l('Google+ URL: ').'</label>

<input type="text" id="googleplus_url" name="googleplus_url" value="'.Tools::safeOutput((Configuration::get('blocksocial_googleplus') != "") ? Configuration::get('blocksocial_googleplus') : "").'" />

<div class="clear"> </div>

<label for="rss_url">'.$this->l('RSS URL: ').'</label>

 

 

the last thing in this file:

 

 

public function hookDisplayFooter()

{

global $smarty;

 

$smarty->assign(array(

'facebook_url' => Configuration::get('blocksocial_facebook'),

'twitter_url' => Configuration::get('blocksocial_twitter'),

'googleplus_url' => Configuration::get('blocksocial_googleplus'),

'rss_url' => Configuration::get('blocksocial_rss')

));

return $this->display(__FILE__, 'blocksocial.tpl');

}

 

Then edit file: themes/default/modules/blocksocial/blocksocial.tpl

and add the following:

 

 

 

 

 

<div id="social_block">

<p class="title_block">{l s='Follow us' mod='blocksocial'}</p>

<ul>

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

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

{if $googleplus_url != ''}<li class="googleplus"><a href="{$googleplus_url|escape:html:'UTF-8'}">{l s='Google+' mod='blocksocial'}</a></li>{/if}

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

</ul>

</div>

 

 

finally edit the file themes//css/global.css

and find this block (around line 2030 I think):

 

 

/*************** Block SOCIAL ***************/

 

/*************** Block SOCIAL ***************/

#social_block {padding:15px 10px;}

#social_block li {padding-left:22px !important;}

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

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

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

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

 

The last thing to do is to (make a backup of and) edit the graphic:

/modules/blocksocial/img/sprite_pict_social_block.png

This is a sprite, i.e. a graphic file that combines more pictures in one file

Edit this file and copy the part from just below twitter, to just below rss, and add this cart below the rss picture: (see example file)

sprite_pict_social_block.png

then change the new circle to the social place you want to add (I made a simple G+)

save the file and replace with the original one.

 

In short this should do the trick. Go to modules and 'reset' the social block module. then go to configure and add a googleplus URL. Go to your front office, reload page and see if it works.

 

Hope this helps. Questions/Errors, please let me know.

Pascal

Hi Pascal thanks for your help. I have done that Instagram is now showing in the module but the module has gone out of it align position. I don't have a clue how to solve this one; this prestashop is proving really challenging.

Link to comment
Share on other sites
agplacid Newbie

agplacid

Posted
Posted

Nothing comes easy here, as you have to hard code it. But if you can copy/paste and edit a graphic it's very simple.

Edit file:

/modules/blocksocial/blocksocial.php

 

and change these funtions (red text is example change. I added googleplus as example):

 

 

public function install()

{

return (parent::install() AND Configuration::updateValue('blocksocial_facebook', '') && Configuration::updateValue('blocksocial_twitter', '') && Configuration::updateValue('blocksocial_googleplus', '') && Configuration::updateValue('blocksocial_rss', '') && $this->registerHook('displayHeader') && $this->registerHook('displayFooter'));

}

 

public function uninstall()

{

//Delete configuration

return (Configuration::deleteByName('blocksocial_facebook') AND Configuration::deleteByName('blocksocial_twitter') AND Configuration::deleteByName('blocksocial_googleplus') AND Configuration::deleteByName('blocksocial_rss') AND parent::uninstall());

}

 

 

then edit function:

 

public function getContent()

{

...

if (isset($_POST['submitModule']))

{

Configuration::updateValue('blocksocial_facebook', (($_POST['facebook_url'] != '') ? $_POST['facebook_url']: ''));

Configuration::updateValue('blocksocial_twitter', (($_POST['twitter_url'] != '') ? $_POST['twitter_url']: ''));

Configuration::updateValue('blocksocial_googleplus', (($_POST['googleplus_url'] != '') ? $_POST['googleplus_url']: ''));

Configuration::updateValue('blocksocial_rss', (($_POST['rss_url'] != '') ? $_POST['rss_url']: ''));

$output = '<div class="conf confirm">'.$this->l('Configuration updated').'</div>';

}

 

...

...

 

 

<div class="clear"> </div>

<label for="twitter_url">'.$this->l('Twitter URL: ').'</label>

<input type="text" id="twitter_url" name="twitter_url" value="'.Tools::safeOutput((Configuration::get('blocksocial_twitter') != "") ? Configuration::get('blocksocial_twitter') : "").'" />

<div class="clear"> </div> // just copy from twitter above

<label for="googleplus_url">'.$this->l('Google+ URL: ').'</label>

<input type="text" id="googleplus_url" name="googleplus_url" value="'.Tools::safeOutput((Configuration::get('blocksocial_googleplus') != "") ? Configuration::get('blocksocial_googleplus') : "").'" />

<div class="clear"> </div>

<label for="rss_url">'.$this->l('RSS URL: ').'</label>

 

 

the last thing in this file:

 

 

public function hookDisplayFooter()

{

global $smarty;

 

$smarty->assign(array(

'facebook_url' => Configuration::get('blocksocial_facebook'),

'twitter_url' => Configuration::get('blocksocial_twitter'),

'googleplus_url' => Configuration::get('blocksocial_googleplus'),

'rss_url' => Configuration::get('blocksocial_rss')

));

return $this->display(__FILE__, 'blocksocial.tpl');

}

 

Then edit file: themes/default/modules/blocksocial/blocksocial.tpl

and add the following:

 

 

 

 

 

<div id="social_block">

<p class="title_block">{l s='Follow us' mod='blocksocial'}</p>

<ul>

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

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

{if $googleplus_url != ''}<li class="googleplus"><a href="{$googleplus_url|escape:html:'UTF-8'}">{l s='Google+' mod='blocksocial'}</a></li>{/if}

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

</ul>

</div>

 

 

finally edit the file themes//css/global.css

and find this block (around line 2030 I think):

 

 

/*************** Block SOCIAL ***************/

 

/*************** Block SOCIAL ***************/

#social_block {padding:15px 10px;}

#social_block li {padding-left:22px !important;}

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

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

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

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

 

The last thing to do is to (make a backup of and) edit the graphic:

/modules/blocksocial/img/sprite_pict_social_block.png

This is a sprite, i.e. a graphic file that combines more pictures in one file

Edit this file and copy the part from just below twitter, to just below rss, and add this cart below the rss picture: (see example file)

sprite_pict_social_block.png

then change the new circle to the social place you want to add (I made a simple G+)

save the file and replace with the original one.

 

In short this should do the trick. Go to modules and 'reset' the social block module. then go to configure and add a googleplus URL. Go to your front office, reload page and see if it works.

 

Hope this helps. Questions/Errors, please let me know.

Pascal

 

This is my site www.mariesmartfashion.co.uk

Link to comment
Share on other sites
  • 4 months later...
zerryxu Newbie

zerryxu

Posted
Posted

The last thing to do is to (make a backup of and) edit the graphic:
/modules/blocksocial/img/sprite_pict_social_block.png
This is a sprite, i.e. a graphic file that combines more pictures in one file
Edit this file and copy the part from just below twitter, to just below rss, and add this cart below the rss picture: (see example file)

 

can you explain this above words? how to do?

Link to comment
Share on other sites
PascalVG Newbie

PascalVG

Posted
Posted

Hi zerry,

Easiest may be to just download the sample graphic with the rough G+ logo In it that I added to the post above, and replace the G+ With a nice icon you need. Then replace this new file with the original /modules/blocksocial/img/sprite_pict_social_block.png

 

That should do it,

Pascal

 

N.B. To edit the graphic, you can use any graphics editor, like paint or similar., or more advanced ones as desired.

Link to comment
Share on other sites
zerryxu Newbie

zerryxu

Posted
Posted

I have to download the sprite.png? when I download it, open it shows it already broken, u mean I have to edit new graphics? make a new sprite? replace the original one which without google+?

never edit graphic before :(

Link to comment
Share on other sites
PascalVG Newbie

PascalVG

Posted
Posted

Hi zerry,

 

Indeed, download this sprite:

post-455771-0-61824500-1399317920_thumb.png

 

edit the G+ part of it (copy another logo on top of it) and replace with the original at the location mentioned above.

 

If you don't have experience editing a graphic, this may be a little difficult. If you want, I can do it for you. Then please add a (link to a) picture of the logo you want to add, so I can put it instead of the G+ logo I made in the example.

 

As you see, the pictures are very small, so too much detail cannot be shown in the logo...

 

 

pascal.

Link to comment
Share on other sites
  • 3 months later...
NOSaint Newbie

NOSaint

Posted
Posted

Very interesting situation here. My Google+ button will not show up on my page at all. It appears in the BO just fine but is not appearing on the website. I even see it in the sprite pic on the server...but it's not showing up on the website. The interesting thing about this is that I previously had a Twitter button there that I replaced with the G+ button. The Twitter button appeared fine, but the G+ will not. 

 

Any ideas on why this is happening?

Link to comment
Share on other sites
  • 3 weeks later...
thulakawasaki Newbie

thulakawasaki

Posted
Posted

Hi and thanks for sharing this : )

 

It's the first time I have to work with Prestashop and I needed to add an Instagram input to admin and the button on the front end. Got it working with your help but, since I'm new to Prestashop, my only worry is if is really safe to edit /modules/ files like this, in case I need to update the module or event Prestashop itself in the future.

 

Thanks again!

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
 Share
Go to topic listing
×
×
  • Create New...