Guide Category

134

Upgrade Theme 9.5 to 9.6

This tutorial will show you how upgrade Datalife Engine template from version 9.5 to 9.6 step by step. The new version of 9.6 has a lot of new features but many of those features are added in admin cp, so in front page not much to modify and the main modifications are popup windows for upload files and user profile for online/offline status as well as PM usage status, so the theme upgrade process is quite simple.
dlestarter
Upgrade Theme 9.5 to 9.6
Upgrade Theme
9.5 to 9.6
Last Updated: November 20, 2013
This tutorial will show you how upgrade Datalife Engine template from version 9.5 to 9.6 step by step. The new version of 9.6 has a lot of new features but many of those features are added in admin cp, so in front page not much to modify and the main modifications are popup windows for upload files and user profile for online/offline status as well as PM usage status, so the theme upgrade process is quite simple.

Files to modify:

  1. engine.css
  2. styles.css (or your theme main css style file)
  3. frame.css
  4. comments.tpl
  5. fullstory.tpl
  6. shortstory.tpl
  7. pm.tpl
  8. profile_popup.tpl
  9. userinfo.tpl

Files to add: (included in attached file for download)

  1. /bbcodes/typograf.gif
  2. /images/button.png
  3. /images/loading.gif
  4. /images/offline.png
  5. /images/online.png
  6. /images/shadow.png
  7. /images/tableft.gif
  8. /images/tabright.gif

Download the attached file and upload to your theme folder

Files to modify:

Open style/engine.css

Add at the end of file:

/*---progress bar length for personal messages---*/
.pm_progress_bar {
	border: 1px solid #d8d8d8;
	padding: 1px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.pm_progress_bar span {
	background: #000000;
	font-size: 0em;
	text-indent: -2000em;
	height: 10px;
	display: block;
	overflow: hidden;
}
Some themes use different folders like "styles" or "css", but what you need is add the code to engine.css within those folders, if your theme doesn't have engine.css, you can add the code to one of your css files
Open style/styles.css

Add at the end of file:

.pm_status {
	float:left;
	border: 1px solid #d8d8d8;
	padding: 0px;
	background-color: #fff;
	width: 280px;
	height: 100px;
	margin-left: 20px;
	margin-right: 5px;
}
.pm_status_head {
	border-bottom: 1px solid #d8d8d8;
	font-size: 0.9em; 
	background: #fff url("../images/bbcodes.png") repeat-x 0 100%;
	height: 22px;
	padding: 0;
	font-weight: bold;
	text-align: center;
	color: #4e4e4e;
}
Some themes use different folders like "styles" or "css", but what you need is add the code to styles.css or style.css within those folders, if your theme doesn't have styles.css, you can add the code to one of your css files
Open the file frame.css

Find:

html,body{
	height:100%;
	margin:0px;
	padding: 0px;
	background: none;
}

Replace with:

html,body{
	font-size: 11px;
	font-family: verdana;
	height:100%;
	margin:0px;
	padding: 0px;
	background: none;
}
img {
	border:0px;
}
/*--- horizontal menu in the file upload ---*/
.tabs {
	font: bold 11px/1.5em Verdana;
	float:left;
	width:100%;
	background:change-background;
	line-height:normal;
}
.tabs ul {
	margin:0;
	padding:10px 10px 0 5px;
	list-style:none;
}
.tabs li {
	display:inline;
	margin:0;
	padding:0;
}
.tabs a {
	float:left;
	background:url("images/tableft.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 7px;
	text-decoration:none;
}
.tabs a span {
	float:left;
	display:block;
	background:url("images/tabright.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#6B78A9;
}
.tabs a span {float:none;}
.tabs a:hover span,
.tabs a.current span {
	color:#6B78A9;
}
.tabs a:hover,
.tabs a.current {
	background-position:0% -42px;
}
.tabs a:hover span,
.tabs a.current span {
	background-position:100% -42px;
}
/*--- block for file upload and uploaded files ---*/
.box {
	height: 300px;
	border:1px solid #B3B3B3;
	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
	background:#fff url(images/shadow.png) repeat-x;
	overflow: auto;
}
Open the file comments.tpl

Find:

<li>Registration: {registration}</li>

Add after:

<li>Status: [online]<img src="{THEME}/images/online.png" style="vertical-align: middle;" title="Currently Online" alt="Currently Online" />[/online][offline]<img src="{THEME}/images/offline.png" style="vertical-align: middle;" title="Currently Offline" alt="Currently Offline" />[/offline]</li>
The themes are different designed, but the reason of modification is add the online/offline status next to registration, however, you can add the status to anywhere you want the status icon to display
Open the file fullstory.tpl and shortstory.tpl

Find:

<div class="ratebox"><div class="rate">{rating}</div></div>

Replace with:

[rating]<div class="ratebox"><div class="rate">{rating}</div></div>[/rating]
The themes are different designed, but the reason of modification is add the open/closed tags for [rating] and [/rating] to cover rating tag so if the article rating enable or disable then the rating style will be removed
Open the file pm.tpl

Find:

<div class="dpad">[inbox]Inbox[/inbox] | [outbox]Outbox[/outbox] | [new_pm]Send New PM[/new_pm]</div>

Replace with:

<div class="dpad">
<div class="pm_status">
	<div class="pm_status_head">PM Statistics</div>
	<div class="pm_status_content">PM for your account usages:
{pm-progress-bar}
{proc-pm-limit}% out of ({pm-limit} allowed)
	</div>
</div>
<div style="padding-top:10px;">[inbox]Inbox[/inbox]<br /><br />
[outbox]Outbox[/outbox]<br /><br />
[new_pm]Send New PM[/new_pm]</div>
</div><br />
<div class="clr"></div>
The themes are different designed, but the reason of modification is add the PM box status, this status will show you how hoch space you have used for your PM limit assigned to your usergroup account, the following tags are added to this file:
- {pm-progress-bar} this is the bar to show the level of pm box in your account
- {proc-pm-limit}% this is the percentage of usages
- {pm-limit} this is the total PM message allowed for your user account (Set in usergroup manager)
Open the file profile_popup.tpl

Find:

<li><span class="grey">Last Visited:</span> <b>{lastdate}</b></li>

Replace with:

<li><span class="grey">Last Visited:</span> <b>{lastdate}</b>, <span class="grey">Status:</span> [online]<img src="{THEME}/images/online.png" style="vertical-align: middle;" title="Currently Online" alt="Currently Online" />[/online][offline]<img src="{THEME}/images/offline.png" style="vertical-align: middle;" title="Currently Offline" alt="Currently Offline" />[/offline]</li>
The themes are different designed, but the reason of modification is add the online/offline status next to last visited, however, you can add the status to anywhere you want the status icon to display
Open the file userinfo.tpl

Find:

<li><span class="grey">Last visited:</span> <b>{lastdate}</b></li>

Add after:

<li>Status: [online]<img src="{THEME}/images/online.png" style="vertical-align: middle;" title="Currently Online" alt="Currently Online" />[/online][offline]<img src="{THEME}/images/offline.png" style="vertical-align: middle;" title="Currently Offline" alt="Currently Offline" />[/offline]</li>
The themes are different designed, but the reason of modification is add the online/offline status next to last visited, however, you can add the status to anywhere you want the status icon to display

Related Tutorials

Review/Leave Comment

comments powered by Disqus