Just noticed that Blogger have implemented “Ratings”, so I have had it enabled for a short while on my posts…
It’s been there since June 2008 but I hadn’t noticed it before and there doesn't seem to have much noise made about it – it is a “Blogger in Draft” feature so maybe why it’s been quiet and why I’m having issues (see below!).
But…
--EDIT--
Due to the issues below I have now turned off rating and gone for “reactions”!
Am trying to get the background of the star rating to something other than white.
Seems to be set via: expr:g:background-color='data:backgroundColor'
But I can’t work out how to overide this.
I’ve tried setting this to a colour manually: expr:g:background-color=’#EEF2D5’
No joy…
Tried adding:
<span class='star-ratings' background='#EEF2D5'>
No joy…
Tried adding CSS:
.star-ratings {
background:#eef2d5;
}
No Joy…
Tried adding:
<style type='text/css'>
/*
* <Variable name='bgcolor' description='Page Background Color' type='color' default='#eef2d5'/>
* <Variable name='mainBgColor' description='Page Background Color' type='color' default='#eef2d5'/>
/*
</style>
As the combination of the following two articles made it like like it ought to work:
> http://bloggerindraft.blogspot.com/2008/06/new-feature-star-ratings.html
> http://www.google.com/support/blogger/bin/answer.py?hl=en-uk&answer=46871&amp;amp;amp;amp;amp;amp;amp;amp;topic=12488
No Joy…
Tried adding another background=’#EEF2D5’ to the DIV that is used:
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280' background='#EEF2D5'/>
And changing the DIV class to:
<div g:background='#EEF2D5' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280' />
No Joy…
Sensing a theme yet?
Google searches have been of little use, most useful posts/articles were:
> http://www.google.com/support/forum/p/blogger/thread?tid=7783584179e0d450&hl=en
> http://www.bloggerbuster.com/2008/07/how-to-add-star-ratings-to-your-blogger.html (the comments had some tips)
The reason, at least I think this is the reason, is that the background color is set in too many place for me to easily override, there also appears to be an external CSS called for the ratings…
Using the IE Dev Toolbar I have found no less than 5 (yes 5!!!) places that it is set to white…
1 - <div g:width="280" g:url="http://www.mattgrovesblog.com/2009/12/ratings-enabled.html" g:type="RatingPanel" g:text-color="000000" g:height="42" g:background-color="ffffff">
2 - <iframe width="280" height="42" class="RatingPanelCustom" src="http://www.google.com/reviews/widgets?widgetName=RatingPanel&width=280&height=42&backgroundColor=ffffff&referrer=http%3A%2F%2Fwww.mattgrovesblog.com%2F&jsApi=0&profiler=0&req=%7B%22url%22%3A%22http%3A%2F%2Fwww.mattgrovesblog.com%2F2009%2F12%2Fratings-enabled.html%22%2C%22width%22%3A280%2C%22height%22%3A42%2C%22backgroundColor%22%3A%22ffffff%22%2C%22textColor%22%3A%22000000%22%7D" frameBorder="0">
3 - <table class="zzRatingPanel" style="background-color: #ffffff; color: #000000;" border="0" cellspacing="0" cellpadding="0">
4 - <span class="zzAggregateRating" style="background-color: #ffffff; color: #000000;">
5 - <span class="zzRatingEdit" style="background-color: #ffffff; color: #000000;">
Surprisingly the CSS (http://www.google.com/reviews/css/zz_rating.css) doesn’t actually have colours being set (this CSS is really badly formatted by the way)….
I’d rather have stars than the “reactions”, mainly because they look ‘cooler’, but until I find a way (or some kind soul points it out to me!) I’ll go with reactions rather than a starred rating.
Shame.
