Guide Category

134

Upgrade Theme 9.0 to 9.2

Upgrade Datalife Engine theme from 9.0 to 9.2 is one of the most headache process in the DLE themes because Datalife Engine made the big changes in structure especially login.tpl, in the past DLE theme use login file theme in php and not that easy to make changes and customize due to many users still have problems with php error handling, but in 9.2, DLE has eliminated the php structure to use simple html code. Also there is good news for those who want to use google reCaptcha instead of build-in captcha to make your site more secure.
dlestarter
Upgrade Theme 9.0 to 9.2
Upgrade Theme
9.0 to 9.2
Last Updated: November 20, 2013
Upgrade Datalife Engine theme from 9.0 to 9.2 is one of the most headache process in the DLE themes because Datalife Engine made the big changes in structure especially login.tpl, in the past DLE theme use login file theme in php and not that easy to make changes and customize due to many users still have problems with php error handling, but in 9.2, DLE has eliminated the php structure to use simple html code. Also there is good news for those who want to use google reCaptcha instead of build-in captcha to make your site more secure.

In this tutorial I will show you how to upgrade your theme from 9.0 to work with 9.2 step by step so that you can easily upgrade your theme, please note that in some files are not easy to follow step from the original manual so I will try to make is as easy as possible for you to understand the concept because there are very few users using Default theme, but the tutorial will follow Default theme as major change, in that case I will put note for you to understand so that you can make changes in your favorite theme instead of Default theme.

Files to change:

- engine.css (Change and add editor style)
- style.css (add topnews list style)
- addcomments.tpl (add google reCaptcha)
- addnews.tpl (add google reCaptcha)
- feedback.tpl (add google reCaptcha)
- fullstory.tpl (add tag if related news available)
- login.tpl (major changes from php to simple html)
- lostpassword.tpl (add google reCaptcha)
- main.tpl (add topnews list)
- pm.tpl (add google reCaptcha for sending PM)
- registration.tpl (add google reCaptcha)
- vote.tpl (add link to show all votes)

Files to add:

- bbcodes/list.gif
- bbcodes/ol.gif

Files to change

1) Open css/engine.css
(The theme designs maybe different if you place engine.css in different folder or put the code in different file, you must edit that file instead)

Find

.editor_button {

Add before

.editor input[type="text"] {font-size: 11px; font-family: tahoma; background: #fff url(../images/dlet_field_o.gif) repeat-x; border: 1px solid #bcc0c2;}

Find and remove:

/* ==================== AutoComplete tag clouds */
.autocomplete-w1 {position:absolute; top:0px; left:0px; margin:8px 0 0 6px; /*IE6 fix:*/ _background:none; _margin:0;}
.autocomplete {border:1px solid #999; background: #FFF; cursor:default; text-align:left; max-height: 350px; overflow:auto; margin:-6px 6px 6px -6px; /*IE6 specific:*/ _height:350px; _margin:0;_overflow-x:hidden;}
.autocomplete .selected {background:#F0F0F0;}
.autocomplete div {font-size:11px;font-family: verdana;padding:2px 5px; white-space:nowrap;}
.autocomplete strong  {font-weight:normal; color:#3399FF;}
If you can't find the code, you can search for "autocomplete-w1" ans remove the rest of code section

Find

#searchsuggestions a {padding:5px;display:block;background-color:#ffffff;clear:left ;height:70px;text-decoration:none;}

Replace with:

#searchsuggestions a {padding:5px;display:block;background-color:#ffffff;clear:left ;height:75px;text-decoration:none;}

Find:

#searchsuggestions a:hover span {color:#0000;}

Replace with:

#searchsuggestions a:hover span {color:#000000;}

Find:

#searchsuggestions span.notfound {padding:5px;background-color:#ffffff;display:block;height:auto;color:#00000;}

Replace with:

#searchsuggestions span.notfound {padding:5px;background-color:#ffffff;display:block;height:auto;color:#000000;}

Find:

.ui-dialog

Add the following style to section

-moz-box-shadow:0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);

Add this style at the end of file:

/* ==================== AutoComplete tag clouds */
.ui-autocomplete {position: absolute; cursor: default; }
* html .ui-autocomplete { width:1px;} /* without this, the menu expands to 100% in IE6 */
.ui-menu {
	list-style:none;
	padding: 2px;
	margin: 0;
	display: block;
	float: left;
}
.ui-menu .ui-menu {
	margin-top: -3px;
}
.ui-menu .ui-menu-item {
	margin: 0;
	padding: 0;
	zoom: 1;
	float: left;
	clear: left;
	width: 100%;
}
.ui-menu .ui-menu-item a {
	text-decoration:none;
	di splay:block;
	padding:.2em .4em;
	line-height: 1.5;
	zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
	font-weight:  normal;
	margin: -1px ;
}
2) Open style.css

Add this style any where you like in file

button,
a {outline:none;}
.copy ul, .copy li { margin: 0;  padding: 0;}

Find (if you are not using Default theme then skip this step)

.news img  {
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	border: none;
}

Replace with:

.news img  {
	padding: 5px;
	border: none;
}

For those who don't use Default theme, please add this css style into one of your css files

button, a {outline:none;}
.copy ul, .copy li { margin: 0;  padding: 0;}
3) Open addcomments.tpl

Find:

[/sec_code]

Add after:

			[recaptcha]
			<tr>
				<td class="label">
					Type the two words: <span class="impot">*</span>
				</td>
				<td>
					<div>{recaptcha}</div>
				</td>
			</tr>
			[/recaptcha]
You can customize the table or style any ways to fit your theme design, you can use simple html like ul ol li or label so that it can fit your theme, but the tag {recaptcha} is required to be added anything else you can customize or use your own translations to your own languages
4) Open addnews.tpl

Find

[/sec_code]

Add after:

		[recaptcha]
		<tr>
			<td class="label">
				Enter two words,<br />in the picture:<span class="impot">*</span>
			</td>
			<td>
				<div>{recaptcha}</div>
			</td>
		</tr>
		[/recaptcha]
You can customize the table or style any ways to fit your theme design, you can use simple html like ul ol li or label so that it can fit your theme, but the tag {recaptcha} is required to be added anything else you can customize or use your own translations to your own languages
5) Open feedback.tpl

Find:

		<tr>
			<td class="label">
				Enter Code:<span class="impot">*</span>
			</td>
			<td>
				<div>{code}</div>
				<div><input type="text" maxlength="45" name="sec_code" style="width:115px" class="f_input" /></div>
			</td>
		</tr>

Replace with:

		[sec_code]
                <tr>
			<td class="label">
				Enter Code:<span class="impot">*</span>
			</td>
			<td>
				<div>{code}</div>
				<div><input type="text" maxlength="45" name="sec_code" style="width:115px" class="f_input" /></div>
			</td>
		</tr>
        [/sec_code]
The theme design will be different, but the point to modify this section is to add [sec_code] and [/sec_code] to wrap and cover the code section so that you can use reCatpcha if build-in captcha disabled

Also add this below or after "[/sec_code]"

		[recaptcha]
        <tr>
			<td class="label">
				Type the two words:<span class="impot">*</span>
			</td>
			<td>
				<div>{recaptcha}</div>
			</td>
		</tr>
        [/recaptcha]
You can customize the table or style any ways to fit your theme design, you can use simple html like ul ol li or label so that it can fit your theme, but the tag {recaptcha} is required to be added anything else you can customize or use your own translations to your own languages
6) Open login.tpl
(this file will be a bit different because the major changes in structure from php to standard html, however, the login.tpl in 9.2 will use [group] and [not-group] tags for guests and members as the same concept in php but different structure by eliminate php code

Find: (the beginning of the file)

<?php 
if ($is_logged == TRUE){ 	  	  	  	 
$login_panel = <<<HTML

Replace with

[not-group=5]

Find:

Hello, <strong>{$member_id['name']}</strong> !  [<strong><a href="{$link_logout}">Logout</a></strong>]

Replace with:

Hello, <strong>{login}</strong> !  [<strong><a href="{logout-link}">Logout</a></strong>]
The theme design will be different, but the points of change here is to replace:
- Replace: {$member_id['name']} with {login} for displaying the username after logged in
- Replace: {$link_logout} with {logout-link} for logout link

Find:

HTML; 	  	  	  	 
if ($user_group[$member_id['user_group']]['allow_admin']) { 	  	  	  	 
$login_panel .= <<<HTML

Replace with:

[admin-link]

Find:

{$adminlink}

Find:

{admin-link}

Find: (first one)

HTML; 	  	  	  	 
} 	  	  	  	 
$login_panel .= <<<HTML

Replace with:

[/admin-link]
The theme design will be different, but the points of change here is to remove all php code and add [admin-link] and [/admin-link] to wrap and cover the link to Administration Control Panel to hide or show the admin link if the users have permission to access to Admin CP otherwise it will remove the link to those who don't have access to admin.

Also to change the admin link from {$adminlink} to {admin-link}

Find:

{$link_profile}

Replace with:

{profile-link}

Find:

{$link_pm}

Replace with:

{pm-link}

Find:

({$member_id['pm_unread']} | {$member_id['pm_all']})

Replace with:

({new-pm} | {all-pm})

Find:

{$link_favorites}

Replace with:

{favorites-link}

Find:

{$link_addnews}

Replace with:

{addnews-link}

Find:

{$link_stats}

Replace with:

{stats-link}

Find:

{$link_newposts}

Find:

{newposts-link}

Find: (second one)

HTML;
} else {
$login_panel = <<<HTML

Replace with:

[/not-group]
[group=5]

Find:

{$link_lost}

Replace with:

{lostpassword-link}

Find:

{$link_regist}

Replace with:

{registration-link}

Find: (at the end of the file)

HTML;
}
?>

Replace with:

[/group]
7) Open lostpassword.tpl

Find:

		<tr>
			<td class="label">
				Enter Security Code<br />in the image:<span class="impot">*</span>
			</td>
			<td>
				<div>{code}</div>
				<div><input class="f_input" style="width:115px" maxlength="45" name="sec_code" size="14" /></div>
			</td>
		</tr>

Replace with:

		[sec_code]
         <tr>
			<td class="label">
				Enter Security Code<br />in the image:<span class="impot">*</span>
			</td>
			<td>
				<div>{code}</div>
				<div><input class="f_input" style="width:115px" maxlength="45" name="sec_code" size="14" /></div>
			</td>
		</tr>
        [/sec_code]
The theme design will be different, but the point to modify this section is to add [sec_code] and [/sec_code] to wrap and cover the code section so that you can use reCatpcha if build-in captcha disabled

Also add this below or after "[/sec_code]"

		[recaptcha]
         <tr>
			<td class="label">
				Enter two words,<br />in the picture:<span class="impot">*</span>
			</td>
			<td>
				<div>{recaptcha}</div>
			</td>
		</tr>
        [/recaptcha]
You can customize the table or style any ways to fit your theme design, you can use simple html like ul ol li or label so that it can fit your theme, but the tag {recaptcha} is required to be added anything else you can customize or use your own translations to your own languages
8) Open main.tpl

Find:

{topnews}

Replace with:

<ul>{topnews}</ul>
9) Open pm.tpl

Find:

[/sec_code]

Add after:

		[recaptcha]
		<tr>
			<td class="label">
				Type the two words:<span class="impot">*</span>
			</td>
			<td>
				<div>{recaptcha}</div>
			</td>
		</tr>
		[/recaptcha]
You can customize the table or style any ways to fit your theme design, you can use simple html like ul ol li or label so that it can fit your theme, but the tag {recaptcha} is required to be added anything else you can customize or use your own translations to your own languages
10) Open registration.tpl

Find:

[/sec_code]

Add after:

		[recaptcha]
		<tr>
			<td class="label">
				Type the two words:<span class="impot">*</span>
			</td>
			<td>
				<div>{recaptcha}</div>
			</td>
		</tr>
		[/recaptcha]
You can customize the table or style any ways to fit your theme design, you can use simple html like ul ol li or label so that it can fit your theme, but the tag {recaptcha} is required to be added anything else you can customize or use your own translations to your own languages
11) Open vote.tpl

Add this code for link to view all votes available:

<a href="" onclick="ShowAllVotes(); return false;">View All Votes</a>
Note: you must add it within the tag
[votelist].........[/votelist]

Files to add

Please save these 2 images and place them within folder /templates/YOUR THEME/bbcodes/
List BBCode Number List BBCode

If some of code you can't find especially in login.tpl because not every theme add all code and links within them then just skip the step. If you have the problems in any steps please let us know so we can help, also we would recommend that you paste your theme code to http://codepaste.net/ so that we can help you more effectively to upgrade your theme, or if you want us to help you upgrade theme for you, please email us your theme and please allow us 48 - 72 hours to complete the upgrade.

Related Tutorials

Review/Leave Comment

comments powered by Disqus