تغییر ستاره های قسمت امتیازدهی به CSS
سلام
با استفاده از این آموزش میتونید ستاره های قسمت امتیازدهی رو از تصویر به css تغییر بدید .

ابتدا به مسیر زیر برید :
قالب ها و پوسته ها / قالب مورد نظر / Showthread templates
showthread_ratethread رو ویرایش کنید و به جای تمام کدهای موجود در آن کدهای زیر رو قرار بدید :

<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: right; padding-left: 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>


حالا به مسیر زیر برید :
قالب ها و پوسته ها / قالب مورد نظر / Forum Display Templates
forumdisplay_thread_rating رو ویرایش کنید و به جای کدهای موجود در اون کدهای زیر رو قرار بدید :

<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>




مرحله آخر :
فایل star_rating.css پوسته اتون رو ویرایش کنید و به جای کدهای موجود در اون کدهای زیر رو قرار بدید :

.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: 0 auto;
              width:96px;
}

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

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

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

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

.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;
}





موفق باشید
thanks
نویسنده :

X
پوسته نسیم
نام پوسته : نسیم طراحی شده توسط : همیار مای بی بی ویژگی ها : دارای باکس تبلیغات در هدر باکس ور ...
پوسته 1.8
دیدگاه های کاربران 5
ارسال: 2
خيلي عالي هست ولي كاش مدل ستاره ها و كلا مدلش مثلا شبيه خود قالب ديفالت بود
ارسال: 3
اگه ممکنه یه شات از نتیجه پایانی بذارید/.
ارسال: 4
اينطوري هست مدلش
imageimage
ارسال: 5
اندازه ستاره هارو میخوام 2 برابر کنم ولی نمیدونم از کجا ! میشه راهنمایی کنید؟؟!!؟!!

پاسخ مسئول
ارسال: 6
(2014-06-21T13:47:59+00:00 2014-06-21T13:47:59+00:00)Mr President نوشته :  اندازه ستاره هارو میخوام 2 برابر کنم ولی نمیدونم از کجا ! میشه راهنمایی کنید؟؟!!؟!!

سلام
مقدار font-size رو تغییر بدید :
font-size:17px;


thanks

image

برای عضویت در کانال تلگرامی
[همیار مای بی بی]
کلیک کنید
دریافت آخرین اخبار ، کدهای تخفیف و جوایز
برای اطلاع از آخرین اخبار مای بی بی فارسی عضو کانال تلگرامی شوید :