MyBB Community Forums

Based on Star ratings @ CSS-Tricks (credit to article author).

1. Go to ACP -> templates and styles -> templates -> <your theme template set -> Showthread templates -> showthread_ratethread and replace all content with

<div class="star_rating_container">
		<script type="text/javascript" src="jscripts/rating.js?ver=1400"></script>
		<div id="success_rating_{$thread['tid']}" style="float: left; padding-top: 2px; padding-right: 10px;">&nbsp;</div>
<strong style="float: left; padding-right: 10px;">{$lang->thread_rating}</strong>
		<div class="inline_rating">

<ul class="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}">
<li style="width: {$thread['width']}%" class="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li>
<li><a class="five_stars" title="{$lang->five_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=5&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class="four_stars" title="{$lang->four_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=4&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class="three_stars" title="{$lang->three_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=3&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class="two_stars" title="{$lang->two_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=2&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class="one_star" title="{$lang->one_star}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=1&amp;my_post_key={$mybb->post_code}"></a></li>
			</ul>
		</div>
</div>

and save it.

In forumdisplay templates -> forumdisplay_thread_rating replace all content with

<td align="center" class="{$bgcolor}{$thread_type_class}" id="rating_table_{$thread['tid']}">
		
<ul class="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}">
<li style="width: {$thread['width']}%" class="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li>
<li><a class="five_stars" title="{$lang->five_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=5&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class="four_stars" title="{$lang->four_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=4&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class="three_stars" title="{$lang->three_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=3&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class="two_stars" title="{$lang->two_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=2&amp;my_post_key={$mybb->post_code}"></a></li>
<li><a class="one_star" title="{$lang->one_star}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=1&amp;my_post_key={$mybb->post_code}"></a></li>
			</ul>



		
	</td>

2. Go to ACP -> templates and styles -> templates -> <your current theme> -> star_rating.css -> edit -> advanced edit and replace all content with following one:

.star_rating_container {
   display:inline-block;
   vertical-align:middle;
   margin-right:6px;
   float:right;
   margin-top:6px;
 }

.star_rating {
     unicode-bidi: bidi-override;
     direction: rtl;
     list-style:none outside none;
     margin:0;
     padding:0;
}

.star_rating,
.star_rating li a:hover,
.star_rating .current_rating {
  vertical-align: middle;       
 }

td .star_rating {
  margin-left: 0 auto;
  width:120px;
  position:relative;
  left:-13px;
}

.star_rating li {
  margin-left:5px;
  float:right;
  unicode-bidi: bidi-override;
 }

.star_rating li a {
  color:#b9b9b9;
  text-decoration:none;
}

.star_rating li a {
  font-size:0px;
}

.star_rating li a:before {
  content: "\2605";
  font-size:14px;
} 

/*Firefox hack*/
@-moz-document url-prefix() {
.star_rating li a:before {
  font-size:18px;
  position:relative;
  top:-5px;
} 
}
 
.star_rating_notrated li:hover a,
.star_rating_notrated li:hover ~ li a {
  color:blue !important;
  cursor:pointer;
 }


li.current_rating[style*="20"] ~ li a.one_star,
li.current_rating[style*="40"] ~ li:nth-child(n+5) a,
li.current_rating[style*="60"] ~ li:nth-child(n+4) a,
li.current_rating[style*="80"] ~ li:nth-child(n+3) a,
li[style*="100"]~ li:nth-child(n+2) a  {
  color:#eab71f;
}

.star_rating .current_rating {
  unicode-bidi: bidi-override;
  direction: ltr;
  display:none;
  float:left;
  text-align:right;
  position:relative;
  top:1px;
  right:3px;
}


.inline_rating {
  float: left;
  vertical-align: middle;
  padding-right: 5px;
}

 .star_rating_success, .success_message {
  color: #00b200;
  font-weight: bold;
  font-size: 10px;
  margin-bottom: 10px;
 }

 td[id*="rating_table"] {
 text-align:center;
 margin:0 auto;
}

Result:

Before (default star rating image) -
After -

Instead of star you can use other symbols ( more info http://ikreator.com/special-characters/ ). If you are using FontAwesome remove Firefox fix from star_rating.css (FF has some font size issues with special HTML symbols)).

Thanks a lot Johnny S, I was searching this to reduce more the amount of images used on a theme.

Also, in my case, I use FA with default CSS (No the bootstrap version), so... in order to work properly you need to modify 2 things:

In the CSS:

.star_rating li a:before {
        font-family: FontAwesome;
	content: "\f005";
	font-size: 14px;
}

You need to add "font-family: FontAwesome;" and another thing, the number of the content is "\f005" (Star icon) at least in my latest version of Font Awesome.