CODEWITHSUNDEEP
csspinterest
Rob C
Rob C

Reputation: 920

Is it possible to position the Pinterest hover button

I am using the Pinterest hover button widget for a client website.

https://developers.pinterest.com/on_hover_pin_it_buttons/

By default it appears at the top left of all images. It doesn't look like their script allows for positioning. Is it possible to override this with CSS?

Thanks

Upvotes: 0

Views: 1495

Answers (2)

Harvey Ball
Harvey Ball

Reputation: 131

Yes I believe that it is. If you generate the code you will see that the pin it button is created as a span and then positioned with inline styles, I am guessing dynamically with each image.

In the example I looked at it had the class xc_pin, so I will use that for my example but bear in mind that the class you have may be different.

As I mentioned, the span is styled inline, so to overwrite it you will have to use !important, else the styles will be overwritten. Here is how your code could look: 

xc_pin {
   left: 20px !important;
   top: 50px !important;
}

I hope that this helps!

EDIT WITH WORKING JSFIDDLE

After playing around with the css I managed to find a way to target it using the css sibling selector, here is the jsfiddle: https://jsfiddle.net/2xzxgvfw/19/

Hope this solves your issue!

Upvotes: 2

Rotan075
Rotan075

Reputation: 2615

I do not know how you generated the code but I think there should be somewhere a file called: ppibfi_pinterest.css in this file look for the line:

.pibfi_pinterest .xc_pin{}

there you should find something like: top: 5px; margin-left: -1px; if you adjust this, you should be able to modify the position of the pinterest icon

Upvotes: 0

Related Questions