Member Fonts and Colors on Team Blogs

In this tutorial I will show you how you can have different fonts and colors for team members on a teamblog.
It is a simple hack, easy to install to your blog, and much asked for!

In this tutorial we will assume that you have a teamblog with 2 team members (Barbie and Ken). We will change the font color of the post body. Barbie's posts will be in red, Ken's will be in blue.

Edit your Blog's template in HTML-mode, and expand all widget teamplates.

Inside the skin of your blog (that is between the <b:skin> and </b:skin>-tags), add the following styling definitions:

.post-body-barbie { color:#ff0000; }
.post-body-ken { color:#0000ff; }

Now scroll down to the widgets-part of the template, and find the post-includable. Look for the following lines of code:

<b:includable id='post' var='post'>
....
....
   <div class='post-header-line-1'/>
   <div class='post-body'>
      <p><data:post.body/></p>
         <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
   <div class='post-footer'>
....
....
</b:includable>

What you see here is a post-header line (which is empty), the post-body, and the first line of code for the post-footer. Now we will change this code, so that Barbie and Ken each have their own color:

<b:includable id='post' var='post'>
....
....
   <div class='post-header-line-1'/>

   <b:if cond='data:post.author == "Barbie"'>
      <div class='post-body-barbie'><p><data:post.body/></p>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
   <b:else/>
      <div class='post-body-ken'>
         <p><data:post.body/></p>
         <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
   </b:if>

   <div class='post-footer'>
....
....
</b:includable>

Now save the template.

If you have more than 2 team members, the principle is the same: you just have to add some extra if-else statements, that are nested.