So I decided to write a tutorial for anyone who’d like to have the same on their BuddyPress site.

The image below shows an example of what the effect looks like once implemented.

You can also see it in action on the website itself, of course.

I believe it’s something pretty simple to achive, and the result is quiet practical for the user.
As you suspect, it’s jQuery to take care of the magic on this one.

More specifically, it’s a jQuery plugin called tipsy. So, first of all, get the plugin by downloading it here.

Once you did so, do the following:

• Upload the jquery.tipsy.js file on your theme directory
• Put the tipsy.gif image, into the “images” folder of your theme

After that, copy all the content from the tipsy.css file and paste it into your “style.css” file.

Than edit the background image path, in the first line:

background-image: url(images/tipsy.gif);

Now it’s time to setup the jQuery stuff.

Open the header.php file and find this:

<?php wp_head(); ?>

Replace it with:

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.tipsy.js"></script>
<script type="text/javascript">
	var $j = jQuery.noConflict();
	$j(document).ready(function() {
	    $j('#members-avatars a').tipsy({gravity: 's'});
	});
</script>

The wp_enqueue_script(“jquery”); function loads the jQuery library that is included within WordPress itself.

Than we load the tipsy jQuery plugin, and right after that, the script for the plugin to work;

Notice that we used jQuery in no-conflict mode, to avoid any possible conflict with other Javascript libraries.

Now, the way tipsy work is to display a tooltip with the value of the “title” attribute of the element that you target in the script. In our case, “#members-avatars a”.

That implies that, as last action, you need to wrap those avatars members images with such a div with an id of “members-avatars”.

Also, the value for the title attribute should output the name of the member, so we use the bp_member_name() function as value.

The whole widget code, should look something like this:

<?php if ( bp_has_members('type=active&max=15') ) : //members widget ?>
<div id="members-avatars">
    <h2>Members</h2>
        <?php while ( bp_members() ) : bp_the_member(); ?>
		<a href="<?php bp_member_permalink() ?>" title=" <?php bp_member_name() ?>">
               <?php bp_member_avatar() ?></a>
	<?php endwhile; ?>
</div><!-- end "members-avatars" -->
<?php endif; //members wdget ?>

To make it look better, I changed the font size in the CSS code I copied from the tipsy.css from 10px to 13px. If you wish, you can also play with the opacity of the tooltip bubble in the CSS.

As a bonus tip, you can use the same tooltip effect on other parts of the interface, like I did for the activity main menu, for example.

To achieve this, add a new target (div#members-avatars a) in the tipsy script:

<script type="text/javascript>
    $(document).ready(function() {
        $('div.activity-type-tabs a, div#members-avatars a').tipsy({gravity: 's'});
   });
</script>

So, there you have it, simple but efficient and cool hover effect to display the members name when passing your mouse over the members avatars.

Feel free to implement it on your BuddyPress site!
And let me know if you did use it.

Surprisedly enough for me, with all the long and numerous lists of WordPress plugins out there, I never see those 4 listed anywhere. Although, to me they all are very useful and you should definitely check them out.

1. Admin Menu Editor

Doesn’t everybody wish to re-order the WordPress admin menus and change the default backend into a more logical and customized interface? Well, whenever I have to deal with a user interface, one of the most essential needs to me is just that: customization.

The great, mighty, Admin Menu Editor, gives you the ability to change the WordPress admin menus to your liking with a cool drag-and-drop feature.

Strangely enough, I didn’t find another plugin that does that, and it really strikes me that such a feature, re-ordering menus, may not be a basic need for all the WordPress users out there. Seriously, how can one leave without that option? I can’t. And that makes Admin Menu Editor the number one WordPress plugin to me.

It is especially helpful when using WordPress a a CMS, and you create new content types. For example, you may want to order the menus in a logical way and keep them visually separated, like I use to.

Get the plugin at the official repository.

2. WassUp

WassUp is a very cool plugin that gives you real-time information about current visitors browsing your website and what pages they are visiting, and It keeps a history of the whole activity it monitors. You can choose to display or not spiders and/or spams.

For some reason, I find myself using it more than Google Analytics.

Even thought, WassUp gives you very basic traffic information, I love the plugin for the real-time “spying” factor.

Get the plugin at the official repository.

3. AStickyPostOrderer

This was my life safer for Stylozero. A Sticky Post Orderer is a very nice plugin that allows you to customize and choose the order in which posts are displayed on different categories, and on the blog index page, if you want.

I used it for the portfolio section (yes, portfolio items are posts!), and it just gives me total freedom about the sorting order for portfolio items in each portfolio category (identity, web, print, …).

If you use WordPress as a CMS, this plugin may turn very useful for you.

Get the plugin at the official repository.

4. Smart Archives Reloaded

The name of this plugin says it all. If you want to build an archivation for posts based on year/month sorting, this plugin may be what you need.

I know that there are so many ways of handling archives without having to add a plugin just for that, and I am one of those who try to keep WordPress plugins at a strict minimum.

But I think the plugin has its value in the cool Ajax option that enables the user to display all posts in a fast and easy way, within a selected year and month. You can check it out on my archives page.

Get the plugin at the official repository.

The challenge here is to keep the HTML markup as clean as possible and just use CSS to style the text.

So, instead of assigning an id or a class to each paragraph, like so…

<p id="1">I am not a communication consultant.</p>
<p id="2">I am not a project manager.</p>
<p id="3">I am not an information architect.</p>
…

…we can keep the markup clean and neat…

<div id="teaser">
  <p>I am not a <em>communication consultant</em>.</p>
  <p>I am not a <em>project manager</em>.</p>
  <p>I am not an <em>information architect</em>.</p>
  <p>I am not an <em>art director</em>.</p>
  <p>I am not a <em>graphic designer</em>.</p>
  <p>I am not a <em>web designer</em>.</p>
  <p>I am <em>all</em> that. <a href="/services" title="services">Pick what you need.</a></p>
</div><!-- end "teaser" -->

… and make use of the + sign combinator to target each paragraph, and play with its position and size…

#teaser p { color: #666; margin-left: 40px; }
#teaser p+p { margin-left: 160px; font-size: 5em; }
#teaser p+p+p { margin-left: 105px; font-size: 3.4em; }
#teaser p+p+p+p { margin-left: 0; font-size: 3.4em; }
#teaser p+p+p+p+p { margin-left: 140px; font-size: 4em; }
#teaser p+p+p+p+p+p { margin-left: 90px; font-size: 4.5em; }
#teaser p+p+p+p+p+p+p { margin-left: 300px; font-size: 3.4em; margin-top: 30px; }
#teaser p em { color: #444; }

There you have it! A simple but clever solution to have a graphical text effect with CSS without adding any extra id’s or classes to the HTML.

A few weeks ago I worked on this website. The agency who hired me provided me with Photoshop mockups, and I was in charge of developing the front-end code (HTML, CSS, JS) for all the different pages.

For the homepage there was an intro block that I needed to turn into markup and style afterword with CSS.

Here’s a screenshot of that block…

While analyzing the visual mockup, the first (evil) temptation to write the HTML markup was this:

<div id="intro">
   <h2>As a global leader in corrugated packaging, International Paper is supplying
    a wide range of market segments in virtually all geographies.</h2>
   <a href="#" alt="contact us">Need more information? Contact us.</a>
   <p>With over 30 years of experience in the segment, International Paper is the reliable partner
    for all fresh fruit & vegetable packaging needs. We offer our customers value-added
    packaging solutions including supply chain and design services.</p>
</div><!-- end "intro" -->

Which translates things pretty much in the order suggested by the visual presentation.

BUT! For the sake of having a markup that respects the law of semantics and the logical flow of content whenever separated from its presentation, the ideal order should be as follow:

Title (heading):
As a global leader in corrugated packaging, International Paper is supplying a wide range of market segments in virtually all geographies.

Text (paragraphs):
With over 30 years of experience in the segment, International Paper is the reliable partner for all fresh fruit & vegetable packaging needs. We offer our customers value-added packaging solutions including supply chain and design services.

Call to action (link):
Need more information? Contact us.

Which assigns a different order of elements…

Actually, that would make more sense if you read the content stripped out of the presentational layer (CSS). And it’s never said enough that semantics should be considered above all, when coding. You may, for instance, read the content with an RSS reader, with the result of having the title first, then the link to the action and then the text, which wouldn’t look right.

So, the right way of coding the markup would be this:

<div id="intro">
   <h2>As a global leader in corrugated packaging, International Paper is supplying
    a wide range of market segments in virtually all geographies.</h2>
   <p>With over 30 years of experience in the segment, International Paper is the reliable partner
    for all fresh fruit & vegetable packaging needs. We offer our customers value-added
    packaging solutions including supply chain and design services.</p>
   <a href="#" alt="contact us">Need more information? Contact us.</a>
</div><!-- end "intro" -->

Now, to make it look like the mockup, the obvious solution to apply would be to use two basic CSS techniques: image replacement, to turn the call to action link into an image, and absolute positioning, to display the image at the right side of the title, and before the text.

#intro { position: relative; }
#intro h2 { width: 455px; }
#intro a {
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
    width: 172px;
    height: 70px;
    text-indent: -9999px;
    background: url(images/intro-contact.jpg) no-repeat;
}

We now have the same presentation as on the mockup, but we kept the HTML markup logical!

I am sure that there are exceptions when we just can’t apply simple layout techniques such as this one, without having to compromise semantics.

But the purpose of this article wasn’t to write a CSS positioning tutorial.
It was to bring the attention to the fact that writing proper markup is essential, and in order to do so you need to look at visual mockups for a little time, and interpret them the right way, instead of going to rush up and start to code.

Very basic practice for some, but unfortunately in my professional life I am constantly meeting coders that just don’t care about such an approach.
And the thing is… they just should, and there are millions of reasons why.

Remember, logical HTML markup comes first!

After the required efforts to put it all toghether, it is finally up and running, and at this moment is basically divided in two main blocks, as you can clearly see from the navigation in the header: the studio and the blog.

The studio block is what I would refer to as the “static” part, and it provides all the necessary information about who I am (About), what I do (Services), how I do it (Process), what I did (Portfolio), and how I can help.

The blog part is what I consider the “alive” part and will hopefully grow into a meaningful resources of stuff such as tutorials, articles, news and reviews for the community of the usual suspects – designers and developers – and for whoever else is involved in the communication business, especially on the web.

Many are the features that will be added to this current version, and I’ve already got a long list of things that are just waiting to be implemented and improved.

If you wish to stay tuned with the whole Stylozero experience, you can choose to do so by subscribing to the the blog articles feeds, or to get them delivered to your email. You may also want to subscribe to the newsletter. And, while we are at it, don’t forget to follow on twitter.

Your comments and suggestions are more than welcome.
Enjoy the ride!