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 and nice features from DLE.
The following template files are upgraded and modified when you upgrade DLE 8.5 to 9.0
1) engine.css
2) addcomments.tpl
3) addnews.tpl
4) login.tpl
5) main.tpl
6) pm.tpl
7) preview.css
The following files are added
1) preview.tpl
2) profile_popup.tpl
3) ui-bg_glass_75.png (images folder)
4) ui-bg_glass_85.png (images folder)
5) ui-bg_gloss-wave.png (images folder)
6) ui-icons.png (images folder)
7) ui-icons_h.png (images folder)
If you get stuck on any steps, please prefer to upgrade guide at
http://www.dle-news.ru/extras/diffs/90/
Template files modifications
(the theme designs are vary, if you place the engine.css in different folder name or include engine.css in different file name of different css file, please open that file for modification)
Add this code in the the file
/* ==================== Style for AJAX loading layer */
#loading-layer {
display:none;
font-family: Verdana;font-size: 11px;
background:# 000;padding:10px;
text-align:center;
border:1px solid #000;
color: #FFF;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
Find:
#dropmenudiv {
Remove style from that section
opacity: 0.95;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha (Opacity=95) progid:DXImageTransform.Microsoft.Shadow(color= #cacaca, direction=135, strength=3)";
filter: alpha(opacity=95, enabled=1) progid:DXImageTransform.Microsoft.Shadow(color=#cacaca, direction=135, strength=3);
Find and remove style for PM popup windows
/* ==================== Popup notification windows for PM */
#newpm {
position: absolute;
width: 400px;
padding: 4px;
background-color: #fdfdfd;
border: 1px solid #bbbbbb;
font-family: verdana;
color: #757575;
line-height: 135%;
}
#newpmhead er {
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
height: 20px;
color: #ffffff;
font-weight: bold;
background-color: #4972D3;
font-family: verdana;
cursor: move;
}
#newpm a {
background: transparent;
color: #4d6a8a;
text-decoration: none;
}
#newpm a:hover {
background: transparent;
color: #4d6a8a;
text-decoration: underline;
Find and remove
.highslide-footer {
height:11px;
}
.highslide-footer .highslide-resize {
float: right;
height: 12px;
width: 11px;
background: url(../dleimages/resize.gif);
}
.highslide-resize {
cursor: nw-resize;
}
At the end of the file, add the code
/* ==================== 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;}
/* ==================== Quick search on the site */
#searchsuggestions {border-width:1px; border-color:#919191; border-style:solid; width:300px; background-color:#5c9ccc; font-size:10px; line-height:14px;}
#searchsuggestions a {padding:5px;display:block; background-color:#ffffff; clear:left; height:70px; text-decoration:none;}
#searchsuggestions a:hover {background-color:#fdd08b; color:#ffffff;}
#searchsuggestions a span.searchheading {background:#5c9ccc; display:block; font-weight: bold; padding:5px; color:#ffffff;}
#searchsuggestions a:hover span.searchheading {color:#ffffff;}
#searchsuggestions a span {color:#555555;}
#searchsuggestions a:hover span {color: #000000;}
#searchsuggestions s pan.seperator {float:right; padding-right:15px; margin-right:5px;}
#searchsuggestions s pan.seperator a {background-color:transparent; display:block; height: auto; color:#ffffff;}
#searchsuggestions s pan.notfound {padding:5px;background-color:#ffffff; display:block; height:auto; color:#000000;}
/* ==================== Dialog and pop-up using jQuery UI */
.ui-helper-clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.ui-helper-clearfix {
display: inline-block;
}
* html .ui-helper-clearfix {
height: 1%;
}
.ui-helper-clearfix {
display: block;
}
.ui-icon {
background-repeat: no-repeat;
display: block;
overflow: hidden;
text-indent: -99999px;
}
.ui-widget {
font-family: Tahoma, Lucida Sans , Arial, sans-serif;
font-size: 11px;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-family: tahoma, Arial, sans-serif;
font-size: 11px;
}
.ui-widget-content {
background: #fcfdfd 50% bottom repeat-x;
border: 1px solid #a6c9e2;
color: #222222;
}
.ui-widget-content a {
color: #222222;
}
.ui-widget-header {
background: #5c9ccc url(../images/ui-bg_gloss-wave.png) 50% 50% repeat-x;
border: 1px solid #4297d7;
color: #ffffff;
font-weight: bold;
}
.ui-widget-header a {
color: #ffffff;
}
.ui-state-default, .ui-widget-content .ui-state-default {
background: #dfeffc url(../images/ui-bg_glass_85.png) 50% 50% repeat-x;
border: 1px solid #c5dbec;
color: #2e6e9e;
font-weight: bold;
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
color: #2e6e9e;
text-decoration: none;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
background: #d0e5f5 url(../images/ui-bg_glass_75.png) 50% 50% repeat-x;
border: 1px solid #79b7e7;
color: #1d5987;
font-weight: bold;
}
.ui-state-hover a, .ui-state-hover a:hover {
color: #1d5987;
text-decoration: none;
}
.ui-state-active, .ui-widget-content .ui-state-active {
background: #f5f8f9 50% 50% repeat-x;
border: 1px solid #79b7e7;
color: #e17009;
font-weight: bold;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color: #e17009;
text-decoration: none;
}
.ui-widget:active {
outline: none;
}
.ui-state-error {
background: #fef1ec 50% 50% repeat-x;
border: 1px solid #cd0a0a;
color: #cd0a0a;
}
.ui-widget-header .ui-icon {
background-image: url(../images/ui-icons.png);
}
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(../images/ui-icons_h.png);
}
.ui-icon-close {
background-position:-80px -128px;
}
.ui-icon-closethick {
background-position: -96px -128px;
}
.ui-button .ui-button-text {
display: block;
line-height: 1.4px;
}
.ui-button-text-only .ui-button-text {
padding: .4em .8em;
}
input.ui-button {
padding: .4em 1em;
}
.ui-button-set {
margin-right: 7px;
}
.ui-button-set .ui-button {
margin-left: 0;
margin-right: -.3em;
}
button.ui-button::-moz-focus-inner {
border: 0;
padding: 0;
}
.ui-dialog {
overflow: hidden;
padding: .2em;
position: absolute;
width: 300px;
}
.ui-dialog .ui-dialog-titlebar {
padding: .5em 1em .3em;
position: relative;
}
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 16px .2em 0;
}
.ui-dialog .ui-dialog-titlebar-close {
height: 18px;
margin: -10px 0 0 0;
padding: 1px;
position: absolute;
right: .3em;
top: 50%;
width: 19px;
}
.ui-dialog .ui-dialog-titlebar-close span {
display: block;
margin: 1px;
}
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus {
padding: 0;
}
.ui-dialog .ui-dialog-content {
background: none;
border: 0;
overflow: hidden;
padding: .5em 1em;
position: relative;
zoom: 1;
}
.ui-dialog .ui-dialog-buttonpane {
background-image: none;
border-width: 1px 0 0 0;
margin: .5em 0 0 0;
padding: .3em 1em .5em .4em;
text-align: left;
}
.ui-dialog .ui-dialog-buttonpane button {
cursor: pointer;
float: right;
line-height: 1.4em;
margin: .5em .4em .5em 0;
overflow: visible;
padding: .2em .6em .3em .6em;
width: auto;
}
.ui-dialog .ui-resizable-se {
bottom: 3px;
height: 14px;
right: 3px;
width: 14px;
}
.ui-draggable .ui-dialog-titlebar {
cursor: move;
}
Find
<input onclick="doAddComments();return false;" name="submit" type="image" style="width:80px; height:20px" src="{THEME}/images/dlet_bttn_ submit.gif" alt="Add Comment" />
Remove
onclick="doAddComments();return false;"
Please note: the design maybe different to find exact code but this tutorial is intended to remove "onclick" option when add comments
Find
<input type="text" name="tags" value="{tags}" maxlength="150" class="f_input" />
Replace with
<input type="text" id="tags" name="tags" value="{tags}" maxlength="150" class="f_input" autocomplete="off" />
Please note: the design maybe different to find exact code but this tutorial is intended to add id="tags" and autocomplete="off" in input
Find
<a onclick="javascript:showBusyLayer()" href="{$link_logout}">Login</a>
Remove
onclick="javascript:showBusyLayer()"
Please note: the design maybe different to find exact code but this tutorial is intended to remove onclick="javascript:showBusyLayer()" from the link to login
Find
<form method="post" onsubmit="javascript:showBusyLayer()" action=''>
Remove
onsubmit="javascript:showBusyLayer()"
Find
<form onsubmit="javascript:showBusyLayer()" method="post" action=''>
Remove
onsubmit="javascript:showBusyLayer()"
Find
<input name="story" type="text" class="s_field" style="width:184px" value="Search..." onfocus="this.value='';" />
Add id="story" in the field so it will look like this
<input id="story" name="story" type="text" class="s_field" style="width:184px" value="Search..." onfocus="this.value='';" />
Please note: the design maybe different to find exact code but this tutorial is intended to add id="story" for quick search drop down menu
Add the following information to section [b][readpm]...[/readpm]
- Date: {date}
- Register: {registration}
- <img src="{foto}" border="0" alt="" / >
- {group-icon}
- User group: {group-name}
- Posts: {news-num}
- Comments: {comm-num}
- [signature]
--------------------
{signature}
[/signature]
The template designs are different, but the information above are for the Read Message section, the information is for display the PM sender information including date of message sent, the sender registration date, sender avatar, sender user group icon, user group name, sender statistic for news posts and comments, and sender signature if available...
So you can add those details if you like and think it's needed for your template
Find
.text_spoiler {
Add before
.title_spoiler img {
margin: 0; padding: 0;
}
Files to add...
Download the attached example files to add within the templates/your-theme/ folder.
This is only example files, you can customize your theme using different designs but please prefer to the tags within the files as references...
- preview.tpl this file is for add news preview page, the theme is using pretty much the same as your shortstory.tpl, fullstory.tpl and static.tpl, so you can create your preview page based on those 3 files, there are 3 sections within the file
Example of preview.tpl
[short-preview]
You can use the full code from shortstory.tpl here
[/short-preview]
[full-preview]
You can use the full code from fullstory.tpl here
[/full-preview]
[static-preview]
You can use the full code from static.tpl here
[/static-preview]
- profile_popup.tpl please prefer to file for all tags
Reference User Manual:
http://www.dle-news.ru/extras/diffs/90/
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 ...
Datalife Engine BBCode
What is "BB Code"? A lightweight markup language used to format posts in many message boards. The available tags are usually indicated by square brackets ([ ]) ...
