Guide Category

134

Upgrade Theme 9.2 to 9.7

Upgrade Datalife Engine theme from 9.2 to 9.7 is our upgrade guide project to help users upgrade the theme in single tutorial without having to worry about 9.3, 9.4, 9.5 and 9.6 upgrade process, this tutorial will cover the theme upgrade in versions 9.3, 9.4, 9.5, 9.6 and 9.7. Usually when you upgrade Datalife Engine from version 9.2 to 9.6 you have to upgrade theme from 9.2 to 9.3, then upgrade 9.3 to 9.4, then upgrade 9.4 to 9.5, then upgrade 9.5 to 9.6 and then upgrade 9.6 to 9.7, our all in one tutorial series will make it easy for you so that you can easily upgrade theme for 9.2 to 9.7 step by step in single tutorial.
dlestarter
Upgrade Theme 9.2 to 9.7
Upgrade Theme
9.2 to 9.7
Last Updated: November 20, 2013
Upgrade Datalife Engine theme from 9.2 to 9.7 is our upgrade guide project to help users upgrade the theme in single tutorial without having to worry about 9.3, 9.4, 9.5 and 9.6 upgrade process, this tutorial will cover the theme upgrade in versions 9.3, 9.4, 9.5, 9.6 and 9.7. Usually when you upgrade Datalife Engine from version 9.2 to 9.6 you have to upgrade theme from 9.2 to 9.3, then upgrade 9.3 to 9.4, then upgrade 9.4 to 9.5, then upgrade 9.5 to 9.6 and then upgrade 9.6 to 9.7, our all in one tutorial series will make it easy for you so that you can easily upgrade theme for 9.2 to 9.7 step by step in single tutorial.

Files to change:

  1. addcomments.tpl (add tag question/answer)
  2. addnews.tpl (add tag question/answer)
  3. comments.tpl (Change and add editor style)
  4. feedback.tpl (Add Question/Answer module)
  5. fullstory.tpl (add topnews list style)
  6. login.tpl (add tag do not remember me option)
  7. pm.tpl (add google reCaptcha)
  8. profile_popup.tpl (add tag subscribe to user RSS feed and change tags)
  9. registration.tpl (add tag question/answer)
  10. shortstory.tpl
  11. userinfo.tpl (add ignore list and change tags)
  12. preview.css (add pre code style)
  13. /style/engine.css (add pre code style)
  14. /style/styles.css (or your theme main css style file)
  15. .htaccess (change structure for template protection)

Files to add:

  1. frame.css (popup windows page)
  2. print.tpl (articles print page)
  3. relatednews.tpl (additional files for related news module)
  4. static_print.tpl (static print page)
  5. topnews.tpl (additional files for top news module)
  6. dleimages/delete.png
  7. dleimages/no_image.jpg
  8. dleimages/noavatar.png
  9. dleimages/videopreview.jpg
  10. dleimages/youtubepreview.jpg
  11. images/complaint.png
  12. bbcodes/typograf.gif
  13. images/button.png
  14. images/loading.gif
  15. images/offline.png
  16. images/online.png
  17. images/shadow.png
  18. images/tableft.gif
  19. images/tabright.gif

Files to change

1) Open addcomments.tpl

Find

[sec_code]

Add before

[question]
<tr>
<td class="label">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]
2) Open addnews.tpl

Add the following code on the beginning of the file:

<link rel="stylesheet" type="text/css" href="engine/skins/chosen/chosen.css"/>
<script type="text/javascript" src="engine/skins/chosen/chosen.js"></script>
<script type="text/javascript">
$(function(){
	$('#category').chosen({allow_single_deselect:true, no_results_text: 'No category found or not selected'});
});
</script>

Find

[sec_code]

Add before

[question]
<tr>
<td class="label">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" class="f_input" /></div></td>
</tr>
[/question]
3) Open comments.tpl

Find

<li>[com-edit]Edit[/com-edit]</li>

Add before

<li>[complaint]Report Abuse[/complaint]</li>
The theme design will be different, but the point to modify this file is to add complaint module button to report inappropriate comments to the site administrator, you can use your own languages, image or icon that suite to your theme design but you must keep the tags [complaint] and [/complaint] for the link to click for report

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
4) 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]
5) Open fullstory.tpl

Find

<li>{favorites}</li>

Add after

<li>[complaint]<img src="{THEME}/images/complaint.png" title="Report Error" alt="Report Error" />[/complaint]</li>
The theme design will be different, but the point to modify this file is to add complaint module button to report inappropriate comments to the site administrator, you can use your own languages, image or icon (DLE also provide icon for the function, please download it below) that suite to your theme design but you must keep the tags [complaint] and [/complaint] for the link to click for report

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
Start: Skip this step if you are not using "Default" theme

Find

<a class="addcombtn" href="javascript:ShowOrHide('addcform')">

Replace with

<a class="addcombtn" href="#" onclick="$('#addcform') .toggle();return false;">
End: Skip this step if you are not using "Default" theme
6) Open 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
7) Open login.tpl

Find

<label for="login_name">Name:</label><input type="text" name="login_name" id="login_name" />

Replace with

<label for="login_name">{login-method}</label><input type="text" name="login_name" id="login_name" />

Note: the theme design maybe vary, so don't worry if you can't find the code above, this upgrade instruction is base on the "Default" theme that comes with script, so if you are not using Default theme then please note this option is for "Login" method, the tag is only to let your site members know that which method your website is setting to login by using "Username" or "E-mail", so the exactly purpose of tag {login-method} is to switch between method text, so if you have special design on your theme, you just need to put the text to tell your members which method you use for login in your website, so that you don't have to put the tag {login-method} in your theme, for example www.dlestarter.com is using email login method and we use icon for login input, so we just use email icon and text to tell our members that we use email login, not username...so that's good example.

Find

<li class="lbtn"><button class="fbutton" onclick="submit();" type="submit" title="Login"><span>Login</span></button></li>

Add before

<li class="lfield lfchek"><input type="checkbox" name="login_not_save" id="login_not_save" value="1"/><label for="login_not_save"> Do not remember me</label></li>
Note: the theme design maybe vary, so don't worry if you can't find the code above, this upgrade instruction is base on the "Default" theme that comes with script, so if you are not using Default theme then please note this option is for "Login" cookie either to save cookie or not saving cookie on the local computer you are using to login to your website, the tag input ID "login_not_save" is to give the option for you and your members the option for "Do not save me" if this option is check when you and your members login to your site, the cookie session for your site login will not be be saved on that computer, this option is very helpful if you and your members using ublic computers or friends' computers. The code can be placed anywhere within a login form in login.tpl file, the only require tags are:
<input type="checkbox" name="login_not_save" id="login_not_save" value="1" />
And text for checkbox label:
Do not remember me
So you can apply them to your own design theme without having to worry some tags and code maybe missing like I said above, the theme designs are different from Default theme...!
8) Open pm.tpl

Find

<li>[del]Delete[/del]</li>

Add before

<li>[complaint]Report Abuse[/complaint]</li>
<li>[ignore]Add Sender to my block list[/ignore]</li>
The theme design will be different, but the point to modify this file is to add complaint module button to report abusive users and spammers to the site administrator, you can use your own languages, image or icon that suite to your theme design but you must keep the tags - [complaint] and [/complaint] for the link to click for report.
- [ignore] and [/ignore] for the link adding the sender to the ignore list or black list.

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]
9) Open profile_popup.tpl

Find

{news_num} [ {news} ]

Add after

[rss]<img src="{THEME}/images/rss.png" alt="rss" style="vertical-align: middle; margin-left: 5px;" />[/rss]

Find

{news_num}

Replace with

{news_num}

Find

{comm_num}

Replace with

{comm-num}

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
11) Open userinfo.tpl

Find

[sec_code]

Find

[question]
<tr>
<td class="label">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" class="f_input" /></div></td>
</tr>
[/question]
10) Open registration.tpl

Find

{news_num}

Replace with

{news-num}

Find

{comm_num}

Replace with

{comm-num}

Find

			<tr>
				<td class="label">Location:</td>
				<td><input type="text" name="land" value="{land}" class="f_input" /></td>
			</tr>

Add after

			<tr>
				<td class="label">My Black list:</td>
				<td>{ignore-list}</td>
			</tr>
The theme design will be different, but the point to modify this file is to add ignore list in user profile also known as "Black List" or "Block List", this option requires for block/black/ignore list management, each user will have their own list and they can manage the list to remove the users from the list. You can use your own languages, image or icon that suite to your theme design but you must keep the tags {ignore-list} for the list of users who have been added to the list so the members can manage them

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>
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

Find:

{edituser}

Replace with:

[not-logged]{edituser}[/not-logged]
12/13) Open the file /style/engine.css and preview.css

Add the following code at the end:

/*--- Code tag highlight [ code ]---*/
pre code {
  display: block; padding: 0.5em;
  background: #f9fafa; 
  border: 1px solid #dce7e7;
  overflow:auto;
  white-space: pre;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #93a1a1;
  font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .lisp .title {
  color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #2aa198;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .builtin,
pre .built_in,
pre .lisp .title,
pre .identifier,
pre .title .keymethods,
pre .id {
  color: #268bd2;
}
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
  font-weight: bold;
}
pre .attribute,
pre .variable,
pre .instancevar,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .label {
  color: #b58900;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .diff .change,
pre .special,
pre .keymethods,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {
  background: #eee8d5;
}
13) Open style/engine.css

Add the following code at the end:

.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);
}
Different theme designs are different, some of theme use /style/engine.css, some use /styles/engine.css, some use /css/engine.css, some don't use engine.css file but use different name or file, but the point is to add this tag within the theme anywhere in css file
14) Open style/styles.css

Add the following code at the end:

.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
15) open the {THEME}/.htaccess
The .htaccess file in your "templates/your_theme" folder and replace all the code inside the file with the following contents:

htaccess

Order allow,deny
Deny from all
<FilesMatch ".(css)$|^$">
   Order deny,allow
   Allow from all
</FilesMatch>
For example if you are using theme "WStarter" then the file /templates/WStarter/.htaccess must contain the code above
16) 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)

Files to add (Download from attached file)

Please download the attached file and place them within folder /templates/YOUR THEME/

The following files are included in the package (You can use your own images if you like)
  1. frame.css (popup windows page)
  2. print.tpl (articles print page)
  3. relatednews.tpl (additional files for related news module)
  4. static_print.tpl (static print page)
  5. topnews.tpl (additional files for top news module)
  6. dleimages/delete.png
  7. dleimages/no_image.jpg
  8. dleimages/videopreview.jpg
  9. dleimages/youtubepreview.jpg
  10. images/complaint.png
  11. bbcodes/typograf.gif
  12. images/button.png
  13. images/loading.gif
  14. images/offline.png
  15. images/online.png
  16. images/shadow.png
  17. images/tableft.gif
  18. images/tabright.gif
relatednews.tpl
relatednews.tpl: this file is used for tag {related-news} for related news in fullstory.tpl, the purpose of this file to be added independently because Datalife Engine have added and improve the new way to display related news, they have added some tags that are very helpful for those who want to customize the way related news to display, now you can use additional tags to display images and text from the article for additional enhanced look...the following tags are applied within the file relatednews.tpl:
  • {image-X}: This will display the image you have uploaded and added in the article, the X indicates the image number, if you add only 1 image then the tag will be {image-1}, if you have added more than 1 image, you can specify the image number like {image-2}, {image-3} and so on...the tag only identify the image name, but it will not give you the full html code, so you must manually input the proper img code like:

    Example Code:

    <img src="{image-1}" alt="" width="xxx" height="xxx" />
<img src="{image-2}" alt="" width="xxx" height="xxx" />
<img src="{image-3}" alt="" width="xxx" height="xxx" />
  • {text limit="XXX"}: This will display the short story description as additional details than title, the older version you can only use title for related news unless you use some hacks to get anything else display, now you add additional text description, the XXX indicates how many letters and characters you want the short description to display, if the max text has reach the number you specified then it will be cut out the rest of shortstory automatically. Please note that the tag {text limit="xxx"} will only grab everything in regular text format, it will not grab any styles, bbcode styles or html code styles
  • New in 9.5, you can now use all xfields in your topnews and related news, for example:

    Example Code:

    <img src="[xfvalue_poster]" alt="" width="xxx" height="xxx" />
topnews.tpl
topnews.tpl This file is used for the tag "{topnews}" in either main.tpl or sidebar.tpl (depending on design), the purpose of this file and the additional tags are exactly the same as relatednews.tpl above, you can use tags {image-X} and {text limit="XXX"}, you can also use xfield as same as relatednews.tpl, so please refer to the details above the additional tags
Both files are using the default tag

Example Code:

<li><a href="{link}">{title}</a></li>
  • {link}: is the full link url for the article, it will automatically converted to any link formats of your SEO settings or none SEO
  • {title}: is the actual article title
Additional Tags for DLE 9.5,9.6 in user profile and commnets
There are a few tags added in 9.5,9.6 but we don't seem to find the information anywhere, even the themes come with the DLE 9.5,9.6 package don't even add these tags in the themes so this information you can only find in DLEStarter.com!...

The following tags are applied to template files userinfo.tpl and comments.tpl

  1. [fullname]xxx[/fullname] is used for open and close tag if full name field {fullname} was input, for example, in templates/Default/userinfo.tpl,

    Find:

    <li><span class="grey">Full name:</span> <b>{fullname}</b></li>

    Replace with:

    [fullname]<li><span class="grey">Full name:</span> <b>{fullname}</b></li>[/fullname]
    If the user input the information in Full name filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
  2. [icq]xxx[/icq] is used for open and close tag if icq field {icq} was input, for example, in templates/Default/userinfo.tpl,

    Find:

    <li><span class="grey">ICQ:</span> <b>{icq}</b></li>

    Replace with:

    [icq]<li><span class="grey">ICQ:</span> <b>{icq}</b></li>[/icq]
    If the user input the information in icq filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
  3. [land]xxx[/land] is used for open and close tag if location field {land} was input, for example, in templates/Default/userinfo.tpl,

    Find:

    <li><span class="grey">Location:</span> {land}</li>

    Replace with:

    [land]<li><span class="grey">Location:</span> {land}</li>[/land]
    If the user input the information in location filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
  4. [info]xxx[/info] is used for open and close tag if short information field {info} was input, for example, in templates/Default/userinfo.tpl,

    Find:

    <li><span class="grey">Information:</span> {info}</li>

    Replace with:

    [info]<li><span class="grey">Information:</span> {info}</li>[/info]
    If the user input the information in short information filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
  5. [signature]xxx[/signature] is used for open and close tag if signature field {signature} was filled, for example,

    Example Code:

    [signature]<hr /> <b>{signature}</b>[/signature]
    If the user filled the information in signature filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
  6. [news-num]xxx[/news-num] is used for open and close tag if the user have posted article in your website for example,

    Example Code:

    [news-num]<li style="margin-top:10px;">Posts: <b>{news-num}</b>  <span class="button">{news}</span> 
    [rss]<img alt="" src="{THEME}/images/ico/ico_rss.png" border="0" style="vertical-align:middle; margin-bottom: 3px;" title="Feed - Bookmark Posts" />[/rss]</li>[/news-num]
    If the user had posted at least 1 article in your website then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
  7. [comm-num]xxx[/comm-num] is used for open and close tag if the user have posted comment in your website for example,

    Example Code:

    [comm-num]<li style="margin-top:10px;">Comments: <b>{comm-num}</b> <span class="button">{comments}</span></li>[/comm-num]
    If the user had posted at least 1 comment in your website then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments

Download File (Attached File)

Download Now Pass: dlestarter.com

Reference User Manual:

http://dle-news.ru/extras/diffs/93/ http://dle-news.ru/extras/diffs/94/ http://dle-news.ru/extras/diffs/95/ http://dle-news.ru/extras/diffs/96/
Print Friendly Version
Rating: {rating_num}
0
  Back to DLE Upgrade  Back Home

Related Tutorials

 Upgrade Theme 10.4 to 10.5

Datalife Engine 10.5 is "the most completed features version in the history of release versions according to DLE expert", in this tutorial we will show you how to upgrade template/theme when you...more »

 Upgrade theme 9.8 to 10.0

Upgrade theme for Datalife Engine 9.8 to 10.0 is the most easiest theme upgrade in DLE history because there is only one file to modify, not only that the file is only if you want to allow users to...more »

 Upgrade Theme 9.3 to 9.5

Upgrade Datalife Engine theme from 9.3 to 9.5 is our upgrade guide project to help users upgrade the theme in single tutorial without having to worry about 9.4 upgrade process, this tutorial will...more »

 Upgrade Theme 9.2 to 9.4

Upgrade Datalife Engine theme from 9.2 to 9.4 is our upgrade guide project to help users upgrade the theme in single tutorial without having to worry about 9.3 upgrade version, this tutorial will...more »

Review/Leave Comment

comments powered by Disqus
Téléchargement gratuit illimité
Advertise with us