Blogging Roller

Scott Hudson asks "Is there any way to modify Roller to insert the category information around each entry, so we can do additional CSS styling?" The answer is yes, with a little page template hacking you can do almost anything to your Roller Blog.

To add a div around each entry with a style class that varies with the entry category, you need to add some code to your Blog's day template. Find the foreach loop in your day template that iterates over each day's Blog entries and add a div tag around the contents of that foreach, as shown below. To give each category it's own category, you use a Velocity expression to get the category name $entry.category.name.

#foreach( $entry in $entries )
<p>
   <div class="cat_$entry.category.name">

     ... display one weblog entry, code removed for brevity ... 

   </div>
</p>
#end

Now that you've got class, you can add some style. You can do this by adding CSS to your main Blog page or to your CSS template if you have one. For example, if you have categories General, Music, and Java and you'd like ot put a red border around your General entries, a green border around your music entries, and a blue border around your Java entries, you would add the following CSS:

.cat_General {
   padding: 3px;
   border-left: 5px red solid;
   border-right: 1px red solid;
   border-top: 1px red solid;
   border-bottom: 1px red solid;
}
.cat_Music {
   padding: 3px;
   border-left: 5px green solid;
   border-right: 1px green solid;
   border-top: 1px green solid;
   border-bottom: 1px red solid;
}
.cat_Java {
   padding: 3px;
   border-left: 5px blue solid;
   border-right: 1px blue solid;
   border-top: 1px blue solid;
   border-bottom: 1px blue solid;
}

Below is a screenshot that shows what this looks like (and yes, I'm aware of the border mix-up on the Music post):