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
and save it.
In forumdisplay templates -> forumdisplay_thread_rating replace all content with
2. Go to ACP -> templates and styles -> templates -> <your current theme> -> star_rating.css -> edit -> advanced edit and replace all content with following one:
Result:
Before (default star rating image) -![[Image: BQyUsQL.png]]()
After -![[Image: XSRrSFZ.png]]()
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)).
1. Go to ACP -> templates and styles -> templates -> <your theme template set -> Showthread templates -> showthread_ratethread and replace all content with
Code:
<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;"> </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']}&rating=5&my_post_key={$mybb->post_code}"></a></li>
<li><a class="four_stars" title="{$lang->four_stars}" href="./ratethread.php?tid={$thread['tid']}&rating=4&my_post_key={$mybb->post_code}"></a></li>
<li><a class="three_stars" title="{$lang->three_stars}" href="./ratethread.php?tid={$thread['tid']}&rating=3&my_post_key={$mybb->post_code}"></a></li>
<li><a class="two_stars" title="{$lang->two_stars}" href="./ratethread.php?tid={$thread['tid']}&rating=2&my_post_key={$mybb->post_code}"></a></li>
<li><a class="one_star" title="{$lang->one_star}" href="./ratethread.php?tid={$thread['tid']}&rating=1&my_post_key={$mybb->post_code}"></a></li>
</ul>
</div>
</div>and save it.
In forumdisplay templates -> forumdisplay_thread_rating replace all content with
Code:
<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']}&rating=5&my_post_key={$mybb->post_code}"></a></li>
<li><a class="four_stars" title="{$lang->four_stars}" href="./ratethread.php?tid={$thread['tid']}&rating=4&my_post_key={$mybb->post_code}"></a></li>
<li><a class="three_stars" title="{$lang->three_stars}" href="./ratethread.php?tid={$thread['tid']}&rating=3&my_post_key={$mybb->post_code}"></a></li>
<li><a class="two_stars" title="{$lang->two_stars}" href="./ratethread.php?tid={$thread['tid']}&rating=2&my_post_key={$mybb->post_code}"></a></li>
<li><a class="one_star" title="{$lang->one_star}" href="./ratethread.php?tid={$thread['tid']}&rating=1&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:
Code:
.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) -
![[Image: BQyUsQL.png]](http://i.imgur.com/BQyUsQL.png)
After -
![[Image: XSRrSFZ.png]](http://i.imgur.com/XSRrSFZ.png)
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)).