In this tutorial I will show you how you can have different
fonts with 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.
No comments:
Post a Comment