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:
Now scroll down to the widgets-part of the template, and find the post-includable. Look for the following lines of code:
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:
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.
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:
<br /><b:includable id='post' var='post'><br />....<br />....<br /> <div class='post-header-line-1'/><br /> <div class='post-body'><br /> <p><data:post.body/></p><br /> <div style='clear: both;'/> <!-- clear for photos floats --><br /> </div><br /> <div class='post-footer'><br />....<br />....<br /></b:includable><br />
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:
<br /><b:includable id='post' var='post'><br />....<br />....<br /> <div class='post-header-line-1'/><br /><br /> <b:if cond='data:post.author == "Barbie"'><br /> <div class='post-body-barbie'><p><data:post.body/></p><br /> <div style='clear: both;'/> <!-- clear for photos floats --><br /> </div><br /> <b:else/><br /> <div class='post-body-ken'><br /> <p><data:post.body/></p><br /> <div style='clear: both;'/> <!-- clear for photos floats --><br /> </div><br /> </b:if><br /><br /> <div class='post-footer'><br />....<br />....<br /></b:includable><br />
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.
