apache apachecon app apple asf atom atomprotocol atompub barcamprdu blogapps blogging businessblogging conferences family feeds foss general glassfish google humor ibm java javaone links linux mac microsoft movies music netbeans opensocial opensource photos politics rest roller rome rss socialnetworking socialsite socialsoftware sun triangle trianglebloggers vacation webdev webservices wiki


Main | Next day (Jul 18, 2004) »

Saturday Jul 17, 2004

Roller tip: Styling Blog entries according to Blog category

Comments[0] by Dave in 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):

screenshot showing different styles for each category

This work is licensed under a Creative Commons License.
Copyright 2002-2007, David M Johnson (dave.johnson at rollerweblogger.org)

This is a personal weblog, I do not speak for my employer.