Align author avatar with author info? Formatting problems.

  • Resolved dewski007

    (@dewski007)


    15 years, 7 months ago

    Hello! My site is 1337life.com and I am trying to get an author avatar to appear next to the post info but am having trouble with the styling and alignment. Ideally, I’d like the author’s avatar to populate exactly where that little “user” icon is to the left of the “posted by <author>” info. I’d like to scrap that little “user” icon completely in favor of the avatar. I use the “Avatars” plugin, so I’m not sure if that affects the code used.

    I tried using
    <?php global $post; ?><?php echo get_avatar($post->post_author); ?>
    before
    <div class="date"><span class="author">Posted by <?php the_author(); ?></span> <span class="clock"> On <?php the_time('F - j - Y'); ?></span></div>

    And it works, but I’m not sure how to get the formatting the way I’d like it. Can anyone give me a couple pointers? Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)

  • dewski,

    The small icon needs to be removed from the css code under class of .author. Then add the avatar code just above the author code like so:

    <div class="date">
 <?php global $post; ?><?php echo get_avatar($post->post_author); ?>
 <span class="author">Posted by <?php the_author(); ?></span>
 <span class="clock"> On <?php the_time('F - j - Y'); ?></span>
</div>

    From what I can tell no floats will be required but if they are you will need to adjust the avatar code for a left float. Somthing to the effect of:

    .date .avatar {
   width: 16px;
   height: 16px;
   float: left;
   display: block;
   }
    Thread Starter dewski007

    (@dewski007)

    Thanks for the quick help, doc. Looks like a good start. I’ll see if I can’t take care of the rest of the tweaking. Much thanks!

    doc4 and/or dewski007

    Sorry to bother you but I have the same problem as dewski007 but after reading doc4’s suggestion I still do not understand how to make the avatar align left. I’m a newbie with php. Can you provide the entire script, please? So far, I have only:
    <?php echo get_avatar($post->post_author); ?>
    and the avatar automatically goes right.

    I do not understand where I should put:

    .date .avatar {
    width: 16px;
    height: 16px;
    float: left;
    display: block;
    }

    on my page.
    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Align author avatar with author info? Formatting problems.’ is closed to new replies.