WordPress.org

Ready to get started?Download WordPress

Forums

Pinterest Pin It Button For Images
Pin it button not alligned correctly... (5 posts)

  1. beautyinabottle
    Member
    Posted 1 year ago #

    Hi,

    I am trying to use this plugin, but when I activate it, the pin it buttons sometimes show on the right side of images whilst on other images in the same post on the left??

    The content width of my single post page is 1024 pixels and this is what I entered in the settings for the plugin. Any idea how to resolve this problem?

    Thanks in advance!

    My blog can be found at: http://www.beautyinabottle.be

    http://wordpress.org/extend/plugins/pinterest-pin-it-button-for-images/

  2. max900
    Member
    Posted 1 year ago #

    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!

  3. francdore
    Member
    Posted 1 year ago #

    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;
    }
  4. digitalkward
    Member
    Posted 12 months ago #

    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?

  5. muskie
    Member
    Posted 11 months ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.