WordPress.org

1. Florence
   Member
   Posted 7 months ago #
   

   Hello! I have this weird effect on my cooking blog (http://www.cookingblondes.nl/) I'm using Author Avatar List, Login with AJAX and User Avatar to display avatars.

   In my footer I have a list of top author avatars, but for some reason there seems to be additional padding to the right side of the images. You can see it when you hover over them with your mouse.
   I have tried overriding the plugin CSS in my stylesheet but to no effect.

   /*** Override author avatar list ***/
   .author-list .user {
           padding:0px;
    	display: inline-block;
           vertical-align: top;
           /* IE 7 */
           zoom: 1;
   	        *display: inline;
   }
   
   .author-list .avatar img {
   	float: none;
   	padding:4px;
   	border:1px solid #E5E5E5;
   }

   A similar thing is happening to Login with Ajax. I noticed it when I tried adding a boder to the avatar. You have to be logged in to see it so I created this temporary account so you can see what's going on.

   Username: Testbunny
   Password: test

   /*** Override Login with AJAX ***/
   #LoginWithAjax_Avatar { width:50px; padding:4px; border:1px solid #E5E5E5; }

   I'm not sure what exactly is causing the effect, but I think it has something to do with my theme. I would really appreciated it if someone could take the time to take a look :)

   Thanks in advance,
   - Florence

2. Florence
   Member
   Posted 7 months ago #
   

   So my theme has a built in Flickr widget that is displaying images correctly. If only I could somehow make Author Avatar List and Login with Ajax display author avatars the same way..

   Here's the CSS for the Flickt widget:

   /* Flickr widget */
   		.flickr_badge_image { float:left; margin-right:15px; margin-bottom:13px; }
   		.flickr_badge_image img { padding:4px; border:1px solid #E5E5E5; }
   		#footer .widget .flickr_badge_image { margin-right:5px; margin-bottom:6px; }
   		#footer .widget .flickr_badge_image img { width:50px; height:50px; background:#FFF; }

   Thoughts?

3. simonx001
   Member
   Posted 7 months ago #
   

   You should change
   "http://www.cookingblondes.nl/wp-content/themes/foodpress/style.css"

   at line around 280...the margin-right: 14px; to margin-right: 0px;

   .avatar {
   float: left;
   margin-right: 14px;
   }

4. Florence
   Member
   Posted 7 months ago #
   

   Simon you are awesome! That totally worked!!! I must have read the freakin stylesheet at least a dozen times and I did not see it. Thank you!

   Do you think you could give me a hand with Login with Ajax as well?

   I've tried playing with these settings:...
   

   /*** Override Login with AJAX ***/
   #LoginWithAjax_Avatar { width:50px; padding:4px; border:1px solid #E5E5E5; }

   ..but the width seems to be fixed. Only height of the border will change using that snippet. The padding should be 4, and it is on the left and on the bottom. But it looks like it's more on the top and right side of the avatar. Both the height and width are currently set so 0.

5. simonx001
   Member
   Posted 7 months ago #
   

   Try and add semicolon between "border:1px " and " solid #E5E5E5;"..like below.

   LoginWithAjax_Avatar { width:50px; padding:4px; border:1px; solid #E5E5E5; }

6. Florence
   Member
   Posted 7 months ago #
   

   If I do that the border dissapears alltogether. Maybe the stylesheet is not overriding the plugin css.

   The plugin css says:
   `#LoginWithAjax_Avatar { width:60px; padding-right:10px; }

   And those are exactly the two things I can't change

   I'll go ahead and ask my question in the plugin support forum. Thanks for all the help Simon!

Reply

You must log in to post.