Pin it button not alligned correctly…

similar question — is there a way to change the location of the pin it button? i’d like to put it centered at the top or just centered in the middle of the image. i’ve seen other plugins with the ability to set where you want the pin it button to appear. is this a feature request? or is there an easy hack that someone could detail for me – where to add and what to add?

thanks!

SOLUTION!

If you want to change the position of your button, you will need to do this:

STEP 1
Go to your plugin folder and open the stylesheet called ppibfi_pinterest.css and find this class:

.pibfi_pinterest {
	position: relative;
	display: block;
}

Change that to:

.pibfi_pinterest {
	position: relative;
	display: inline-block;
}

STEP 2
You will need to change the class .pibfi_pinterest .xc_pin to change the position of your Pin button on images.

.pibfi_pinterest .xc_pin {
	width: 64px; height: 64px; /* Change this to whatever size your button is. */
	background: url('ppibfi_button.png') no-repeat; /* This is the buttons image. Image can be found in the plugin folder */
	position: absolute;
	top: 50%; /* This will place it right in the middle of the image */
	left: 50% !important; /* This will place it right in the middle of the image */
	margin: -32px 0 0 -32px; /* This margin (top and left) needs to be half of your image width/height. In this case my image is 64x64px. So half is 32px.*/
	opacity: 0;
	cursor: pointer;
	display: none;
}

This code worked great for center-aligned images and images that had no alignment. But images that are left-aligned or right-aligned end up losing their alignment. Any ideas on how to fix that?

I’ve been underwhelmed by this plugin. I did this previously to static HTML using jQuery and it almost always got the button in the corner desired. This system of the width of the content column, my content column has no fixed width.

I guess I’ll have to edit some CSS, when I did this last time I found IE 8 had trouble with left but could handle right…