Guide Category

134

Upgrade Theme 10.2 to 10.4

In new version of Datalife engine 10.2 and 10.4, some theme files are added and many tags are added to this version, so upgrade theme is a bit easy and some theme file tags are changed so you are required to upgrade your theme to be able to get your theme working correctly. In this tutorial we will show you step by step to upgrade theme from DLE 10.2 to 10.4 with ease in single tutorial.
dlestarter
Upgrade Theme 10.2 to 10.4
Upgrade Theme
10.2 to 10.4
Last Updated: January 15, 2015
In new version of Datalife engine 10.2 and 10.4, some theme files are added and many tags are added to this version, so upgrade theme is a bit easy and some theme file tags are changed so you are required to upgrade your theme to be able to get your theme working correctly

In this tutorial we will show you step by step to upgrade theme from DLE 10.2 to 10.4 with ease in single tutorial.

  • 1) Download package in the bottom of this article and rename {THEME} to your actual theme, and upload all files to your server
  • 2) Open your theme files: comments.tpl, pm.tpl, registration.tpl, searchresult.tpl, userinfo.tpl and remove the tag {icq} from those theme files
  • 3) Open your-theme/frame.css

    Find and remove:

    #file-uploader {
    	min-height: 50px;
    }
    #flash-uploader {
    	min-height: 50px;
    }
    

    Find:

    .qq-upload-drop-area {
        position:absolute; top:0; left:0; width:100%; height:100%; min-height: 50px; z-index:2;
        background:#FF9797; text-align:center; 
    }
    

    REPLACE with:

    .qq-upload-drop-area {
        position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;
        background:#FF9797; text-align:center; 
    }
    
  • 4) Open your-theme/login.tpl

    Find:

    <li class="lfield lfchek"><input type="checkbox" name="login_not_save" id="login_not_save" value="1"/><label for="login_not_save"> Do not save me</label></li>
    

    Add below:

    <li class="lfield lfchek">
    	<div class="sociallogin">
    	[vk]<a href="{vk_url}" target="_blank"><img src="{THEME}/images/social/vkontakte.gif" /></a>[/vk]
    	[odnoklassniki]<a href="{odnoklassniki_url}" target="_blank"><img src="{THEME}/images/social/odnoklassniki.gif" /></a>[/odnoklassniki]
    	[facebook]<a href="{facebook_url}" target="_blank"><img src="{THEME}/images/social/facebook.gif" /></a>[/facebook]
    	[mailru]<a href="{mailru_url}" target="_blank"><img src="{THEME}/images/social/mailru.gif" /></a>[/mailru]
    	[yandex]<a href="{yandex_url}" target="_blank"><img src="{THEME}/images/social/yandex.gif" /></a>[/yandex]
    	[google]<a href="{google_url}" target="_blank"><img src="{THEME}/images/social/google.gif" /></a>[/google]
    	</div>
    </li>
    
    The theme design maybe different but this tutorial is based on "Default" theme, however, the theme upgrade is focused on adding the tag for login using social networks so technically it telling you to add login options in your theme login.tpl
  • 5) Open theme file poll.tpl

    Find:

    doPoll('vote'); return false;
    

    REPLACE with:

    doPoll('vote', '{news-id}'); return false;
    

    Find:

    doPoll('results'); return false;
    

    REPLACE with:

    doPoll('results', '{news-id}'); return false;
    
  • 6) Open theme file userinfo.tpl

    Find:

    			<tr>
    				<td class="label">Avatar:</td>
    				<td>Upload from your computer: <input type="file" name="image" class="f_input" /><br /><br />
    				Use avatar from <a href="http://www.gravatar.com/" target="_blank">Gravatar</a>: <input type="text" name="gravatar" value="{gravatar}" class="f_input" /> (Enter your E-mail on gravatar.com)
    				<br /><br /><div class="checkbox"><input type="checkbox" name="del_foto" id="del_foto" value="yes" /> <label for="del_foto">Delete current avatar</label></div>
    				</td>
    			</tr>
    

    Add AFTER:

    <tr>
    	<td class="label">My Local Time Zone:</td>
    	<td>{timezones}</td>
    </tr>
    

    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]
  • 7) 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;
    }
  • 8) 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;
    }
  • 9) 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 original 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]
  • 10) 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 fullstory.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 original 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]
  • 11) 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 searchresults.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 original 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]
  • 12) 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 shortstory.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 original 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]

Related Tutorials

Review/Leave Comment

comments powered by Disqus