Even with all the fancy project management and collaboration tools available I bet most offices still rely to some extent on the more traditional methods – white boards and post it notes!

Last year Fog Creek Software released very swish app called Trello that aims to move these post-it notes into the 21st century.

“Trello is an online collaboration tool that organizes projects into boards. In one glance, Trello tells you what’s being worked on, who’s working on what, and where something is in a process.”

As we use SharePoint for much of our day to day collaboration (no surprise there) I wondered if a similar interface could be made for SharePoint?

Hence SPrello was born. It’s pretty basic (at the moment) and will likely never have the real time features of Trello but I hope it can be useful and as it’s an open source project you can adapt and build upon it to fit your requirements.

It’s been released as an open source project on Codeplex http://sprello.codeplex.com

• SharePoint 2010 sandbox web part
• EMCAScript Client Object Modell
• JQuery/JQueryUI libraries

If you find it useful please come back here and let us know how you’re using it!

A customer for our Highlighter product recently asked us how you could modify SharePoints List View Web Part (LVWP) to word wrap column headers. He had found that as he had replaced lengthy text with status icons he could fit a lot more columns on the page – if only he could shrink the column headers down.

To be clear – this isn’t unique to lists using our Highlighter product, this example shows a basic SharePoint list with a long title that is causing a horizontal toolbar as it won’t word warp even though the column will only ever contain Yes or No.

Of course you could rename the column and shorted the name and put more information in the description – but that only appears on the Edit form so it’s a balancing act between being brief and giving enough info so everyone knows what the columns contains.

Anyway – how to make these columns word wrap?

Inspired by this post on Stack Exchange I looked at using Cascading Style Sheets to do this.

The property we need is white-space : normal

Then we need to figure out which parts of the html to apply it to. This is done by HTML classes, so taking into account SharePoint 2007 and 2010 and different column styles (number/text/filterable/non-filterable) we end up with.

<style type= "text/css">
.ms-vh, .ms-vh2-nofilter, .ms-vh2-nograd, .ms-vh2, .ms-vb
{white-space: normal}
</style>

So the white-space property is applied to html elements with a class of .ms-vh, ms-vh2-nograd and so on.

We could also make the column headers center aligned and red (just for an example) by putting in

<style type="text/css">
.ms-vh, .ms-vh2-nofilter, .ms-vh2-nograd, .ms-vh2, .ms-vb
{
white-space: normal;
text-align:center; 
vertical-align:text-bottom;
color:red;
}
</style>

So how do we add these styles to the page?

You can use SharePoint Designer, but perhaps the easiest way is to add it via a Content Editor Web Part (CEWP)

• Go to your list.
• Select Site Actions > Edit Page
• Click “Add a web part”

And – word wrapping :-

If this doesn’t work for you then as with all things ‘code’ exact syntax is important so check everything carefully – a “ is not the same as a ” for example. Also be sure that you’ve put the CSS in the HTML Source area, not just directly into the rich text editor.

You can add lots more effects (Red, bold etc) but sometimes its hard figuring out exactly what html elements and classes to target (e.g. you can’t apply a colour to the .ms-vh table header, you’ve got to apply it to an anchor element inside this – so “.ms-vh a”) – Firebug, the IE developer tools or the Chrome equivalent are invaluable for this – they will save your sanity!