Upgrade template from 8.5 to 9.0 is one of the biggest and major changes 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. This upgrade has a lot of files to add and modify because there are so many features are added to 9.0 due to this version has big changes by adding jQuery library to this new version which is very big improvements. This tutorial will guide you step by step how to upgrade your theme from 8.5 to 9.0 step by step as well as attached file
Upgrade Theme
8.5 to 9.0
Last Updated: November 20, 2013
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. This upgrade has a lot of files to add and modify because there are so many features are added to 9.0 due to this version has big changes by adding jQuery library to this new version which is very big improvements.
This tutorial will guide you step by step how to upgrade your theme from 8.5 to 9.0.
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/
1) Open css/engine.css
(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;
}
2) Open addcomments.tpl
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
3) Open addnews.tpl
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
4) Open login.tpl
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()"
5) Open main.tpl
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
6) Open pm.tpl
Add the following information to section [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
7) Open preview.css
Find
.text_spoiler {
Add before
.title_spoiler img {
margin: 0; padding: 0;
}
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