Guide Category

134

Upgrade theme 9.6 to 9.8

Upgrade Datalife Engine theme from 9.6 to 9.8 is our upgrade guide project to help users upgrade the theme in single tutorial without having to worry about 9.7 upgrade process, this tutorial will cover the theme upgrade from 9.6 to 9.7 and 9.7 to 9.8. Usually when you upgrade Datalife Engine from version 9.6 to 9.7 and then upgrade 9.7 to 9.8, our all in one tutorial series will make it easy for you so that you can easily upgrade theme for 9.6 to 9.8 step by step in single tutorial.
dlestarter
Upgrade theme 9.6 to 9.8
Upgrade Theme
9.6 to 9.8
Last Updated: November 20, 2013
Upgrade Datalife Engine theme from 9.6 to 9.8 is our upgrade guide project to help users upgrade the theme in single tutorial without having to worry about 9.7 upgrade process, this tutorial will cover the theme upgrade from 9.6 to 9.7 and 9.7 to 9.8. Usually when you upgrade Datalife Engine from version 9.6 to 9.7 and then upgrade 9.7 to 9.8, our all in one tutorial series will make it easy for you so that you can easily upgrade theme for 9.6 to 9.8 step by step in single tutorial.
1) Add and copy images
Upload the attached images with this article to your template folder "dleimages", the package contains the following files:
- closemarker.png
- marker.png
- social-icons.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)
2) Open the 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;
}
(The theme structure maybe different, so what you need is open your engine.css or your default css style file)

Add the following code on the end of the file:

/*---Displaying the results of voting on the website---*/
.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);
}
/*---Displaying the results of poll in the news---*/
.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);
}
/*---BB Editor---*/
.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;
}
/*---Select text and a pop-up window (Share)---*/
#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;
}
3) Open the file addnews.tpl

Find:

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

Replace with:

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

Find:

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

Replace with:

				[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}
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!
4) 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
5) 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]
6) 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
7) 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.
8) Open the file pm.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]
9) 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!
10) Open the file userinfo.tpl

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!

Related Tutorials

Review/Leave Comment

comments powered by Disqus