For more complete control of the AvatarBlocks display, you can override the theme_avatar_blocks_avatar function in your theme's template.php file. Using this approach, you can alter the display in a variety of ways. For more information about Drupal theme overrides, refer to this drupal.org handbook page.

The basic idea is that Drupal (and Drupal modules) provide a lot of default functionality in the form of themeable functions. If you want to alter this functionality, copy the default themeable function into your theme's template.php file, change the name from theme_function-name to yourthemename_function-name, and alter the function as you wish.

As an example, the Who's Online block to the right was produced using a combination of a theme override and some custom CSS code. The theme override function was added to our theme's template.php file. The additional CSS code was added to our theme's style.css file

This code was added to the theme's template.php file:

function whitejazz_avatar_blocks_avatar($avatar_link, $name, $userlink) {
  if ($avatar_link) {
    $output =  '<div class="avatar-user-block">';
    $output .= '<div class="userpicture">';
    $output .= $avatar_link;
    $output .= '</div>';
    $output .= '<div class="username">';
    $output .= $userlink;
    $output .= '</div>';
    $output .= '<div style="clear:both"></div>';
    $output .= '</div>';
  }
  return $output;
}

This code was added to the themes style.css file:

.avatar-user-block {
  border: 1px solid #000;
  background: #ddd;
  margin: 2px 0;
  padding: 3px;
}

.username {
  float: left;
  margin-left: 10px;
}