Guide Category

134

Upgrade Theme 8.5 to 9.0

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
dlestarter
Upgrade Theme 8.5 to 9.0
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/

Template files modifications

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

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...
  1. 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]
    
  2. profile_popup.tpl please prefer to file for all tags

Related Tutorials

Review/Leave Comment

comments powered by Disqus