Current time: 03-22-2010, 08:15 AM Hello There, Guest! (LoginRegister)


Post Reply 
Thread Rating CSS Issue - How To Fix
09-09-2008, 10:21 PM (This post was last modified: 09-19-2008 09:35 PM by MattRogowski.)
Post: #1
Thread Rating CSS Issue - How To Fix
I have seen many questions asking how to fix this problem when viewing a subforum or a thread:

[Image: threadratingtk1.jpg]

This is caused by the CSS (Cascading Style Sheet) for the thread ratings not being included in your theme. Basically the ratings show as plain HTML as there is no style for them, and we all need a bit of style. This is a very simple fix, and now, I will show you how to do it.

First, you must go to your ACP. Choose Templates and Styles from the top menu, and then Themes. Click your theme, and then on the new page that you see, click 'Add Stylesheet'. You will then see this page (click to enlarge):

   

Type in the name box, 'star_ratings.css'.

Make sure the 'Globally' option is selected.

Click 'Write my own content', and paste in the CSS found here: http://community.mybboard.net/cache/them...atings.css

Then save the stylesheet. You should now see your thread ratings displaying properly.

I hope this is helpful - if anyone has any problems, please post in this thread rather than making a new one, and I, or someone else, will assist you. I would also appreciate it if I am not PM'd about this - I will check this thread regularly to see if anyone is having any problems. Also post in here if you feel anything should be explained better or something's missing.

Smile

My Personal Site - Twitter
MyBB Support Team
[Image: lqscs]
Visit this user's website Find all posts by this user
Quote this message in a reply
09-10-2008, 06:01 PM
Post: #2
RE: Thread Rating CSS Issue - How To Fix
well done mate..
thanks for the fix. Smile

الدعم العربى
تطوير منتديات MyBB - كتب ودروس وملحقات الـ Php - دروس وكتب الـ XHTML - تطوير المواقع والمنتديات - ارسال الموقع الى محركات البحث - اشهار المواقع - برامج كمبيوتر - العاب كمبيوتر - برامج الجوالات وتعريبها
Cheap Web Hosting
Visit this user's website Find all posts by this user
Quote this message in a reply
09-10-2008, 08:21 PM
Post: #3
RE: Thread Rating CSS Issue - How To Fix
Excellent m8 just what the doctor ordered Smile

[Image: dava.png]
Find all posts by this user
Quote this message in a reply
09-10-2008, 08:40 PM
Post: #4
RE: Thread Rating CSS Issue - How To Fix
Thank you Smile

My Personal Site - Twitter
MyBB Support Team
[Image: lqscs]
Visit this user's website Find all posts by this user
Quote this message in a reply
09-11-2008, 01:39 AM
Post: #5
RE: Thread Rating CSS Issue - How To Fix
Thanks Matt

If like me, you had 'star_ratings.css' missing, you may be missing other files. I only had global.css listed in "Stylesheets in MyBB Default"

modcp.css
http://community.mybboard.net/cache/them.../modcp.css

showthread.css
http://community.mybboard.net/cache/them...thread.css

usercp.css
http://community.mybboard.net/cache/them...usercp.css

star_ratings.css
http://community.mybboard.net/cache/them...atings.css

Follow same procedure as in Matt's first post with each file. I hope I am not missing any Confused

Regards

Gordon


[Image: arcanim2.gif]
Surface Engineering Forum
Find all posts by this user
Quote this message in a reply
09-11-2008, 02:54 AM (This post was last modified: 09-14-2008 05:12 PM by scylla.)
Post: #6
RE: Thread Rating CSS Issue - How To Fix
To get rid of the rating completely here's what you have to do:

Step 1: Goto Admin CP --> Templates & Style --> Templates --> Default Templates

Now expand Show Thread Templates --> showthread_ratethread

Choose full edit, delete everything in there and paste this in it's place:

After you pasted this, move on to step 2 in this post.

Code:
<!--
<div style="margin-top: 6px; padding-right: 10px;" class="float_right">
        <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="one_star" title="{$lang->one_star}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=1&amp;my_post_key={$mybb->post_code}">1</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}">2</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}">3</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}">4</a></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}">5</a></li>
            </ul>
        </div>
</div>
-->

Step 2: Now open Forum Display Templates --> forumdisplay_thread_rating

And again choose full edit and replace all of the coding in it with this:

Code:
<!--
<td align="center" class="{$bgcolor}" 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>
        </ul>
        <script type="text/javascript">
        <!--
            Rating.build_forumdisplay({$thread['tid']}, { width: '{$thread['width']}', extra_class: '{$not_rated}', current_average: '{$ratingvotesav}' });
        // -->
        </script>
    </td>

One last step that I just worked out to completely remove it:

open --> forumdisplay_threadlist

and copy & paste this
Code:
<div class="float_left">
    {$multipage}
</div>
<div class="float_right">
    {$newthread}
</div>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both;">
    <tr>
        <td class="thead" colspan="{$colspan}">
            <div style="float: right;">
                <span class="smalltext"><strong><a href="misc.php?action=markread&amp;fid={$fid}">{$lang->markforum_read}</a> | <a href="usercp2.php?action={$add_remove_subscription}subscription&amp;type=forum&amp;fid={$fid}">{$add_remove_subscription_text}</a>{$clearstoredpass}</strong></span>
            </div>
            <div>
                <strong>{$foruminfo['name']}</strong>
            </div>
        </td>
    </tr>
    <tr>
        <td class="tcat" colspan="3" width="66%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=subject&amp;order=asc">{$lang->thread}</a> {$orderarrow['subject']} / <a href="{$sorturl}&amp;sortby=starter&amp;order=asc">{$lang->author}</a> {$orderarrow['starter']}</strong></span></td>
        <td class="tcat" align="center" width="7%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=replies&amp;order=desc">{$lang->replies}</a> {$orderarrow['replies']}</strong></span></td>
        <td class="tcat" align="center" width="7%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=views&amp;order=desc">{$lang->views}</a> {$orderarrow['views']}</strong></span></td>
        
        <td class="tcat" align="right" width="20%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=lastpost&amp;order=desc">{$lang->lastpost}</a> {$orderarrow['lastpost']}</strong></span></td>
        {$inlinemodcol}
    </tr>
    {$announcementlist}
    {$threads}
    <tr>
        <td class="tfoot" align="right" colspan="{$colspan}">
            <form action="forumdisplay.php" method="get">
                <input type="hidden" name="fid" value="{$fid}" />
                <select name="sortby">
                    <option value="subject" {$sortsel['subject']}>{$lang->sort_by_subject}</option>
                    <option value="lastpost" {$sortsel['lastpost']}>{$lang->sort_by_lastpost}</option>
                    <option value="starter" {$sortsel['starter']}>{$lang->sort_by_starter}</option>
                    <option value="started" {$sortsel['started']}>{$lang->sort_by_started}</option>
                    {$ratingsort}
                    <option value="replies" {$sortsel['replies']}>{$lang->sort_by_replies}</option>
                    <option value="views" {$sortsel['views']}>{$lang->sort_by_views}</option>
                </select>
                <select name="order">
                    <option value="asc" {$ordersel['asc']}>{$lang->sort_order_asc}</option>
                    <option value="desc" {$ordersel['desc']}>{$lang->sort_order_desc}</option>
                </select>
                <select name="datecut">
                    <option value="1" {$datecutsel['1']}>{$lang->datelimit_1day}</option>
                    <option value="5" {$datecutsel['5']}>{$lang->datelimit_5days}</option>
                    <option value="10" {$datecutsel['10']}>{$lang->datelimit_10days}</option>
                    <option value="20" {$datecutsel['20']}>{$lang->datelimit_20days}</option>
                    <option value="50" {$datecutsel['50']}>{$lang->datelimit_50days}</option>
                    <option value="75" {$datecutsel['75']}>{$lang->datelimit_75days}</option>
                    <option value="100" {$datecutsel['100']}>{$lang->datelimit_100days}</option>
                    <option value="365" {$datecutsel['365']}>{$lang->datelimit_lastyear}</option>
                    <option value="9999" {$datecutsel['9999']}>{$lang->datelimit_beginning}</option>
                </select>
                {$gobutton}
            </form>
        </td>
    </tr>
</table>
<div class="float_left">
    {$multipage}
</div>
<div class="float_right" style="margin-top: 4px;">
    {$newthread}
</div>
<br style="clear: both;" />
<br />
<div class="float_left">
    <div class="float_left">
        <dl class="thread_legend smalltext">
            <dd><img src="{$theme['imgdir']}/newfolder.gif" alt="{$lang->new_thread}" title="{$lang->new_thread}" /> {$lang->new_thread}</dd>
            <dd><img src="{$theme['imgdir']}/newhotfolder.gif" alt="{$lang->new_hot_thread}" title="{$lang->new_hot_thread}" /> {$lang->new_hot_thread}</dd>
            <dd><img src="{$theme['imgdir']}/hotfolder.gif" alt="{$lang->hot_thread}" title="{$lang->hot_thread}" /> {$lang->hot_thread}</dd>
        </dl>
    </div>

    <div class="float_left">
        <dl class="thread_legend smalltext">
            <dd><img src="{$theme['imgdir']}/folder.gif" alt="{$lang->no_new_thread}" title="{$lang->no_new_thread}" /> {$lang->no_new_thread}</dd>
            <dd><img src="{$theme['imgdir']}/dot_folder.gif" alt="{$lang->posts_by_you}" title="{$lang->posts_by_you}" /> {$lang->posts_by_you}</dd>
            <dd><img src="{$theme['imgdir']}/lockfolder.gif" alt="{$lang->locked_thread}" title="{$lang->locked_thread}" /> {$lang->locked_thread}</dd>
        </dl>
    </div>
    <br style="clear: both" />
</div>

<div class="float_right" style="text-align: right;">
    {$inlinemod}
    {$searchforum}
    {$forumjump}
</div>
<br style="clear: both" />
{$inline_edit_js}

And here is what the end result will look like: http://codeshq.site88.net/cheat-codes-f-32.html

VGChat: Your Guide to Gaming | Watch over 10,000 videos of free streaming anime!
Find all posts by this user
Quote this message in a reply
09-11-2008, 07:48 AM (This post was last modified: 09-11-2008 08:08 AM by MattRogowski.)
Post: #7
RE: Thread Rating CSS Issue - How To Fix
(09-11-2008 01:39 AM)Gordone Wrote:  Thanks Matt

If like me, you had 'star_ratings.css' missing, you may be missing other files. I only had global.css listed in "Stylesheets in MyBB Default"

modcp.css
http://community.mybboard.net/cache/them.../modcp.css

showthread.css
http://community.mybboard.net/cache/them...thread.css

usercp.css
http://community.mybboard.net/cache/them...usercp.css

star_ratings.css
http://community.mybboard.net/cache/them...atings.css

Follow same procedure as in Matt's first post with each file. I hope I am not missing any Confused

Regards

Gordon

You're completely right. I have seen a few User CPs and Mod CPs with the menu on the left showing as just plain links - if you have this problem, like Gordone said, use the procedure in the first post, but change the name and the actual CSS you use Toungue
(09-11-2008 02:54 AM)scylla Wrote:  To get rid of the rating completely here's what you have to do:

Step 1: Goto Admin CP --> Templates & Style --> Templates --> Default Templates

Now expand Show Thread Templates --> showthread_ratethread

Choose full edit, delete everything in there and paste this in it's place:

After you pasted this, move on to step 2 in this post.

Code:
<!--
<div style="margin-top: 6px; padding-right: 10px;" class="float_right">
        <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="one_star" title="{$lang->one_star}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=1&amp;my_post_key={$mybb->post_code}">1</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}">2</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}">3</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}">4</a></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}">5</a></li>
            </ul>
        </div>
</div>
-->

Step 2: Now open Forum Display Templates --> forumdisplay_thread_rating

And again choose full edit and replace all of the coding in it with this:

Code:
<!--
<td align="center" class="{$bgcolor}" 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>
        </ul>
        <script type="text/javascript">
        <!--
            Rating.build_forumdisplay({$thread['tid']}, { width: '{$thread['width']}', extra_class: '{$not_rated}', current_average: '{$ratingvotesav}' });
        // -->
        </script>
    </td>-->

One last step that I just worked out to completely remove it:

open --> forumdisplay_threadlist

and copy & paste this
Code:
<div class="float_left">
    {$multipage}
</div>
<div class="float_right">
    {$newthread}
</div>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both;">
    <tr>
        <td class="thead" colspan="{$colspan}">
            <div style="float: right;">
                <span class="smalltext"><strong><a href="misc.php?action=markread&amp;fid={$fid}">{$lang->markforum_read}</a> | <a href="usercp2.php?action={$add_remove_subscription}subscription&amp;type=forum&amp;fid={$fid}">{$add_remove_subscription_text}</a>{$clearstoredpass}</strong></span>
            </div>
            <div>
                <strong>{$foruminfo['name']}</strong>
            </div>
        </td>
    </tr>
    <tr>
        <td class="tcat" colspan="3" width="66%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=subject&amp;order=asc">{$lang->thread}</a> {$orderarrow['subject']} / <a href="{$sorturl}&amp;sortby=starter&amp;order=asc">{$lang->author}</a> {$orderarrow['starter']}</strong></span></td>
        <td class="tcat" align="center" width="7%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=replies&amp;order=desc">{$lang->replies}</a> {$orderarrow['replies']}</strong></span></td>
        <td class="tcat" align="center" width="7%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=views&amp;order=desc">{$lang->views}</a> {$orderarrow['views']}</strong></span></td>
        
        <td class="tcat" align="right" width="20%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=lastpost&amp;order=desc">{$lang->lastpost}</a> {$orderarrow['lastpost']}</strong></span></td>
        {$inlinemodcol}
    </tr>
    {$announcementlist}
    {$threads}
    <tr>
        <td class="tfoot" align="right" colspan="{$colspan}">
            <form action="forumdisplay.php" method="get">
                <input type="hidden" name="fid" value="{$fid}" />
                <select name="sortby">
                    <option value="subject" {$sortsel['subject']}>{$lang->sort_by_subject}</option>
                    <option value="lastpost" {$sortsel['lastpost']}>{$lang->sort_by_lastpost}</option>
                    <option value="starter" {$sortsel['starter']}>{$lang->sort_by_starter}</option>
                    <option value="started" {$sortsel['started']}>{$lang->sort_by_started}</option>
                    {$ratingsort}
                    <option value="replies" {$sortsel['replies']}>{$lang->sort_by_replies}</option>
                    <option value="views" {$sortsel['views']}>{$lang->sort_by_views}</option>
                </select>
                <select name="order">
                    <option value="asc" {$ordersel['asc']}>{$lang->sort_order_asc}</option>
                    <option value="desc" {$ordersel['desc']}>{$lang->sort_order_desc}</option>
                </select>
                <select name="datecut">
                    <option value="1" {$datecutsel['1']}>{$lang->datelimit_1day}</option>
                    <option value="5" {$datecutsel['5']}>{$lang->datelimit_5days}</option>
                    <option value="10" {$datecutsel['10']}>{$lang->datelimit_10days}</option>
                    <option value="20" {$datecutsel['20']}>{$lang->datelimit_20days}</option>
                    <option value="50" {$datecutsel['50']}>{$lang->datelimit_50days}</option>
                    <option value="75" {$datecutsel['75']}>{$lang->datelimit_75days}</option>
                    <option value="100" {$datecutsel['100']}>{$lang->datelimit_100days}</option>
                    <option value="365" {$datecutsel['365']}>{$lang->datelimit_lastyear}</option>
                    <option value="9999" {$datecutsel['9999']}>{$lang->datelimit_beginning}</option>
                </select>
                {$gobutton}
            </form>
        </td>
    </tr>
</table>
<div class="float_left">
    {$multipage}
</div>
<div class="float_right" style="margin-top: 4px;">
    {$newthread}
</div>
<br style="clear: both;" />
<br />
<div class="float_left">
    <div class="float_left">
        <dl class="thread_legend smalltext">
            <dd><img src="{$theme['imgdir']}/newfolder.gif" alt="{$lang->new_thread}" title="{$lang->new_thread}" /> {$lang->new_thread}</dd>
            <dd><img src="{$theme['imgdir']}/newhotfolder.gif" alt="{$lang->new_hot_thread}" title="{$lang->new_hot_thread}" /> {$lang->new_hot_thread}</dd>
            <dd><img src="{$theme['imgdir']}/hotfolder.gif" alt="{$lang->hot_thread}" title="{$lang->hot_thread}" /> {$lang->hot_thread}</dd>
        </dl>
    </div>

    <div class="float_left">
        <dl class="thread_legend smalltext">
            <dd><img src="{$theme['imgdir']}/folder.gif" alt="{$lang->no_new_thread}" title="{$lang->no_new_thread}" /> {$lang->no_new_thread}</dd>
            <dd><img src="{$theme['imgdir']}/dot_folder.gif" alt="{$lang->posts_by_you}" title="{$lang->posts_by_you}" /> {$lang->posts_by_you}</dd>
            <dd><img src="{$theme['imgdir']}/lockfolder.gif" alt="{$lang->locked_thread}" title="{$lang->locked_thread}" /> {$lang->locked_thread}</dd>
        </dl>
    </div>
    <br style="clear: both" />
</div>

<div class="float_right" style="text-align: right;">
    {$inlinemod}
    {$searchforum}
    {$forumjump}
</div>
<br style="clear: both" />
{$inline_edit_js}

And here is what the end result will look like: http://codeshq.site88.net/cheat-codes-f-32.html
True, nice fix. I have, however, found one small error (click to enlarge):
   
To fix, remove the --> from the very end of the second piece of code.
Code:
<!--<td align="center" class="{$bgcolor}" 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> </ul> <script type="text/javascript"> <!-- Rating.build_forumdisplay({$thread['tid']}, { width: '{$thread['width']}', extra_class: '{$not_rated}', current_average: '{$ratingvotesav}' }); // --> </script></td>
I think it would be better if that when the user group settings say users of that group cannot rate threads, that column goes. I think that would be easier if you eved decide you want the column back.

My Personal Site - Twitter
MyBB Support Team
[Image: lqscs]
Visit this user's website Find all posts by this user
Quote this message in a reply
09-11-2008, 02:47 PM (This post was last modified: 09-11-2008 03:17 PM by scylla.)
Post: #8
RE: Thread Rating CSS Issue - How To Fix
Hmm. I don't see that error on my boards. Are you sure you followed the directions closely? And also, is this when your viewing a forum, or when your viewing threads?
Hmm... I found another error that needs fixing. When adding an announcement it adds another column to the right of the last post column when viewing forums....

VGChat: Your Guide to Gaming | Watch over 10,000 videos of free streaming anime!
Find all posts by this user
Quote this message in a reply
09-11-2008, 04:05 PM
Post: #9
RE: Thread Rating CSS Issue - How To Fix
I saw that when I was viewing threads, as far as I can remember.

Yeah I just noticed that too, wondered what that was Toungue

My Personal Site - Twitter
MyBB Support Team
[Image: lqscs]
Visit this user's website Find all posts by this user
Quote this message in a reply
09-11-2008, 04:23 PM (This post was last modified: 09-11-2008 04:23 PM by Dennis Tsang.)
Post: #10
RE: Thread Rating CSS Issue - How To Fix
(09-11-2008 02:47 PM)scylla Wrote:  Hmm... I found another error that needs fixing. When adding an announcement it adds another column to the right of the last post column when viewing forums....


That's probably an issue with your theme. Do you have any customized templates in the Forum Display Templates group? Please post this issue in a new thread if are still having problems.

[Image: sig.php?mybb]
MyBB is on Facebook and Twitter
Hosting available, PM for details
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump: