Couple of problems with new install

I am copying and pasting the code you gave me, so why would it be different? This is driving me crazy

I just copied and pasted your code again, because I saw how the first line didn’t match up.

I don’t know how that happened, because I don’t type this code, I copy and paste it.

Screen shot attached again, and once again, this code did NOT work.

Attachments:

You must be logged in to view attached files.

But the code works well now https://gyazo.com/f0c5be606fca795382c1a35cbd3fc7ac

The code is NOT working yet. Here is another screenshot from our view.

We looked at the pages in Safari, Chrome AND Firefox, and the “P” in the icon doesn’t show at all.

How are you viewing it, that it shows?

Attachments:

You must be logged in to view attached files.

We checked in all browsers, even on mobile devices and it always works well for us. Try to clear your browser cache or check on some other device.

We HAVE cleared our cache, and we have looked on two different laptops, a desktop computer and both of our phones, and the Pinterest icon (and code) DOES NOT work on any of them. We’ve also looked in Chrome, Firefox and Safari and the icon doesn’t show correctly in any of those browsers, on any of the computers. So, sorry, I don’t believe that you are seeing it “correctly” anywhere.

I am attaching screen shots again, from both sites.

On my phone, for the “live site” blog, all the other icons are grey, and on one line, and the incorrect “pin it” Pinterest icon is showing there, in red, superscripted. The screen shot of the laptop view, for the same page, first showed the “pin it” icon, instead of the logo icon, which is also in red and superscripted, above the grey line of the other icons and then showed as the correct Pinterest icon, subscripted, and now has resolved back to the “Pin it” icon, superscripted.

When you click in to the live site blog post, on my phone, all the icons show in color, on one line, but the Pinterest icon was just a red circle and is “super-scripted.” Same thing shows on the laptop view (screen shot attached.) Now this has changed, while I have been writing this reply, and the correct Pinterest icon is showing subscripted, on the laptop view.

So, not only is the Pinterest icon and code still NOT working, it is showing differently on both sites, and in mobile and laptop view, and seems to be “changing” for no reason whatsoever!

Screen shots attached.

Attachments:

You must be logged in to view attached files.

Hello,

It is the strangest issue we ever faced. But your screenshots shows some parts of the website that we can’t even find. Here are some screenshots how they look for us

https://gyazo.com/398a8462668bd301143b918c51374e8c
https://gyazo.com/5414290923ae94645a5b740cb769c796

But we can’t find any of the problems you demonstrated on your screenshots.

Could you please check again is it happen because of that widget or maybe something else? We don’t know how to fix this. We can give you more CSS code to correct it but you say that it doesn’t work on your browsers and devices. We can create a video showing how it looks on all computers in our office. We are out of ideas what else to do.

You are forgetting that we have been discussing TWO different websites. One that is in dev (Luxe) and one that is live (Healing Stones.)

Both sites have the same problems with this Pinterest code.

I don’t know how you are seeing it correctly, when it doesn’t show correctly at all, to us, and I have provided you with a lot of screenshots throughout this thread.

On the front page of the blogs, the icons are supposed to be “grey” so your second sample shows the Pinterest icon, incorrectly. It is showing red, in a line up of gray icons!

I showed you that same problem in the second and fourth screen shot above, from the live site. The second screen shot shows the line of grey icons with the “Pin It” icon, in red, superscripted above the line of other icons. In the fourth screen shot, the icon changed, to the P in the red circle, but it was below the line of other grey icons.

If you look on your demo pages, you don’t show a line of gray icons, with just one red icon. And none of the icons are on separate lines.

This is driving me crazy as well. I want to keep the Pinterest widget, and since your theme can’t seem to handle the icons, I will just have to turn them off, so my pages don’t look crazy.

You say you see these icons perfectly, but we are seeing two separate websites, with icons all over the place or missing icons, still. I will include the link to the live website, that you forgot about. You had the url from earlier in this conversation.

Thanks.

Try to edit the file inc/shortcodes/social.php, find this code

<a href="<?php echo ($type == 'follow') ? esc_url(woodmart_get_opt( 'pinterest_link' )) : 'http://pinterest.com/pin/create/button/?url=' . get_the_permalink() . '&media=' . $thumb_url[0]; ?>" target="<?php echo esc_attr( $target ); ?>" class="<?php if( $tooltip == "yes" ) echo 'woodmart-tooltip'; ?>">

and replace with this one

<a data-href="<?php echo ($type == 'follow') ? esc_url(woodmart_get_opt( 'pinterest_link' )) : 'http://pinterest.com/pin/create/button/?url=' . get_the_permalink() . '&media=' . $thumb_url[0]; ?>" target="<?php echo esc_attr( $target ); ?>" class="<?php if( $tooltip == "yes" ) echo 'woodmart-tooltip'; ?>">

Then, put this code snippet to the Custom JS on document ready

jQuery(document).on('click', '.social-pinterest > a', function(e){
	e.preventDefault();
	window.open(jQuery(this).data('href'),'_blank');
});

And this part to the custom CSS

.social-pinterest a {
	cursor: pointer;
}

Regards

OMG. My head is spinning with all that code.

Am I supposed to add this to both websites?

What about the code you already gave me, that didn’t work. Do I have to go find that code and delete it?

I have such a headache from this already….

You can add it to websites where do you want to change this behavior. The old snippet is no longer needed.

[Author]

Posts