Jump to content

[SOLVED] How to Add Pinterest to Social Media Links

gnattle
 Share

Recommended Posts

gnattle Newbie

gnattle

Posted
Posted (edited)

Screen Shots.htmblocksocial.txt

Hi there

 

I searched for how to add pintrest and came across a post that said I needed to edit the tpl file which I have done. See code below however it is not working. In the module block for it there is only facebook, twitter and RSS hence using RSS below in the url

 

I cant find where else to add it?

 

Can anyone help me?

 

Cheers

 

 

<div id="social_block">

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

<ul>

{if $facebook_url != ''}<li class="facebook"><a href="{$facebook_url}"><img src="{$img_dir}calceus/facebook-versatile.png" alt="facebook" width="40" height="40" onmouseover="this.src='{$img_dir}calceus/facebook-versatile_2.png';" onmouseout="this.src='{$img_dir}calceus/facebook-versatile.png';" /></a></li>{/if}

{if $twitter_url != ''}<li class="twitter"><a href="{$twitter_url}"><img src="{$img_dir}calceus/twitter-versatile.png" alt="twitter" width="40" height="40" onmouseover="this.src='{$img_dir}calceus/twitter-versatile_2.png';" onmouseout="this.src='{$img_dir}calceus/twitter-versatile.png';" /></a></li>{/if}

{if $pintrest_url != ''}<li class="pinterest"><a href="{$rss_url}"><img src="{$img_dir}calceus/pintrest-versatile.png" alt="pintrest" width="40" height="40" onmouseover="this.src='{$img_dir}calceus/pintrest-versatile_2.png';" onmouseout="this.src='{$img_dir}calceus/pintrest-versatile.png';" /></a></li>{/if}

</ul>

</div>

post-650102-0-83992600-1375286328_thumb.png

post-650102-0-89750300-1375286329_thumb.png

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

gnattle

Posted
  • Author
Posted

hello

make sure that you modified correct file

sometimes template "overrides" the module .tpl files

in this case take a look into themes/YOUR_THEME/modules/blocksocial/blocksocial.tpl file

 

I am using the parure theme so have only been editing the css files within the theme folder.

 

I have also changed the hover link colour in every theme css file but that has not worked either!

 

Do I need to edit all css files in both the default theme and the theme I am using?

Link to comment
Share on other sites
gnattle Newbie

gnattle

Posted
  • Author
Posted

is there any chance to test your website? if so, share the url.

is hard to say what's going on, especially when whole case is related to the css styles

 

I also have another post which was asking about the footer which you replied to last night.

 

One other thing I am trying to do is change the menu. I want a sub menu under collections not under home. I have followed a few posts I have found that you had actually written with regards to the CMS in the back office but it is not working!

 

I then want black text pages for news, stockists etc which again I have found some posts from you.

 

URL: http://www.door.annacalvert.co.uk/index.php

 

Would the theme change the way the back office works?

Thanks - any help will be muchly appreciated!

Link to comment
Share on other sites
gnattle Newbie

gnattle

Posted
  • Author
Posted

it's because you use different module to display social buttons

 

Under the module there is only three listed the rss, facebook and twitter which is why I used the rss one for the pintrest in the tpl file?

 

Are you able to help me with the other bits?

Link to comment
Share on other sites
gnattle Newbie

gnattle

Posted
  • Author
Posted

sure, but the most important thing is fact that i don't know how the module code, backoffice works and looks like because it is non-default solution

 

can you shed more light on this?

 

Could I post some screen shots? WOuld that help? Many Thanks

Link to comment
Share on other sites
gnattle Newbie

gnattle

Posted
  • Author
Posted
back office screenshot + .tpl code will be really helpfull

 

I have attached a few shots of the modules for the social media, stores block (as per your post on the other thread) and the CMS Menu. Also added all modules so you can see if there are any different to the standard theme in case this helps.

Also the tpl file for the social media.

Cheers :)

Link to comment
Share on other sites
gnattle Newbie

gnattle

Posted
  • Author
Posted

Hi gnattle, make sure that when you select the screenshot you want to add, you also have to click on the button "Attach This File"

 

Then you can use another button called "Add to Post" but that is optional... I can not see that you attached anything.

 

I added them to my original post. :)

Link to comment
Share on other sites
gnattle Newbie

gnattle

Posted
  • Author
Posted

Interesting, it does not show me the pictures though. They show broken link pictures once I open the download.

 

There was loads so I tried to put them all together!

 

I will do the two mains ones. Attached.

Link to comment
Share on other sites
gnattle Newbie

gnattle

Posted
  • Author
Posted

all of this is because you use non-default template with some modifications of the structure etc.

hope that now everything will be OK

I have managed to sort a lot out so far. This forum has been great!

I still cannot change google to pintrest through?

My tpl file code is as follows:

 

 

<div id="social_block">

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

<ul>

{if $facebook_url != ''}<li class="facebook"><a href="{$facebook_url}"><img src="{$img_dir}calceus/facebook-versatile.png" alt="facebook" width="40" height="40" onmouseover="this.src='{$img_dir}calceus/facebook-versatile_2.png';" onmouseout="this.src='{$img_dir}calceus/facebook-versatile.png';" /></a></li>{/if}

{if $twitter_url != ''}<li class="twitter"><a href="{$twitter_url}"><img src="{$img_dir}calceus/twitter-versatile.png" alt="twitter" width="40" height="40" onmouseover="this.src='{$img_dir}calceus/twitter-versatile_2.png';" onmouseout="this.src='{$img_dir}calceus/twitter-versatile.png';" /></a></li>{/if}

{if $pintrest_url != ''}<li class="pinterest"><a href="http://pinterest.com/acjewellery/">Pinterest</a></li><$img_dir}calceus/pintrest=versatile.png" alt=pintrest heigh="40" onmouseover="this.src='{$img_dir}calceus/pintrest-versatile_2.png';" onmouseout="this.src='{$img_dir}calceus/pintrest-versatile.png';" /></a></li>{/if}

</ul>

</div>

Link to comment
Share on other sites
gnattle Newbie

gnattle

Posted
  • Author
Posted (edited)

okay, so as far as i understand ,you used your code in the blockuserinfo.tpl file? what file you changed?

located in the modules/blockuserinfo directory?

I change the tpl file under the module blocksocial. I change it in the default and theme just to be safe

 

Do I need to do it in the userinfo tpl file also?

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

gnattle

Posted
  • Author
Posted

hello

 

definitely, i said before that these buttons are attached to the blockuserinfo module,

not to the blocksocial

 

in this case you have to edit blockuserinfo module not blocksocial

Great thanks will try that now!

Link to comment
Share on other sites
gnattle Newbie

gnattle

Posted
  • Author
Posted

Below is the tpl file code for blockuserinfo

 

I cant see anything to do with facebook etc?

 

DO I just add the lines from the other one?

 

 

<!-- Block user information module HEADER -->

<div id="header_user">

<ul id="header_nav">

{if !$PS_CATALOG_MODE}

<li id="shopping_cart">

<a href="{$link->getPageLink($order_process, true)}" title="{l s='Your Shopping Cart' mod='blockuserinfo'}">{l s='Cart:' mod='blockuserinfo'}

<span class="ajax_cart_quantity{if $cart_qties == 0} hidden{/if}">{$cart_qties}</span>

<span class="ajax_cart_product_txt{if $cart_qties != 1} hidden{/if}">{l s='product' mod='blockuserinfo'}</span>

<span class="ajax_cart_product_txt_s{if $cart_qties < 2} hidden{/if}">{l s='products' mod='blockuserinfo'}</span>

<span class="ajax_cart_total{if $cart_qties == 0} hidden{/if}">

{if $cart_qties > 0}

{if $priceDisplay == 1}

{assign var='blockuser_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}

{convertPrice price=$cart->getOrderTotal(false, $blockuser_cart_flag)}

{else}

{assign var='blockuser_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}

{convertPrice price=$cart->getOrderTotal(true, $blockuser_cart_flag)}

{/if}

{/if}

</span>

<span class="ajax_cart_no_product{if $cart_qties > 0} hidden{/if}">{l s='(empty)' mod='blockuserinfo'}</span>

</a>

</li>

{/if}

<li id="your_account"><a href="{$link->getPageLink('my-account', true)}" title="{l s='Your Account' mod='blockuserinfo'}">{l s='Your Account' mod='blockuserinfo'}</a></li>

</ul>

<p id="header_user_info">

{l s='Welcome' mod='blockuserinfo'}

{if $logged}

<a href="{$link->getPageLink('my-account', true)}" class="account"><span>{$cookie->customer_firstname} {$cookie->customer_lastname}</span></a>

<a href="{$link->getPageLink('index', true, NULL, "mylogout")}" title="{l s='Log me out' mod='blockuserinfo'}" class="logout">{l s='Log out' mod='blockuserinfo'}</a>

{else}

<a href="{$link->getPageLink('my-account', true)}" class="login">{l s='Log in' mod='blockuserinfo'}</a>

{/if}

</p>

</div>

<!-- /Block user information module HEADER -->

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

its because your theme override this file.

take a look: http://www.radiator....ockuserinfo.tpl

 

if theme override the module file, you have to change file located in the themes directory.

in file that i mentioned above you've got:

<ul class="block_socials">
<li class="first_item">
<a href="{l s='Url Facebook' mod='blockuserinfo'}" title="{l s='Send on Facebook' mod='blockuserinfo'}" target="_blank"><img class="social" src="{$img_dir}Facebook.png" alt="Facebook" width="32" height="32" onmouseover="this.src='{$img_dir}Facebook-hover.png';" onmouseout="this.src='{$img_dir}Facebook.png';" /></a> 
<a href="{l s='Url Twitter' mod='blockuserinfo'}" title="{l s='Send on Twitter' mod='blockuserinfo'}" target="_blank"><img class="social" src="{$img_dir}Twitter.png" alt="Twitter" width="32" height="32" onmouseover="this.src='{$img_dir}Twitter-hover.png';" onmouseout="this.src='{$img_dir}Twitter.png';" /></a> 
<a href="{l s='Url Google' mod='blockuserinfo'}" title="{l s='Send on Google' mod='blockuserinfo'}" target="_blank"><img class="social" src="{$img_dir}Google.png" alt="Google" width="32" height="32" onmouseover="this.src='{$img_dir}Google-hover.png';" onmouseout="this.src='{$img_dir}Google.png';" /></a>
</li>
</ul>

 

and this is the code for social icons that you have in the top right section

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

gnattle

Posted
  • Author
Posted

its because your theme override this file.

take a look: http://www.radiator....ockuserinfo.tpl

 

if theme override the module file, you have to change file located in the themes directory.

in file that i mentioned above you've got:

<ul class="block_socials">
<li class="first_item">
<a href="{l s='Url Facebook' mod='blockuserinfo'}" title="{l s='Send on Facebook' mod='blockuserinfo'}" target="_blank"><img class="social" src="{$img_dir}Facebook.png" alt="Facebook" width="32" height="32" onmouseover="this.src='{$img_dir}Facebook-hover.png';" onmouseout="this.src='{$img_dir}Facebook.png';" /></a> 
<a href="{l s='Url Twitter' mod='blockuserinfo'}" title="{l s='Send on Twitter' mod='blockuserinfo'}" target="_blank"><img class="social" src="{$img_dir}Twitter.png" alt="Twitter" width="32" height="32" onmouseover="this.src='{$img_dir}Twitter-hover.png';" onmouseout="this.src='{$img_dir}Twitter.png';" /></a> 
<a href="{l s='Url Google' mod='blockuserinfo'}" title="{l s='Send on Google' mod='blockuserinfo'}" target="_blank"><img class="social" src="{$img_dir}Google.png" alt="Google" width="32" height="32" onmouseover="this.src='{$img_dir}Google-hover.png';" onmouseout="this.src='{$img_dir}Google.png';" /></a>
</li>
</ul>

 

and this is the code for social icons that you have in the top right section

 

That worked - thank you so much!

Link to comment
Share on other sites
gnattle Newbie

gnattle

Posted
  • Author
Posted (edited)

In Theme/Module/Blockuserinfo the tpl file comes with this:

 

 

 <ul class="block_socials">

<li class="first_item">
<a href="{l s='Url Facebook' mod='blockuserinfo'}" title="{l s='Send on Facebook' mod='blockuserinfo'}" target="_blank"><img class="social" src="{$img_dir}Facebook.png" alt="Facebook" width="32" height="32" onmouseover="this.src='{$img_dir}Facebook-hover.png';" onmouseout="this.src='{$img_dir}Facebook.png';" /></a> 
<a href="{l s='Url Twitter' mod='blockuserinfo'}" title="{l s='Send on Twitter' mod='blockuserinfo'}" target="_blank"><img class="social" src="{$img_dir}Twitter.png" alt="Twitter" width="32" height="32" onmouseover="this.src='{$img_dir}Twitter-hover.png';" onmouseout="this.src='{$img_dir}Twitter.png';" /></a> 
<a href="{l s='Url Google' mod='blockuserinfo'}" title="{l s='Send on Google' mod='blockuserinfo'}" target="_blank"><img class="social" src="{$img_dir}Google.png" alt="Google" width="32" height="32" onmouseover="this.src='{$img_dir}Google-hover.png';" onmouseout="this.src='{$img_dir}Google.png';" /></a>
</li>


</ul>

 

So I changed it to this:

 

 <ul class="block_socials">

<li class="first_item">
<a href="https://www.facebook.com/pages/Anna-Calvert-Jewellery/177478928971023" title="{l s='Send on Facebook' mod='blockuserinfo'}" target="_blank"><img class="social" src="{$img_dir}Facebook.png" alt="Facebook" width="32" height="32" onmouseover="this.src='{$img_dir}Facebook-hover.png';" onmouseout="this.src='{$img_dir}Facebook.png';" /></a> 
<a href="https://twitter.com/Anna_Calvert" title="{l s='Send on Twitter' mod='blockuserinfo'}" target="_blank"><img class="social" src="{$img_dir}Twitter.png" alt="Twitter" width="32" height="32" onmouseover="this.src='{$img_dir}Twitter-hover.png';" onmouseout="this.src='{$img_dir}Twitter.png';" /></a> 
<a href="http://pinterest.com/acjewellery/" title="{l s='Send on Pintrest' mod='blockuserinfo'}" target="_blank"><img class="social" src="{$img_dir}Pintrest.png" alt="Pintrest" width="32" height="32" onmouseover="this.src='{$img_dir}Pintrest-hover.png';" onmouseout="this.src='{$img_dir}Pintrest.png';" /></a>
</li>
</ul>

 

It then overwrites the social block in the back office

Edited by Benjamin Utterback (see edit history)
Link to comment
Share on other sites
benjamin utterback Newbie

benjamin utterback

Posted
Posted

Cool.

 

In the default template. You would make these changes in your /modules/blocksocial/blocksocial.tpl

 

BUT

 

if you installed a new theme, it may change the structure. In your case, inspecting the elements of your website showed that these buttons were being displayed in your User Info Block.

 

Once we found this out, you went to themes/yourtheme/modules/blockuserinfo/blockuserinfo.tpl and changed the file there.

 

Is all of this correct?

Link to comment
Share on other sites
gnattle Newbie

gnattle

Posted
  • Author
Posted

Cool.

 

In the default template. You would make these changes in your /modules/blocksocial/blocksocial.tpl

 

BUT

 

if you installed a new theme, it may change the structure. In your case, inspecting the elements of your website showed that these buttons were being displayed in your User Info Block.

 

Once we found this out, you went to themes/yourtheme/modules/blockuserinfo/blockuserinfo.tpl and changed the file there.

 

Is all of this correct?

 

Yes that is correct.

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