3. Themeing AvatarBlocks

This section describes the options available should you want to modify the appearance of AvatarBlocks output. You can customize simple aspects of the display using CSS, or you can take control of the entire layout using theme overrides.

3.1 Themeing Using CSS

The AvatarBlocks module wraps each individual user's avatar display with a div that has a class name of userpicture. You can use the following selectors to target CSS directives:

  • .userpicture
  • .userpicture a
  • .userpicture a img

AvatarBlocks provides a very simple default style sheet that contains the following CSS code:

.userpicture {
  float: left;
  line-height: 0;
}

.userpicture a {
  display:block;
  border: 2px solid #fff;
}

.userpicture a:hover {
  border: 2px solid #bbb;
}

.userpicture img {
  margin: 0;
}

You can override or amend these styles in your theme style sheet to change the appearance of the default AvatarBlocks display.

The blocks on this demo site use the default AvatarBlocks styling. Each avatar is floated left, and the number of avatars in each row is dictated by the size of the images and the width of the region.

3.2 Themeing Using Theme Overrides

Geek Alert! - The theme overrides described below require some editing of your theme's PHP files. It's really not that hard. But it needs to be done right or you can break your site, so it's not for everybody. Always work on a test site, and always make a backup first.

Theme Override Sample

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;
}