Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Plugins & Atahualpa »

Pinterest Button CSS Help....Overlooking Something Simple?


  #1  
Old Mar 17, 2013, 07:07 AM
theadventurebite
 
136 posts · May 2010
Hey Guys,

I'm sure I must be overlooking something super simple here.

Here's the deal, I'm using the Pinterest Button For Images plugin which floats a little pin me button over each image.

But I have set up my CSS to automatically center my images unless I specify it not to. I did this with a CSS insert like so:

Code:
padding: 5px;
border: none;
display: block; 
margin-left: auto;
margin-right: auto;
This plugin doesn't seem to be recognizing that at all though so it is floating the image over where it thinks the image should be (left aligned) because it doesn't have a center align command in each image link.

I'm thinking perhaps I need to add another section of CSS to this code in the plugin but I'm a little stumped on where to start.

This is the bit of CSS in the Pinterest plugin that I am working with:

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

.pibfi_pinterest .xc_pin {
	width: 64px; height: 64px; /* Please note that the button is 80px x 50px. If you use a different size button, change this */
	background-image: url('ppibfi_button.png'); background-repeat: none; /* This is the buttons image. Image can be found in the plugin folder */
	position: absolute;
	display: block;
	top: 5px;
	margin-left: -1px;
	opacity: 0;
	cursor: pointer;
	display: none;
}
.pibfi_pinterest img.left + .xc_pin {
	margin-left: 0;
}
Many thanks for any tips!
  #2  
Old Mar 17, 2013, 11:31 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what is the URL pointing to the issue?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 17, 2013, 12:22 PM
theadventurebite
 
136 posts · May 2010
Www.theadventurebite.om/food
  #4  
Old Mar 17, 2013, 03:20 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
The element
HTML Code:
<span class="xc_pin" onclick="pin_this(event, 'http://pinterest.com/pin/create/button/?url=http://theadventurebite.com/best-quiche-recipe/&media=http://farm9.staticflickr.com/8377/8529567416_bbb832731f_z.jpg&description=Best Quiche Recipe')" style="display: block; left: 586px;"> </span>
has some in-line CSS which takes precidence. If you want to change the 'left', you'll need to add '!important' to it.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; Mar 17, 2013 at 07:48 PM.
  #5  
Old Mar 17, 2013, 07:36 PM
theadventurebite
 
136 posts · May 2010
I see that, I'm not entirely sure what to do with it though.

This is the code within the PHP that is calling that:

Code:
<span class="pibfi_pinterest">
		<img%1$ssrc="%2$s.%3$s"%4$s>
			<span class="xc_pin" onclick="pin_this(event, \''.
			$pinterest_base_url.
			'?url='.esc_url($post_url).
			'&media=%2$s.%3$s'.'&description='.$post_title.'\')">
			</span>
		</span>';
I'm not entirely sure where it is picking up that style code as well as the width of what it thinks the images are....the 586px is not the width of the images they are 640x480.
  #6  
Old Mar 18, 2013, 03:37 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Are you trying to float the pintrest button so it is centered on the image?
when I look at teh site, the image is centered and the pintrest button is at the top right
have you asked the plugin author about the inline CSS?
and exactly which pintrest plugin are you using? (url)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 18, 2013 at 03:47 AM.
  #7  
Old Mar 18, 2013, 03:55 AM
theadventurebite
 
136 posts · May 2010
Hi juggle dad,

I have emailed the developer with no reply. The button is supposed to float 15px margin from the top and 15px from the right hand side of the images so top right corner. To do this margin right does not work for some reason, he is using margin left with a negative margin.

The plugin is http://wordpress.org/extend/plugins/...on-for-images/

When viewing my site what I see is the pin button in the top right for horizontal images but in the middle top for vertical images.
  #8  
Old Mar 18, 2013, 04:53 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
horizontal images but in the middle top for vertical images.
can you point to two examples?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Mar 18, 2013, 06:12 AM
theadventurebite
 
136 posts · May 2010
Yes, any of the images other than the very top one on the original link (I was messing with it last night). Or any images on this link: http://theadventurebite.com/poached-...aka-shakshuka/
  #10  
Old Mar 18, 2013, 06:54 AM
theadventurebite
 
136 posts · May 2010
The top image that looks correct on the main page is how I want it to appear but that only happens if I go in and manually set the image to be center aligned.
  #11  
Old Mar 18, 2013, 07:05 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
The plugin has a jscript that finds the imagewidth and subtracts the image width and sets the left there. You are going to have to modify that code.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Has anybody gotten Pinterest to work with Atahualpa? jodymace Atahualpa 3 Wordpress theme 2 Jan 14, 2013 05:56 PM
Add Pinterest Button to top of post kanga Atahualpa 3 Wordpress theme 1 Nov 2, 2012 10:15 PM
[SOLVED] css ata question: should be simple... my does my submit button resize? derekwbeck Atahualpa 3 Wordpress theme 6 Sep 20, 2012 12:07 PM


All times are GMT -6. The time now is 09:19 PM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.