- 1) Download the attached file below and extract the file, rename {THEME} to your actual theme name
- 2) Upload the whole folder "templates" to your server in respective locations
- 3) Open your theme style/engine.css (if you have engine.css located in different folder then open that file, if you don't have engine.css then open any .css files that used by your theme):
add the following code at the end of the file:
.ratingzero {
color: #6c838e;
}
.ratingtypeplusminus {
padding: 0px 5px;
}
.ratingtypeplus {
color: #6c838e;
padding: 0px 0px 0px 5px;
}
.ratingplus {
color: green;
}
.ratingminus {
color: red;
}
- 4) Open your theme "style/styles.css" (if you have styles.css located in different folder or named differently than styles.css then open that file that used by your theme)
add the following code at the end of the file:
.ratebox2 {
float: right;
}
.ratebox3 {
float: right;
}
.ratebox ul, .ratebox ul li {
float: left;
}
.ratebox2 ul, .ratebox2 ul li {
float: left;
}
.ratebox3 ul, .ratebox3 ul li {
float: left;
}
- 5) Open comments.tpl:
at the right place for you to add support for comment rating
[rating]
[rating-type-1]<div class="ratebox"><div class="rate">{rating}</div></div>[/rating-type-1]
[rating-type-2]<div class="ratebox2">
<ul class="reset">
<li>[rating-plus]<img src="{THEME}/images/like.png" title="Like" alt="Like" style="width:14px;" />[/rating-plus]</li>
<li>{rating}</li>
</ul></div>[/rating-type-2]
[rating-type-3]<div class="ratebox3">
<ul class="reset">
<li>[rating-minus]<img src="{THEME}/images/ratingminus.png" title="Dislike" alt="Dislike" style="width:14px;" />[/rating-minus]</li>
<li>{rating}</li>
<li>[rating-plus]<img src="{THEME}/images/ratingplus.png" title="Like" alt="Like" style="width:14px;" />[/rating-plus]</li>
</ul>
</div>[/rating-type-3]
[/rating]
The theme design maybe different but this tutorial is based on "Default" theme, however, the theme upgrade is focused on adding the tag for new rating system in your theme
comments.tpl, there are 3 types of rating systems
[rating-type-1]Standard Rating - Used this type of Five-Star rating of news. Visitors/users can rate news from 1 to 5 rating and display as the orginal standard rating
[/rating-type-1]
[rating-type-2]Only 'Like' - In this type, the visitor/user can put what he likes this news (the system likes) and shows the number of users who liked your news.
[/rating-type-2]
[rating-type-3]'Like' or 'Dislike' - in this type of visitors say whether they like or dislike the news. In this case, the total rating value will display like, for example,
+20 or
-10[/rating-type-3]
The tag must be wrapped with tag
[rating]
...
[/rating]
- 6) Open fullstory.tpl
Find:
[rating]<div class="ratebox"><div class="rate">{rating}</div></div>[/rating]
Replace with:
[rating]
[rating-type-1]<div class="ratebox"><div class="rate">{rating}</div></div>[/rating-type-1]
[rating-type-2]<div class="ratebox2">
<ul class="reset">
<li>[rating-plus]<img src="{THEME}/images/like.png" title="Like" alt="Like" style="width:14px;" />[/rating-plus]</li>
<li>{rating}</li>
</ul></div>[/rating-type-2]
[rating-type-3]<div class="ratebox3">
<ul class="reset">
<li>[rating-minus]<img src="{THEME}/images/ratingminus.png" title="Dislike" alt="Dislike" style="width:14px;" />[/rating-minus]</li>
<li>{rating}</li>
<li>[rating-plus]<img src="{THEME}/images/ratingplus.png" title="Like" alt="Like" style="width:14px;" />[/rating-plus]</li>
</ul>
</div>[/rating-type-3]
[/rating]
The theme design maybe different but this tutorial is based on "Default" theme, however, the theme upgrade is focused on adding the tag for new rating system in your theme comments.tpl, there are 3 types of rating systems
[rating-type-1]Standard Rating - Used this type of Five-Star rating of news. Visitors/users can rate news from 1 to 5 rating and display as the orginal standard rating[/rating-type-1]
[rating-type-2]Only 'Like' - In this type, the visitor/user can put what he likes this news (the system likes) and shows the number of users who liked your news.[/rating-type-2]
[rating-type-3]'Like' or 'Dislike' - in this type of visitors say whether they like or dislike the news. In this case, the total rating value will display like, for example, +20 or -10[/rating-type-3]
- 7) Open searchresults.tpl
Find:
[rating]<div class="ratebox"><div class="rate">{rating}</div></div>[/rating]
Replace with:
[rating]
[rating-type-1]<div class="ratebox"><div class="rate">{rating}</div></div>[/rating-type-1]
[rating-type-2]<div class="ratebox2">
<ul class="reset">
<li>[rating-plus]<img src="{THEME}/images/like.png" title="Like" alt="Like" style="width:14px;" />[/rating-plus]</li>
<li>{rating}</li>
</ul></div>[/rating-type-2]
[rating-type-3]<div class="ratebox3">
<ul class="reset">
<li>[rating-minus]<img src="{THEME}/images/ratingminus.png" title="Dislike" alt="Dislike" style="width:14px;" />[/rating-minus]</li>
<li>{rating}</li>
<li>[rating-plus]<img src="{THEME}/images/ratingplus.png" title="Like" alt="Like" style="width:14px;" />[/rating-plus]</li>
</ul>
</div>[/rating-type-3]
[/rating]
The theme design maybe different but this tutorial is based on "Default" theme, however, the theme upgrade is focused on adding the tag for new rating system in your theme comments.tpl, there are 3 types of rating systems
[rating-type-1]Standard Rating - Used this type of Five-Star rating of news. Visitors/users can rate news from 1 to 5 rating and display as the orginal standard rating[/rating-type-1]
[rating-type-2]Only 'Like' - In this type, the visitor/user can put what he likes this news (the system likes) and shows the number of users who liked your news.[/rating-type-2]
[rating-type-3]'Like' or 'Dislike' - in this type of visitors say whether they like or dislike the news. In this case, the total rating value will display like, for example, +20 or -10[/rating-type-3]
- 8) Open shortstory.tpl
Find:
[rating]<div class="ratebox"><div class="rate">{rating}</div></div>[/rating]
Replace with:
[rating]
[rating-type-1]<div class="ratebox"><div class="rate">{rating}</div></div>[/rating-type-1]
[rating-type-2]<div class="ratebox2">
<ul class="reset">
<li>[rating-plus]<img src="{THEME}/images/like.png" title="Like" alt="Like" style="width:14px;" />[/rating-plus]</li>
<li>{rating}</li>
</ul></div>[/rating-type-2]
[rating-type-3]<div class="ratebox3">
<ul class="reset">
<li>[rating-minus]<img src="{THEME}/images/ratingminus.png" title="Dislike" alt="Dislike" style="width:14px;" />[/rating-minus]</li>
<li>{rating}</li>
<li>[rating-plus]<img src="{THEME}/images/ratingplus.png" title="Like" alt="Like" style="width:14px;" />[/rating-plus]</li>
</ul>
</div>[/rating-type-3]
[/rating]
The theme design maybe different but this tutorial is based on "Default" theme, however, the theme upgrade is focused on adding the tag for new rating system in your theme comments.tpl, there are 3 types of rating systems
[rating-type-1]Standard Rating - Used this type of Five-Star rating of news. Visitors/users can rate news from 1 to 5 rating and display as the orginal standard rating[/rating-type-1]
[rating-type-2]Only 'Like' - In this type, the visitor/user can put what he likes this news (the system likes) and shows the number of users who liked your news.[/rating-type-2]
[rating-type-3]'Like' or 'Dislike' - in this type of visitors say whether they like or dislike the news. In this case, the total rating value will display like, for example, +20 or -10[/rating-type-3]
- 9) Open userinfo.tpl
Find:
<div class="ratebox"><div class="rate">{rate}</div><span>Rating:</span></div>
Replace with:
[rating-type-1]<div class="ratebox"><div class="rate">{rate}</div><span>Rating:</span></div>[/rating-type-1]
[rating-type-2]<div class="ratebox2"><span>Rating:</span> {rate}</div>[/rating-type-2]
[rating-type-3]<div class="ratebox2"><span>Rating:</span> {rate}<span></div>[/rating-type-3]
This version mostly changed about rating system, in this version there are 3 difference rating system but the main tag to open and close are still the same but depending on rating type you set in System Settings