T2: Standard Templates

This post will go step by step through process of creating, editing and using standard rating template and all the dependent templates.Comments templates use exactly the same principle, as many of the other templates. Because the rendering of rating block (and everything else) is done using templates now, many of the options are removed that were previously used to position rendring block, position of the rating text and other things.

Standard rating block can use many different tags, and one of them is also the template. Full list is on the image on the right. For rating to work, you practically need only %RATING_STARS% tag in the template.

4 CSS tags will be replaced with CSS classes you set on Posts & Pages tab on the settings panel. %HEADER_TEXT% element will be replaced with rating header text set on the same tab as CSS classes. %RATING_TEXT% element will be replaced by the rating text that usually includes number of votes, rating and more. As you can see, for this element you need to select one of the rating text templates that will be used, because you might have many such templates defined. %RATING_STARS% render stars used for rendering.

Important thing is that customization require knowledge of HTML and CSS. The previous system was simpler, but very limiting. This way you can position things the way you want. Don’t ask questiona about adding old options for this, that’s not going to happen.

Here is default rating block:

<div class=”ratingblock %CSS_BLOCK%”>
<div class=”ratingheader %CSS_HEADER%”>%HEADER_TEXT%</div>
<div class=”ratingstars %CSS_STARS%”>%RATING_STARS%</div>
<div class=”ratingtext %CSS_TEXT%”>%RATING_TEXT%</div>
</div>

If you don’t set CSS classes in the settings panel, nothing will happen, and these templates will be removed. You can modify this template and add more classes for each div, remove class from existing div, change the places for the divs and elements, set style attributes for the divs or replace the whole parts with something else.

For instance, if you want to align the block to the right, you can add definition for the rating block to float the whole element or add directly style to the top element like this:

<div class=”ratingblock %CSS_BLOCK%” style=”float: right”>

Also, at the end of the template add one more div to clear the floats so that this don’t interfere with the rest of the post rendering:

<div style=”clear: both”></div>

With this you can do many things and fit the block into any design. Once you can create the new template (give the template some meaningful name), you need to assign that new template as default for posts and pages on the settings page. Second part is that you need to set rating text template. If you use default template for this, you don’t need to change anything more. If you want to have rating test in your own language for instance, create a new Standard Rating Text template (duplicate existing one is easiest way to go). This template has more tags and some of them are used time restricted ratings only (all %TR_ and %TOT_ tags). This template also uses one dependent template for singular/plural version of word vote.

Also this, template has 3 elements. One is for normal rating, and two other for time restircted ratings. Default normal template looks like this:

Rating: %RATING%/<strong>%MAX_RATING%</strong> (%VOTES% %WORD_VOTES% cast)

Once you create new rating text template, modify your rating block template and set new %RATING_TEXT% element to use this new rating text template.

All the templates you create you can edit, delete or duplicate. Default templates can’t be removed. You need at least one template for each type or you will be getting rendering errors. So it’s best not to change anything in the templates database table also. For testing the templates it’s best to use some browser debugger like Dragonfly with Opera or Firebug with Firefox.

Share this: