Guide Category

134

Upgrade theme 9.5 to 9.8

This tutorial will show you how upgrade Datalife Engine template from version 9.5 to 9.8 step by step. The new version of 9.6, 9.7 and 9.8 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.8
Upgrade Theme
9.5 to 9.8
Last Updated: November 20, 2013
This tutorial will show you how upgrade Datalife Engine template from version 9.5 to 9.8 step by step. The new version of 9.6, 9.7 and 9.8 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. styles.css (or your theme main css style file)
  2. frame.css
  3. engine.css
  4. addnews.tpl
  5. comments.tpl
  6. feedback.tpl
  7. fullstory.tpl
  8. navigation.tpl
  9. pm.tpl
  10. profile_popup.tpl
  11. shortstory.tpl
  12. static.tpl
  13. 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
  9. /dleimages/marker.png
  10. /dleimages/social-icons.png
  11. /dleimages/closemarker.png
  12. /dleimages/noavatar.png

Download the attached file and upload to your theme folder

Files to modify:

1) 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
2) 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;
}
3) Open style/engine.css

Find and delete:

.editor textarea {
    font-family: Verdana;
    word-spacing: 0.1em;
    letter-spacing: 0;
    line-height: 1.5em;
    font-size: 11px;
    color:#000;
    background: #fff url("../images/fields.png") repeat-x;
    border: 0 none;
}
.editor input[type="text"] {
    padding: 2px;
    background: #fff url("../images/fields.png") repeat-x;
    border: 1px solid #bcc0c2;
}
.editor_button {
    float: left;
    cursor: pointer;
    padding-left: 0;
    padding-right: 0;
}
.editor_buttoncl {
    float: left;
    cursor: pointer;
    padding-left: 1px;
    padding-right: 1px;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
}
.editbclose {
    float: right;
    cursor: pointer;
    display: none;
}
.editor_button select {
    font-size: 11px;
}
.editor_button img {
    margin: 0;
    padding: 0;
}
.editbclose img {
    margin: 0;
    padding: 0;
}
.editor_button_brk img {
    margin: 0;
    padding: 0;
}

Find:

.xfields textarea, .xprofile textarea {
    width: 98%;
    height: 186px;
    margin: 0px 1px 0px 0px;
    padding: 0px;
}

Replace with:

.xfields textarea, .xprofile textarea {
    height: 186px;
    margin: 0px 1px 0px 0px;
    padding: 0px;
}

Add at the end of file:

.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;
}
.voteprogress {
  overflow: hidden;
  height: 15px;
  margin-bottom: 5px;
  background-color: #f7f7f7;
  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.voteprogress span {
  color: #ffffff;
  text-align: center;
  text-indent: -2000em;
  height: 15px;
  display: block;
  overflow: hidden;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background: #0e90d2;
  background-image: -moz-linear-gradient(top, #149bdf, #0480be);
  background-image: -ms-linear-gradient(top, #149bdf, #0480be);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
  background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
  background-image: -o-linear-gradient(top, #149bdf, #0480be);
  background-image: linear-gradient(top, #149bdf, #0480be);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
}
.voteprogress .vote2 {
  background-color: #dd514c;
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(top, #ee5f5b, #c43c35);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
}
.voteprogress .vote3 {
  background-color: #5eb95e;
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -ms-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(top, #62c462, #57a957);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
}
.voteprogress .vote4 {
  background-color: #4bb1cf;
  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
  background-image: linear-gradient(top, #5bc0de, #339bb9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
}
.voteprogress .vote5 {
  background-color: #faa732;
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: -ms-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(top, #fbb450, #f89406);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
}
.pollprogress {
  overflow: hidden;
  height: 18px;
  margin-bottom: 5px;
  background-color: #f7f7f7;
  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.pollprogress span {
  color: #ffffff;
  height: 18px;
  display: block;
  overflow: hidden;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background: #0e90d2;
  background-image: -moz-linear-gradient(top, #149bdf, #0480be);
  background-image: -ms-linear-gradient(top, #149bdf, #0480be);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
  background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
  background-image: -o-linear-gradient(top, #149bdf, #0480be);
  background-image: linear-gradient(top, #149bdf, #0480be);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
}
.pollprogress .poll2 {
  background-color: #dd514c;
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(top, #ee5f5b, #c43c35);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
}
.pollprogress .poll3 {
  background-color: #5eb95e;
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -ms-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(top, #62c462, #57a957);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
}
.pollprogress .poll4 {
  background-color: #4bb1cf;
  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
  background-image: linear-gradient(top, #5bc0de, #339bb9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
}
.pollprogress .poll5 {
  background-color: #faa732;
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: -ms-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(top, #fbb450, #f89406);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
}

Continue... (Add at the end of the file)

.bb-pane { height: 1%; overflow: hidden; border: 1px solid #BBB; background-image: url("../bbcodes/bg.gif"); }
.bb-btn, .bb-sep { height: 25px; float: left; display: block; overflow: hidden; text-indent: -9999px; white-space: nowrap; }
.bb-sel { float: left; padding: 4px 2px 0 2px; }
.bb-sel select { font-size: 11px; }
.bb-sep { width: 5px; background-image: url("../bbcodes/brkspace.gif"); }
.bb-btn { cursor: pointer; width: 23px; }
#b_font { width: 118px;}
#b_size { width: 65px;}
#b_font select { padding: 0px;}
#b_size select { padding: 0px;}
#b_b { background-image: url("../bbcodes/b.gif"); }
#b_i { background-image: url("../bbcodes/i.gif"); }
#b_u { background-image: url("../bbcodes/u.gif"); }
#b_s { background-image: url("../bbcodes/s.gif"); }
#b_img { background-image: url("../bbcodes/image.gif"); }
#b_up { background-image: url("../bbcodes/upload.gif"); }
#b_emo { background-image: url("../bbcodes/emo.gif"); }
#b_url { background-image: url("../bbcodes/link.gif"); }
#b_leech { background-image: url("../bbcodes/leech.gif"); }
#b_mail { background-image: url("../bbcodes/email.gif"); }
#b_video { background-image: url("../bbcodes/mp.gif"); }
#b_audio { background-image: url("../bbcodes/mp3.gif"); }
#b_hide { background-image: url("../bbcodes/hide.gif"); }
#b_quote { background-image: url("../bbcodes/quote.gif"); }
#b_code { background-image: url("../bbcodes/code.gif"); }
#b_left { background-image: url("../bbcodes/l.gif"); }
#b_center { background-image: url("../bbcodes/c.gif"); }
#b_right { background-image: url("../bbcodes/r.gif"); }
#b_color { background-image: url("../bbcodes/color.gif"); }
#b_spoiler { background-image: url("../bbcodes/spoiler.gif"); }
#b_fla { background-image: url("../bbcodes/flash.gif"); }
#b_yt { background-image: url("../bbcodes/youtube.gif"); }
#b_tf { background-image: url("../bbcodes/typograf.gif"); }
#b_list { background-image: url("../bbcodes/list.gif"); }
#b_ol { background-image: url("../bbcodes/ol.gif"); }
#b_tnl { background-image: url("../bbcodes/translit.gif"); }
#b_br { background-image: url("../bbcodes/pbreak.gif"); }
#b_pl { background-image: url("../bbcodes/page.gif"); }
.bb-editor textarea { 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    padding: 2px; border: 1px solid #bcc0c2; width: 100%; background: #fff url("../images/fields.png") repeat-x;
}
.editorcomm .bb-editor { width: 465px;}
.editorcomm .bb-editor textarea { height: 156px; }
.clr {
    clear: both;
}
#marker-bar,
#txtselect_marker {
	display: block;
	visibility: hidden;
    position: absolute;
    z-index: 1200;
    opacity: 0;
    -webkit-transition: opacity .4s, visibility .1s linear .4s;
    -moz-transition: opacity .4s, visibility .1s linear .4s;
    -o-transition: opacity .4s, visibility .1s linear .4s;
    transition: opacity .4s, visibility .1s linear .4s;
}
#txtselect_marker {
    cursor: pointer;
    background:url(../dleimages/marker.png) -0px -0px no-repeat;
}
#txtselect_marker:hover {
        background-position: -0px -32px;
}
#marker-bar{
    border: 1px solid #ccc;
    border-radius: 15px;
    background: #fff;
    padding: 5px 10px;
    cursor: default;
    box-shadow: 0px 0px 4px #ccc;
}
#marker-bar.show {
	-webkit-transition: opacity .4s, visibility 0s;
	-moz-transition: opacity .4s, visibility 0s;
	-o-transition: opacity .4s, visibility 0s;
	transition: opacity .4s, visibility 0s;
	opacity: 1;
	visibility: visible;
}
#txtselect_marker.show {
        /* XXX make a common css fadeIn/fadeOut classes */
	visibility: visible;
	width: 32px;
	height: 32px;
	-webkit-transition: opacity .4s, visibility 0s;
	-moz-transition: opacity .4s, visibility 0s;
	-o-transition: opacity .4s, visibility 0s;
	transition: opacity .4s, visibility 0s;
	opacity: 1;
}
#marker-bar .masha-social,
#marker-bar .masha-marker{
	cursor: pointer;
	display: block;
	margin: 0 5px;
	float: left;
}
#marker-bar .masha-marker{
	line-height: 1em;
	color: #aaa;
	border-bottom: 1px dotted #aaa;
	margin-right: 10px;
}
#marker-bar .masha-marker:hover {
	color: #ea3e26;
	border-color: #ea3e26;
}
.user_selection, .user_selection_true {
	background: #c4f47d;
	padding: 2px 0;
}
.user_selection a.txtsel_close, .user_selection_true a.txtsel_close {
	display:none;
}
.user_selection .closewrap, .user_selection_true .closewrap {
	position: relative;
}
.user_selection.hover a.txtsel_close, .user_selection_true.hover a.txtsel_close {
	display: inline-block;
	position: absolute;
	top: -7px;
	left: -5px;
	width: 33px;
	height: 33px;
	background: url(../dleimages/closemarker.png) -0px -0px no-repeat;
}
.user_selection.hover a.txtsel_close:hover, .user_selection_true.hover a.txtsel_close:hover {
	background-position: -0px -33px;
}
#share-popup {
	background: #fff;
	border: 1px solid #aaa;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	position: absolute;
	width: 414px;
	display:none;
	z-index: 100;
	padding: 10px 0;
	opacity: 0;
	-webkit-transition: opacity .4s, visibility .1s linear .4s;
	-moz-transition: opacity .4s, visibility .1s linear .4s;
	-o-transition: opacity .4s, visibility .1s linear .4s;
	transition: opacity .4s, visibility .1s linear .4s;
}
#share-popup.show {
	display:block;
	opacity: 1;
	-webkit-transition: opacity .4s, visibility 0s;
	-moz-transition: opacity .4s, visibility 0s;
	-o-transition: opacity .4s, visibility 0s;
	transition: opacity .4s, visibility 0s;
	opacity: 1;
}
#share-popup .social {
	padding: 0 0 10px 17px;
	height: 40px;
}
#share-popup .social p {
	padding-bottom: 10px;
	margin: 0;
	font-weight: bold;
}
#share-popup .social ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#share-popup .social ul li {
	float: left;
	margin-right: 20px;
	padding-top: 2px;
	position: relative;
}
#share-popup .social ul a {
	text-decoration: none;
	font-size: 11px;
	display: inline-block;
	color: #aaa;
	padding-left: 25px;
}
#share-popup .social ul a:hover {
	text-decoration: underline;
	color: #ea3e26;
}
#share-popup .social a span{
	cursor: pointer;
	width: 20px;
	height: 20px;
	background: url(../dleimages/social-icons.png) 20px 20px no-repeat;
	position: absolute;
	left: 0;
	top: 0;
}
#share-popup .social .tw span{
	background-position: 0 -20px;
}
#share-popup .social .tw:hover span{
	background-position: 0 0;
}
#share-popup .social .fb span{
	background-position: -20px -20px;
}
#share-popup .social .fb:hover span {
	background-position: -20px 0;
}
#share-popup .social .vk span{
	background-position: -40px -20px;
}
#share-popup .social .vk:hover span {
	background-position: -40px 0;
}
#share-popup .social .gp span{
	background-position: -60px -20px;
}
#share-popup .social .gp:hover span {
	background-position: -60px 0;
}
#share-popup .link {
	clear: both;
	border-top: 1px solid #d9d9d9;
	padding: 10px 5px 0 10px;
	line-height: 1.2;
	overflow: hidden;
	margin: 0 7px;
}
#share-popup .link p {
	font-weight: bold;
	padding: 0 0 3px 0;
	margin: 0;
}
#share-popup .link span {
	color: #999;
	font-size: 10px;
	display: block;
	padding-top: 3px;
}
#share-popup .link a {
	display: block;
}
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
4) Open the file addnews.tpl

Find:

		<tr>
			<td colspan="2">
				<b>Short Description: <span class="impot">*</span></b> (Required)
				<div>
					[not-wysywyg]
					<div>{bbcode}</div>
					<textarea name="short_story" id="short_story" onfocus="setFieldName(this.name)" style="width:98%;" rows="15" class="f_textarea" >{short-story}</textarea>
					[/not-wysywyg]
					{shortarea}
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<b>Full Details:</b> (Optional)
				<div>
					[not-wysywyg]
					<div>{bbcode}</div>
					<textarea name="full_story" id="full_story" onfocus="setFieldName(this.name)" style="width:98%;" rows="20" class="f_textarea" >{full-story}</textarea>
					[/not-wysywyg]
					{fullarea}
				</div>
			</td>
		</tr>

Replace with:

		<tr>
			<td colspan="2">
				<b>Short Description: <span class="impot">*</span></b> (Required)
				[not-wysywyg]
				<div class="bb-editor">
					{bbcode}
					<textarea name="short_story" id="short_story" onfocus="setFieldName(this.name)" rows="15" class="f_textarea" >{short-story}</textarea>
				</div>
				[/not-wysywyg]
				{shortarea}
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<b>Full Details:</b> (Optional)
				[not-wysywyg]
				<div class="bb-editor">
					{bbcode}
					<textarea name="full_story" id="full_story" onfocus="setFieldName(this.name)" rows="20" class="f_textarea" >{full-story}</textarea>
				</div>
				[/not-wysywyg]
				{fullarea}
			</td>
		</tr>
The theme design maybe different but this tutorial is based on "Default" theme, however, the theme upgrade is focused on adding the tag css class to bbcode edit <div class="bb-editor"> around the tag {bbcode} and textarea of short and full story, so for those who are usign different theme, all you need is add div class to wrap your bbcode editor in addnews.tpl!
5) Open the file comments.tpl

Find:

			<ul class="reset">
				<li>[complaint]Report Abuse[/complaint]</li>
				<li>[com-edit]Edit[/com-edit]</li>
				<li>[com-del]Delete[/com-del]</li>
			</ul>

Replace with:

			<ul class="reset">
				<li>[spam]Spam[/spam]</li>
				<li>[complaint]Report Abuse[/complaint]</li>
				<li>[com-edit]Edit[/com-edit]</li>
				<li>[com-del]Delete[/com-del]</li>
			</ul>
The theme design maybe different but this tutorial is based on "Default" theme, however, the theme upgrade is focused on adding the tag [spam]Spam[/spam] inside the theme file for spam marker to mark the user as spammer

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
6) Open the file feedback.tpl

Find:

</tr>[/recaptcha]

Add after:

			[question]
			<tr>
				<td class="label">
					Security Question:
				</td>
				<td>
					<div>{question}</div>
				</td>
			</tr>
			<tr>
				<td class="label">
					Answer:<span class="impot">*</span>
				</td>
				<td>
					<div><input type="text" name="question_answer" id="question_answer" class="f_input" /></div>
				</td>
			</tr>
			[/question]
7) Open the file fullstory.tpl

Find:

		<h3 class="btl">{title}</h3>

Replace with:

		<h3 class="btl"><span id="news-title">{title}</span></h3>
The theme design maybe different but this tutorial is based on "Default" theme, however, the theme upgrade is focused on adding the tag <span id="news-title">{title}</span> inside the theme file, this tag is for sharing the news and slected text to social netwrok which is new feature in DLE 9.8, so all you need ti add span id="news-title" to wrap the article title in fullstory title

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
8) Open the file navigation.tpl

Find:

<br /><div class="dpad basenavi">

Replace with::

<br /><div class="dpad basenavi ignore-select">
The theme design maybe different but this tutorial is based on "Default" theme, however, the theme upgrade is focused on adding the tag class "ignore-select", this class is jquery for text selection, when users slect text to share on social network, this class will eliminate the class selection to get user the correct url to share the link, this class can be added to any of existing html class within the file to wrap navigation page links.
9) 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)

Find:

</tr>
[/recaptcha]

Add after:

			[question]
			<tr>
				<td class="label">
					Security Question:
				</td>
				<td>
					<div>{question}</div>
				</td>
			</tr>
			<tr>
				<td class="label">
					Answer:<span class="impot">*</span>
				</td>
				<td>
					<div><input type="text" name="question_answer" id="question_answer" class="f_input" /></div>
				</td>
			</tr>
			[/question]
10) 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
11) Open the file 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
12) Open the file static.tpl

Find:

		<h2 class="heading">{description}</h2>

Replace with:

		<h2 class="heading"><span id="news-title">{description}</span></h2>        
The theme design maybe different but this tutorial is based on "Default" theme, however, the theme upgrade is focused on adding the tag <span id="news-title">{description}</span> inside the theme file, this tag is for sharing the news and slected text to social netwrok which is new feature in DLE 9.8, so all you need ti add span id="news-title" to wrap the article title in static title

Please make sure that you add the tag to all static theme files, because many website using different static pages which using different file names, so if you want the new feature to be added to those pages you must add this tag to those theme otherwise the select text to share in social network may not get correct url to link back to your website!
13) 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

Find:

{edituser}

Replace with:

[not-logged]{edituser}[/not-logged]

Find:

			<tr>
				<td class="label">Avatar:</td>
				<td>
				<input type="file" name="image" class="f_input" /><br />
				<div class="checkbox"><input type="checkbox" name="del_foto" id="del_foto" value="yes" /> <label for="del_foto">Delete current avatar</label></div>
				</td>
			</tr>

Replace with:

			<tr>
				<td class="label">Avatar:</td>
				<td>Upload from your computer: <input type="file" name="image" class="f_input" /><br /><br />
				Use avatar from <a href="http://www.gravatar.com/" target="_blank">Gravatar</a>: <input type="text" name="gravatar" value="{gravatar}" class="f_input" /> (Enter your E-mail on gravatar.com)
				<br /><br /><div class="checkbox"><input type="checkbox" name="del_foto" id="del_foto" value="yes" /> <label for="del_foto">Delete current avatar</label></div>
				</td>
			</tr>
The theme design maybe different but this tutorial is based on "Default" theme, however, the theme upgrade is focused on adding the tag for gravatar.com services option for users to use their own avatar from their services and separate the avatar into 2 parts. 1) is for upload from computer which existing in all versions of previous DLE. 2) For www.gravatar.com services!
Add image dleimages/noavatar.png
Copy the image file from your default template /templates/Default/dleimages/noavatar.png folder of your template. or /templates/YOUR-THEME/images/noavatar.png (This image is using the same file as your default "noavatar.png", so you can copy your old image from /images/ folder to /dleimages/ folder)

Related Tutorials

Review/Leave Comment

comments powered by Disqus