COMPLETED forumdisplay_thread_rating - FA

Solution:

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">
<!--
lang.ratings_update_error = "{$lang->ratings_update_error}";
// -->
</script>
       <script type="text/javascript" src="{$mybb->asset_url}/jscripts/rating.js?ver=1808"></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>

2. 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']}&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>

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

Code:

/** Pure CSS & FA 5 Star Rating By Johnny S & Vintagedaddyo **/
.star_rating_container {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    float: right;
    margin-top: 6px;
}
.star_rating {
    unicode-bidi: bidi-override;
    direction: ltr;
    list-style:none outside none;
    margin: 0;
    padding: 0;
}
.star_rating, .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 {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f005";
    font-size: 14px;
}
.star_rating_notrated li:hover a, .star_rating_notrated li:hover ~ li a {
    color: #2C2C2C !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: rtl;
    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;
}