Guide Category

134

Upgrade Theme 10.3 to 10.4

There are many features are changed in Datalife Engine 10.4, so upgrade theme will be changed including rating system for both short story, full story, comment, user profile etc...so there are some tags are changed in those theme files and many theme files from older versions of Datalife Engine will not work on Datalife Engine 10.4 therefore you need to upgrade theme otherwise it will not work correctly...
dlestarter
Upgrade Theme 10.3 to 10.4
Upgrade Theme
10.3 to 10.4
Last Updated: January 16, 2015
There are many features are changed in Datalife Engine 10.4, so upgrade theme will be changed including rating system for both short story, full story, comment, user profile etc...so there are some tags are changed in those theme files and many theme files from older versions of Datalife Engine will not work on Datalife Engine 10.4 therefore you need to upgrade theme otherwise it will not work correctly...
  • 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

Related Tutorials

Review/Leave Comment

comments powered by Disqus