Upgrade Datalife Engine Theme from 9.5 to 9.7, Upgrade DLE from 9.5 to 9.7

DLE Upgrade
Tutorial ID.	DLE-1099-33
Created	September 29, 2012
IS THIS TUTORIAL HELPFUL?
85 1 2 3 4 5

upgrade95-97.rar

File Size: 13.86 Kb
Downloaded: 44 time(s)
Password: dlestarter.com

This tutorial will show you how upgrade Datalife Engine template from version 9.5 to 9.7 step by step. The new version of 9.6 and 9.7 has a lot of new features but many of those features are added in admin cp, so in front page not much to modify and the main modifications are popup windows for upload files and user profile for online/offline status as well as PM usage status, so the theme upgrade process is quite simple.

Files to modify:

engine.css
styles.css (or your theme main css style file)
frame.css
comments.tpl
feedback.tpl
fullstory.tpl
shortstory.tpl
pm.tpl
profile_popup.tpl
userinfo.tpl

Files to add: (included in attached file for download)

/bbcodes/typograf.gif
/images/button.png
/images/loading.gif
/images/offline.png
/images/online.png
/images/shadow.png
/images/tableft.gif
/images/tabright.gif
dleimages/noavatar.png

Download the attached file and upload to your theme folder

Files to modify:

Open style/engine.css

Add at the end of file:

/*---progress bar length for personal messages---*/
.pm_progress_bar {
	border: 1px solid #d8d8d8;
	padding: 1px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.pm_progress_bar span {
	background: #000000;
	font-size: 0em;
	text-indent: -2000em;
	height: 10px;
	display: block;
	overflow: hidden;
}
/*---Displaying the results of voting on the website---*/
.voteprogress {
  overflow: hidden;
  height: 15px;
  margin-bottom: 5px;
  background-color: #f7f7f7;
  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.voteprogress span {
  color: #ffffff;
  text-align: center;
  text-indent: -2000em;
  height: 15px;
  display: block;
  overflow: hidden;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background: #0e90d2;
  background-image: -moz-linear-gradient(top, #149bdf, #0480be);
  background-image: -ms-linear-gradient(top, #149bdf, #0480be);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
  background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
  background-image: -o-linear-gradient(top, #149bdf, #0480be);
  background-image: linear-gradient(top, #149bdf, #0480be);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
}
.voteprogress .vote2 {
  background-color: #dd514c;
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(top, #ee5f5b, #c43c35);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
}
.voteprogress .vote3 {
  background-color: #5eb95e;
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -ms-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(top, #62c462, #57a957);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
}
.voteprogress .vote4 {
  background-color: #4bb1cf;
  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
  background-image: linear-gradient(top, #5bc0de, #339bb9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
}
.voteprogress .vote5 {
  background-color: #faa732;
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: -ms-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(top, #fbb450, #f89406);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
}
/*---Displaying the results of poll in the news---*/
.pollprogress {
  overflow: hidden;
  height: 18px;
  margin-bottom: 5px;
  background-color: #f7f7f7;
  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.pollprogress span {
  color: #ffffff;
  height: 18px;
  display: block;
  overflow: hidden;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background: #0e90d2;
  background-image: -moz-linear-gradient(top, #149bdf, #0480be);
  background-image: -ms-linear-gradient(top, #149bdf, #0480be);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
  background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
  background-image: -o-linear-gradient(top, #149bdf, #0480be);
  background-image: linear-gradient(top, #149bdf, #0480be);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
}
.pollprogress .poll2 {
  background-color: #dd514c;
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(top, #ee5f5b, #c43c35);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
}
.pollprogress .poll3 {
  background-color: #5eb95e;
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -ms-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(top, #62c462, #57a957);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
}
.pollprogress .poll4 {
  background-color: #4bb1cf;
  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
  background-image: linear-gradient(top, #5bc0de, #339bb9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
}
.pollprogress .poll5 {
  background-color: #faa732;
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: -ms-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(top, #fbb450, #f89406);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
}

Some themes use different folders like "styles" or "css", but what you need is add the code to engine.css within those folders, if your theme doesn't have engine.css, you can add the code to one of your css files

Open style/styles.css

Add at the end of file:

.pm_status {
	float:left;
	border: 1px solid #d8d8d8;
	padding: 0px;
	background-color: #fff;
	width: 280px;
	height: 100px;
	margin-left: 20px;
	margin-right: 5px;
}
.pm_status_head {
	border-bottom: 1px solid #d8d8d8;
	font-size: 0.9em; 
	background: #fff url("../images/bbcodes.png") repeat-x 0 100%;
	height: 22px;
	padding: 0;
	font-weight: bold;
	text-align: center;
	color: #4e4e4e;
}

Some themes use different folders like "styles" or "css", but what you need is add the code to styles.css or style.css within those folders, if your theme doesn't have styles.css, you can add the code to one of your css files

Open the file frame.css

Find:

html,body{
	height:100%;
	margin:0px;
	padding: 0px;
	background: none;
}

Replace with:

html,body{
	font-size: 11px;
	font-family: verdana;
	height:100%;
	margin:0px;
	padding: 0px;
	background: none;
}
img {
	border:0px;
}
/*--- horizontal menu in the file upload ---*/
.tabs {
	font: bold 11px/1.5em Verdana;
	float:left;
	width:100%;
	background:change-background;
	line-height:normal;
}
.tabs ul {
	margin:0;
	padding:10px 10px 0 5px;
	list-style:none;
}
.tabs li {
	display:inline;
	margin:0;
	padding:0;
}
.tabs a {
	float:left;
	background:url("images/tableft.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 7px;
	text-decoration:none;
}
.tabs a span {
	float:left;
	display:block;
	background:url("images/tabright.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#6B78A9;
}
.tabs a span {float:none;}
.tabs a:hover span,
.tabs a.current span {
	color:#6B78A9;
}
.tabs a:hover,
.tabs a.current {
	background-position:0% -42px;
}
.tabs a:hover span,
.tabs a.current span {
	background-position:100% -42px;
}
/*--- block for file upload and uploaded files ---*/
.box {
	height: 300px;
	border:1px solid #B3B3B3;
	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
	background:#fff url(images/shadow.png) repeat-x;
	overflow: auto;
}

Open the file comments.tpl

Find:

<li>Registration: {registration}</li>

Add after:

<li>Status: [online]<img src="{THEME}/images/online.png" style="vertical-align: middle;" title="Currently Online" alt="Currently Online" />[/online][offline]<img src="{THEME}/images/offline.png" style="vertical-align: middle;" title="Currently Offline" alt="Currently Offline" />[/offline]</li>

The themes are different designed, but the reason of modification is add the online/offline status next to registration, however, you can add the status to anywhere you want the status icon to display

Open the file feedback.tpl

Find:

</tr>[/recaptcha]

Add after:

			[question]
			<tr>
				<td class="label">
					Security Question:
				</td>
				<td>
					<div>{question}</div>
				</td>
			</tr>
			<tr>
				<td class="label">
					Answer:<span class="impot">*</span>
				</td>
				<td>
					<div><input type="text" name="question_answer" id="question_answer" class="f_input" /></div>
				</td>
			</tr>
			[/question]

Open the file fullstory.tpl and shortstory.tpl

Find:

<div class="ratebox"><div class="rate">{rating}</div></div>

Replace with:

[rating]<div class="ratebox"><div class="rate">{rating}</div></div>[/rating]

The themes are different designed, but the reason of modification is add the open/closed tags for [rating] and [/rating] to cover rating tag so if the article rating enable or disable then the rating style will be removed

Open the file pm.tpl

Find:

<div class="dpad">[inbox]Inbox[/inbox] | [outbox]Outbox[/outbox] | [new_pm]Send New PM[/new_pm]</div>

Replace with:

<div class="dpad">
<div class="pm_status">
	<div class="pm_status_head">PM Statistics</div>
	<div class="pm_status_content">PM for your account usages:
{pm-progress-bar}
{proc-pm-limit}% out of ({pm-limit} allowed)
	</div>
</div>
<div style="padding-top:10px;">[inbox]Inbox[/inbox]<br /><br />
[outbox]Outbox[/outbox]<br /><br />
[new_pm]Send New PM[/new_pm]</div>
</div><br />
<div class="clr"></div>

The themes are different designed, but the reason of modification is add the PM box status, this status will show you how hoch space you have used for your PM limit assigned to your usergroup account, the following tags are added to this file:
- {pm-progress-bar} this is the bar to show the level of pm box in your account
- {proc-pm-limit}% this is the percentage of usages
- {pm-limit} this is the total PM message allowed for your user account (Set in usergroup manager)

Find:

</tr>
[/recaptcha]

Add after:

			[question]
			<tr>
				<td class="label">
					Security Question:
				</td>
				<td>
					<div>{question}</div>
				</td>
			</tr>
			<tr>
				<td class="label">
					Answer:<span class="impot">*</span>
				</td>
				<td>
					<div><input type="text" name="question_answer" id="question_answer" class="f_input" /></div>
				</td>
			</tr>
			[/question]

Open the file profile_popup.tpl

Find:

<li><span class="grey">Last Visited:</span> <b>{lastdate}</b></li>

Replace with:

<li><span class="grey">Last Visited:</span> <b>{lastdate}</b>, <span class="grey">Status:</span> [online]<img src="{THEME}/images/online.png" style="vertical-align: middle;" title="Currently Online" alt="Currently Online" />[/online][offline]<img src="{THEME}/images/offline.png" style="vertical-align: middle;" title="Currently Offline" alt="Currently Offline" />[/offline]</li>

The themes are different designed, but the reason of modification is add the online/offline status next to last visited, however, you can add the status to anywhere you want the status icon to display

Open the file userinfo.tpl

Find:

<li><span class="grey">Last visited:</span> <b>{lastdate}</b></li>

Add after:

<li>Status: [online]<img src="{THEME}/images/online.png" style="vertical-align: middle;" title="Currently Online" alt="Currently Online" />[/online][offline]<img src="{THEME}/images/offline.png" style="vertical-align: middle;" title="Currently Offline" alt="Currently Offline" />[/offline]</li>

Find:

{edituser}

Replace with:

[not-logged]{edituser}[/not-logged]

Add image dleimages/noavatar.png

Copy the image file from your default template /templates/Default/dleimages/noavatar.png folder of your template. or /templates/YOUR-THEME/images/noavatar.png (This image is using the same file as your default "noavatar.png", so you can copy your old image from /images/ folder to /dleimages/ folder)

Reference Upgrade Manual:
- http://www.dle-news.ru/extras/diffs/96/
- http://dle-news.ru/extras/diffs/97/