WordPress.org

Ready to get started?Download WordPress

Forums

Add Local Avatar
Admin bar avatar wrong size (19 posts)

  1. Bodhipaksa
    Member
    Posted 3 years ago #

    When I upgraded to 3.1 and the new admin bar appeared, the toolbar avatar was way too large. Disabling the plugin restored the avatar to the correct size. Something in the plugin is causing a problem. I can disable the admin bar, but it would be great to have the plugin fixed to work with 3.1.

  2. freeomega
    Member
    Posted 3 years ago #

    Hi,

    I do have the same issue as well. Let me know if you find any solution.

    Thanks!

  3. dbvista
    Member
    Posted 3 years ago #

    Me too -- the avatar in the top left of the page is so large it covers the blog title. IMHO the avatar shouldn't even be there -- a simple user menu (like on normal blog pages) would be sufficient.

  4. Bodhipaksa
    Member
    Posted 3 years ago #

    The avatar is only supposed to be 16px square, so it would normally be a very unobtrusive design item.

  5. dbvista
    Member
    Posted 3 years ago #

    Our avatars are larger than 16px, but everywhere else on the site they are being scaled down to 16px. Only the admin bar displays the avatars as full size. Maybe the admin bar should be using "16px" explicitly as the size.

  6. Bodhipaksa
    Member
    Posted 3 years ago #

    I haven't had that happen on my site, fortunately. I believe the admin bar does specify 16px as the size of the avatar, but the plugin conflict is throwing a spanner in the works.

    You can turn off the admin bar by visiting your profile. Users who are not logged in should hopefully see the avatars the correct size in any event. You can also turn off the admin bar globally by putting some piece of code in your theme's functions.php file. Hunt around in the forum and you'll find the code.

  7. dbvista
    Member
    Posted 3 years ago #

    I found the problem on our site. We have an Avatar plugin that is returning not only the image, but an 'A' tag that makes the image into a link. In the admin bar, this produces a nested 'A' tag which breaks things. So instead of this:

    <li id="wp-admin-bar-my-account-with-avatar" class="menupop">
     <a href="http://myblog/wp-admin/network/profile.php">
      <span>
        <img src="http://avatarserver/jsmith.jpg" width="16" alt=""/>
       jsmith
      </span>
     </a>
    </li>

    our site displays this:

    <li id="wp-admin-bar-my-account-with-avatar" class="menupop">
     <a href="http://myblog/wp-admin/network/profile.php">
      <span>
       <a href="http://homepages/jsmith">
        <img src="http://avatarserver/jsmith.jpg" width="16" alt=""/>
       </a>
       jsmith
      </span>
     </a>
    </li>

    Time to modify the plugin.

  8. Ben Huson
    Member
    Posted 3 years ago #

    Here's a temporary fix.
    Try adding the following to your theme's functions.php file:

    function my_admin_head() {
    	echo '<style type="text/css">#wp-admin-bar-my-account-with-avatar img { width:16px; height:16px; }</style>';
    }
    add_action( 'admin_head', 'my_admin_head' );
  9. Ben Huson
    Member
    Posted 3 years ago #

    Sorry, that only changes it in the admin, this changes it everywhere:

    function my_admin_head() {
    	echo '<style type="text/css">#wp-admin-bar-my-account-with-avatar img { width:16px; height:16px; }</style>';
    }
    add_action( 'admin_head', 'my_admin_head' );
    add_action( 'wp_head', 'my_admin_head' );
  10. Bodhipaksa
    Member
    Posted 3 years ago #

    It's times like these I really appreciate the work plugin designers do. I rely on this plugin, and so I've donated $25 to the author. I'd encourage other people to do likewise: http://www.sterling-adventures.co.uk/blog/2008/03/01/avatars-plugin/

  11. dbvista
    Member
    Posted 3 years ago #

    Ben: Thanks for the suggested fix. I tried it too (hard-coding 16px) but it doesn't work in my case because of the two nested "A" tags, which seem to throw off both Firefox and Internet Explorer. I would guess it's illegal HTML.

  12. Bodhipaksa
    Member
    Posted 3 years ago #

    Didn't work for me, either. Previously, I'd also tried simply adding a similar style declaration to the end of my stylesheet, but that didn't work. Unlike dbvista, I don't have nested links.

    What did work for me was to add the following to the end of wp-includes/css/admin-bar.css

    #wp-admin-bar-my-account-with-avatar img { width:16px; height:16px; }

  13. dbvista
    Member
    Posted 3 years ago #

    I created an awful hack to distinguish the usual avatars (in comments) from the one in the Admin Bar.

    That, together with Haecceity's CSS above, makes everything work out.

  14. peterwsterling
    Member
    Plugin Author

    Posted 3 years ago #

    Version 9.1 addresses this and other issues to work with WP 3.1. :-)

  15. Bodhipaksa
    Member
    Posted 3 years ago #

    Thanks, Peter. That was quick work.

  16. kgkaraoke
    Member
    Posted 3 years ago #

    @Ben Huson
    We pasted the code that you showed in your second example into our theme's functions.php code. PERFECT! Thank you very much!

  17. richarduk
    Member
    Posted 3 years ago #

    Ditto thanks for the code.

    I spent a long time trying various CSS hacks. Perhaps the image for the toolbar should have its own class, not a generic class.

    I'd rather have the toolbar turned off by default rather than having to find where it is in the settings, or add a piece of code to functions.php

    I can't understand the image sizing CSS. I thought you had to have units?

    height='16' width='16'

    The only problem with this sizing (if it's valid) is surely that it makes it impossible to over ride with one of the image classes, since this is more specific than the preceding classes?

  18. Bodhipaksa
    Member
    Posted 3 years ago #

    Did you try updating to the latest version of the plugin? The update worked for me. If it's still causing problems you should let the plugin owner know.

  19. kfawcett
    Member
    Posted 3 years ago #

    Thanks Ben! Worked like a charm.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic