Upgrade Datalife Engine theme from 9.4 to 10.0 is our upgrade guide project to help users upgrade the theme in single tutorial without having to worry about 9.5, 9.6 9.7 and 9.8 upgrade process, this tutorial will cover the theme upgrade from 9.4 to 9.5, 9.5 to 9.6, 9.6 to 9.7, 9.7 to 9.8 and 9.8 to 10.0. Usually when you upgrade Datalife Engine from version 9.4 to 10.0 you have to upgrade theme from 9.4 to 9.5, then upgrade 9.5 to 9.6, then upgrade 9.6 to 9.7, then upgrade 9.7 to 9.8 and then upgrade 9.8 to 10.0. Our all in one tutorial series will make it easy for you so that you can easily upgrade theme for 9.4 to 10.0 step by step in single tutorial.
Upgrade Theme
9.4 to 10.0
Last Updated: November 20, 2013
Upgrade Datalife Engine theme from 9.4 to 10.0 is our upgrade guide project to help users upgrade the theme in single tutorial without having to worry about 9.5, 9.6 9.7 and 9.8 upgrade process, this tutorial will cover the theme upgrade from 9.4 to 9.5, 9.5 to 9.6, 9.6 to 9.7, 9.7 to 9.8 and 9.8 to 10.0. Usually when you upgrade Datalife Engine from version 9.4 to 10.0 you have to upgrade theme from 9.4 to 9.5, then upgrade 9.5 to 9.6, then upgrade 9.6 to 9.7, then upgrade 9.7 to 9.8 and then upgrade 9.8 to 10.0. Our all in one tutorial series will make it easy for you so that you can easily upgrade theme for 9.4 to 10.0 step by step in single tutorial.
- addnews.tpl
- comments.tpl
- feedback.tpl
- fullstory.tpl
- navigation.tpl
- navigation.tpl
- profile_popup.tpl
- shortstory.tpl
- static.tpl
- userinfo.tpl
- preview.css
- /style/engine.css
- styles.css
- .htaccess
- Add image dleimages/noavatar.png
1) Open addnews.tpl
add the following code on the beginning of the file:
<link rel="stylesheet" type="text/css" href="engine/skins/chosen/chosen.css"/>
<script type="text/javascript" src="engine/skins/chosen/chosen.js"></script>
<script type="text/javascript">
$(function(){
$('#category').chosen({allow_single_deselect:true, no_results_text: 'No category found or not selected'});
});
</script>
Find:
<tr>
<td class="label">
Category:<span class="impot">*</span>
</td>
<td>{category}</td>
</tr>
Add After:
<tr>
<td class="label"> </td>
<td><a href="#" onclick="$('.addvote').toggle();return false;">Add a Poll</a></td>
</tr>
<tr class="addvote" style="display:none;" >
<td class="label">Poll Title:</td>
<td><input type="text" name="vote_title" value="{votetitle}" maxlength="150" class="f_input" /></td>
</tr>
<tr class="addvote" style="display:none;" >
<td class="label">Poll Question:</td>
<td><input type="text" name="frage" value="{frage}" maxlength="150" class="f_input" /></td>
</tr>
<tr class="addvote" style="display:none;" >
<td class="label">Answer Choices:<br /><br />One answer choice per line</td>
<td><textarea name="vote_body" rows="10" class="f_textarea" >{votebody}</textarea><br /><input type="checkbox" name="allow_m_vote" value="1" {allowmvote}> Allow multiple selections</td>
</tr>
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!
2) Open 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
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
3) 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]
4) Open 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
5) 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.
6) Open 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]
7) Open profile_popup.tpl
Find:
{news_num} [ {news} ]
Add after:
[rss]<img src="{THEME}/images/rss.png" alt="rss" style="vertical-align: middle; margin-left: 5px;" />[/rss]
Find:
{news_num}
Replace with:
{news-num}
Find:
{comm_num}
Replace with:
{comm-num}
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
8) Open 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
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 userinfo.tpl
Find:
{news_num}
Replace with:
{news-num}
Find:
{comm_num}
Replace with:
{comm-num}
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!
11/12) Open the file /style/engine.css and preview.css
Add the following code at the end:
/*--- Code tag highlight [ code ]---*/
pre code {
display: block; padding: 0.5em;
background: #f9fafa;
border: 1px solid #dce7e7;
overflow:auto;
white-space: pre;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
color: #93a1a1;
font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .lisp .title {
color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #2aa198;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .builtin,
pre .built_in,
pre .lisp .title,
pre .identifier,
pre .title .keymethods,
pre .id {
color: #268bd2;
}
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
font-weight: bold;
}
pre .attribute,
pre .variable,
pre .instancevar,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .label {
color: #b58900;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .diff .change,
pre .special,
pre .keymethods,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
color: #cb4b16;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #eee8d5;
}
Different theme designs are different, some of theme use /style/engine.css, some use /styles/engine.css, some use /css/engine.css, some don't use engine.css file but use different name or file, but the point is to add this tag within the theme anywhere in css file
12) 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:
/*---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;
}
/*---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;
}
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
13) Open style/styles.css
Add to the end of the 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
14) open the {THEME}/.htaccess
The .htaccess file in your "
templates/your_theme" folder
replace all the code inside the file with the following contents:
Order allow,deny
Deny from all
<FilesMatch ".(css)$|^$">
Order deny,allow
Allow from all
</FilesMatch>
For example if you are using theme "WStarter" then the file /templates/WStarter/.htaccess must contain the code above
15) 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)
Please download the attached file and place them within folder /templates/YOUR THEME/
The following files are included in the package (You can use your own images if you like)
- frame.css (popup windows page)
- print.tpl (articles print page)
- static_print.tpl (static print page)
- dleimages/closemarker.png
- dleimages/marker.png
- dleimages/no_image.jpg
- dleimages/social-icons.png
- bbcodes/typograf.gif
- images/button.png
- images/loading.gif
- images/offline.png
- images/online.png
- images/shadow.png
- images/tableft.gif
- images/tabright.gif
relatednews.tpl
relatednews.tpl: this file is used for tag
{related-news} for related news in fullstory.tpl, the purpose of this file to be added independently because Datalife Engine have added and improve the new way to display related news, they have added some tags that are very helpful for those who want to customize the way related news to display, now you can use additional tags to display images and text from the article for additional enhanced look...the following tags are applied within the file relatednews.tpl:
- {image-X}: This will display the image you have uploaded and added in the article, the X indicates the image number, if you add only 1 image then the tag will be {image-1}, if you have added more than 1 image, you can specify the image number like {image-2}, {image-3} and so on...the tag only identify the image name, but it will not give you the full html code, so you must manually input the proper img code like:
Example Code:
<img src="{image-1}" alt="" width="xxx" height="xxx" />
<img src="{image-2}" alt="" width="xxx" height="xxx" />
<img src="{image-3}" alt="" width="xxx" height="xxx" />
- {text limit="XXX"}: This will display the short story description as additional details than title, the older version you can only use title for related news unless you use some hacks to get anything else display, now you add additional text description, the XXX indicates how many letters and characters you want the short description to display, if the max text has reach the number you specified then it will be cut out the rest of shortstory automatically. Please note that the tag {text limit="xxx"} will only grab everything in regular text format, it will not grab any styles, bbcode styles or html code styles
- New in 9.5, you can now use all xfields in your topnews and related news, for example:
Example Code:
<img src="[xfvalue_poster]" alt="" width="xxx" height="xxx" />
topnews.tpl
topnews.tpl This file is used for the tag "{topnews}" in either main.tpl or sidebar.tpl (depending on design), the purpose of this file and the additional tags are exactly the same as relatednews.tpl above, you can use tags {image-X} and {text limit="XXX"}, you can also use xfield as same as relatednews.tpl, so please refer to the details above the additional tags
Both files relatednews.tpl and topnews.tpl are using the default tag
Example Code:
<li><a href="{link}">{title}</a></li>
- {link}: is the full link url for the article, it will automatically converted to any link formats of your SEO settings or none SEO
- {title}: is the actual article title
Additional Tags for DLE 9.5, 9.6 in user profile and commnets
There are a few tags added in 9.5,9.6 but we don't seem to find the information anywhere, even the themes come with the DLE 9.5,9.6 package don't even add these tags in the themes so this information you can only find in DLEStarter.com!...
- [fullname]xxx[/fullname] is used for open and close tag if full name field {fullname} was input, for example, in templates/Default/userinfo.tpl,
Find:
<li><span class="grey">Full name:</span> <b>{fullname}</b></li>
Replace with:
[fullname]<li><span class="grey">Full name:</span> <b>{fullname}</b></li>[/fullname]
If the user input the information in Full name filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
- [icq]xxx[/icq] is used for open and close tag if icq field {icq} was input, for example, in templates/Default/userinfo.tpl,
Find:
<li><span class="grey">ICQ:</span> <b>{icq}</b></li>
Replace with:
[icq]<li><span class="grey">ICQ:</span> <b>{icq}</b></li>[/icq]
If the user input the information in icq filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
- [land]xxx[/land] is used for open and close tag if location field {land} was input, for example, in templates/Default/userinfo.tpl,
Find:
<li><span class="grey">Location:</span> {land}</li>
Replace with:
[land]<li><span class="grey">Location:</span> {land}</li>[/land]
If the user input the information in location filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
- [info]xxx[/info] is used for open and close tag if short information field {info} was input, for example, in templates/Default/userinfo.tpl,
Find:
<li><span class="grey">Information:</span> {info}</li>
Replace with:
[info]<li><span class="grey">Information:</span> {info}</li>[/info]
If the user input the information in short information filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
- [signature]xxx[/signature] is used for open and close tag if signature field {signature} was filled, for example,
Example Code:
[signature]<hr /> <b>{signature}</b>[/signature]
If the user filled the information in signature filed then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
- [news-num]xxx[/news-num] is used for open and close tag if the user have posted article in your website for example,
Example Code:
[news-num]<li style="margin-top:10px;">Posts: <b>{news-num}</b> <span class="button">{news}</span>
[rss]<img alt="" src="{THEME}/images/ico/ico_rss.png" border="0" style="vertical-align:middle; margin-bottom: 3px;" title="Feed - Bookmark Posts" />[/rss]</li>[/news-num]
If the user had posted at least 1 article in your website then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments
- [comm-num]xxx[/comm-num] is used for open and close tag if the user have posted comment in your website for example,
Example Code:
[comm-num]<li style="margin-top:10px;">Comments: <b>{comm-num}</b> <span class="button">{comments}</span></li>[/comm-num]
If the user had posted at least 1 comment in your website then it will show, if not then nothing will show, this tag is intended for remove empty fields in user profile and comments