Roll your own Community Server Rating Stars

I’m working with a Community Server site theme that has a blue background and concluded that the out-of-the-box rating stars, while looking fine on a white background, looked downright crappy over the blue.  So I rolled my own.  Here’s what they look like.

 

Pretty!  If you look at the HTML generated by, in our case, the CSFile:EntryRating control you’ll see

 

<span>
<img border=”0″ align=”absmiddle” src=”../images/common/star-left-on.gif”/>
<img border=”0″ align=”absmiddle” src=”../images/common/star-right-on.gif”/>
<img border=”0″ align=”absmiddle” src=”../images/common/star-left-on.gif”/>
<img border=”0″ align=”absmiddle” src=”../images/common/star-right-on.gif”/>
<img border=”0″ align=”absmiddle” src=”../images/common/star-left-on.gif”/>
<img border=”0″ align=”absmiddle” src=”../images/common/star-right-on.gif”/>
<img border=”0″ align=”absmiddle” src=”../images/common/star-left-off.gif”/>
<img border=”0″ align=”absmiddle” src=”../images/common/star-right-off.gif”/>
<img border=”0″ align=”absmiddle” src=”../images/common/star-left-off.gif”/>
<img border=”0″ align=”absmiddle” src=”../images/common/star-right-off.gif”/>
</span>

 

So we’re working with half-stars that form a whole to support half-point ratings like 3.5.  The Photoshop workspace below gives you a better idea of the images that comprise a row of rating stars in Community Server.

 

This is great.  I can finally say I’ve written a 5-star blog post!

Article written by

A long time developer, I was an early adopter of Linux in the mid-90's for a few years until I entered corporate environments and worked with Microsoft technologies like ASP, then .NET. In 2008 I released Sueetie, an Online Community Platform built in .NET. In late 2012 I returned to my Linux roots and locked in on Java development. Much of my work is available on GitHub.