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
(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 ;
}
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;}
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
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
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
(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]
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
Find:
{topnews}
Replace with:
<ul>{topnews}</ul>
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
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
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/
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.
Reference User Manual: http://www.dle-news.ru/extras/diffs/92/
Upgrade Theme from 8.5 to 9.0
Upgrade template from 8.5 to 9.0 is one of the exiting feature in Datalife Engine because DLE 9.0 is the first version that use jQuery feature, so you will get some cool ...
Installation and Upgrade
Datalife Engine Installation on the server is fully automated and should not cause any problems, but you need to perform some steps to set permissions on files and ...
Category Manager
Categories is one of the most important section in DLE Administration, in category manager you can Add, Edit, Remove, Sort and specify themes and other category ...
