Guide Category

134

Upgrade Theme 10.0 to 10.1

In new version of Datalife engine 10.1, some theme files are added and many tags are added to this version, so upgrade theme is a bit tricky and it's not easy to understand the tags which are introduced in this new version and some theme file tags are changed so you are required to upgrade your theme to be able to get your theme working correctly

In this tutorial we will show you step by step to upgrade theme from DLE 10.0 to 10.1 with ease.
dlestarter
Upgrade Theme 10.0 to 10.1
Upgrade Theme
10.0 to 10.1
Last Updated: June 20, 2014
In new version of Datalife engine 10.1, some theme files are added and many tags are added to this version, so upgrade theme is a bit tricky and it's not easy to understand the tags which are introduced in this new version and some theme file tags are changed so you are required to upgrade your theme to be able to get your theme working correctly

In this tutorial we will show you step by step to upgrade theme from DLE 10.0 to 10.1 with ease.

Open your-theme/style/engine.css

At the bottom add:

/*---Found similar news the latest news on the site---*/
.findrelated {
	width:99%;
	background: #ffc;border:1px solid #9E9E9E;
	padding: 5px;margin-top: 7px;
	margin-right: 10px;
}
Open your-theme/frame.css

Find:

.qq-upload-spinner {display:inline-block; background: url("images/loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}

Replace with:

.qq-upload-spinner {display:none; background: url("images/loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}

In the same file add the code in the bottom of the file:

.progressbar {
  overflow: hidden;
  height: 15px;
  margin-top: 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;
}
.progressbar 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-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);
}
Open your-theme/addnews.tpl

Find:

<input type="text" name="title" value="{title}" maxlength="150" class="f_input" />

Replace with:

<input type="text" id="title" name="title" value="{title}" maxlength="150" class="f_input" /> <input class="bbcodes" style="height: 22px; font-size: 11px;" title="Find similar news" onclick="find_relates(); return false;" type="button" value="Find Similar" /><span id="related_news"></span>
Open your-theme/comments.tpl

Find:

			<li>Comments: {comm-num}</li>
			<li>Articles: {news-num}</li>

Replace with:

			<li>[declination={comm-num}]comment||s|s[/declination]</li>
			<li>[declination={news-num}]article||s|s[/declination]</li>
Open your-theme/pm.tpl

Find:

			<li>Comments: {comm-num}</li>
			<li>Articles: {news-num}</li>

Replace with:

			<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>
            <li>[declination={comm-num}]comment||s|s[/declination]</li>
			<li>[declination={news-num}]article||s|s[/declination]</li>
Open your-theme/searchresult.tpl

Replace the contents of the entire file to:

[searchposts]
[fullresult]
<div class="base shortstory">
	<div class="dpad">
		<h3 class="btl">[full-link]{title}[/full-link]</h3>
		<div class="bhinfo">
		[not-group=5]
			<ul class="isicons reset">
				<li>[edit]<img src="{THEME}/dleimages/editstore.png" title="Edit" alt="Edit" />[/edit]</li>
				<li>{favorites}</li>
			</ul>
		[/not-group]
			<span class="baseinfo radial">
				Author: {author} on [day-news]{date}[/day-news]
			</span>
			[rating]<div class="ratebox"><div class="rate">{rating}</div></div>[/rating]
		</div>
		<div class="maincont">
			{short-story}
			<div class="clr"></div>
			[edit-date]<p class="editdate"><br /><i>Last edited by: <b>{editor}</b> - {edit-date}
			<br />[edit-reason]Reason: {edit-reason}[/edit-reason]</i></p>[/edit-date]
		</div>
	</div>
	<div class="mlink">
		<span class="argmore">[full-link]<b>Read More</b>[/full-link]</span>
		<span class="argviews"><span title="Views: {views}"><b>{views}</b></span></span>
		<span class="argcoms">[com-link]<span title="Comments: {comments-num}"><b>{comments-num}</b></span>[/com-link]</span>
		<div class="mlarrow"> </div>
		<p class="lcol argcat">Category: {link-category}</p>
	</div>
</div>
[/fullresult]
[shortresult]
<div class="dpad searchitem">
	<h3>[full-link]{title}[/full-link]</h3>
	<b>[day-news]{date}[/day-news]</b> | {link-category} | Author: {author}
</div>
[/shortresult]
[/searchposts]
[searchcomments]
[fullresult]
<div class="bcomment">
	<div class="dtop">
		<div class="lcol"><span><img src="{foto}" alt=""/></span></div>
		<div class="rcol">
			<span class="reply">[fast]<b>Reply</b>[/fast]</span>
			<ul class="reset">
				<li><h4>{author}</h4></li>
				<li>{date}</li>
			</ul>
			<ul class="cmsep reset">
				<li>Group: {group-name}</li>
				<li>ICQ: {icq}</li>
			</ul>
		</div>
		<div class="clr"></div>
	</div>
	<div class="cominfo"><div class="dpad">
		[not-group=5]
		<div class="comedit">
			<div class="selectmass">{mass-action}</div>
			<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>
		</div>
		[/not-group]
		<ul class="cominfo reset">
			<li>Registration: {registration}</li>
			<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>
			<li>[declination={comm-num}]comment||s|s[/declination]</li>
			<li>[declination={news-num}]article||s|s[/declination]</li>
		</ul>
	</div>
	<span class="thide">^</span>
	</div>
	<div class="dcont">
		<h3 style="margin-bottom: 0.4em;">{news_title}</h3>
		{comment}
		[signature]<br clear="all" /><div class="signature">--------------------</div><div class="slink">{signature}</div>[/signature]
		<div class="clr"></div>
	</div>
</div>
[/fullresult]
[shortresult]
<div class="dpad searchitem">
	<h3 style="margin-bottom: 0.4em;">{news_title}</h3>
	<b>{date}</b> | Author: {author}
</div>
[/shortresult]
[/searchcomments]
This instruction is based on "Default" theme, but if you are using different theme then please note that "searchresults.tpl is now using the same exact "tags" as "shortstory.tpl" and "comments.tpl" so to make this file easier for you is to copy code from "shortstory.tpl" and "comments.tpl" to searchresults.tpl.

searchresults.tpl has 2 main sections as follow:

searchresults.tpl:

[searchposts]

    [fullresult]
        This should use exactly the same html code and tags as "shortstory.tpl"
        (copy shortstory.tpl code here)
    [/fullresult]

    [shortresult]
        this is for short result of "shortstory" search
    [/shortresult]

[/searchposts]

[searchcomments]

    [fullresult]
        This should use exactly the same html code and tags as "comments.tpl"
        (copy comments.tpl code here)
    [/fullresult]

    [shortresult]
        this is for short result of "comment" search
    [/shortresult]

[/searchcomments]
Create the new theme file and name it as splitnewsnavigation.tpl and place it in your /templates/YOUR-THEME/ folder

In the file place this code in the file:

<div class="dpad basenavi ignore-select">
	<div class="bnnavi">
		<div class="navigation">{pages}</div>
		<div class="nextprev">
			[prev-link]<span class="thide pprev">Previous</span>[/prev-link]
			[next-link]<span class="thide pnext">Next</span>[/next-link]
		</div>
	</div>
</div>
This instruction is based on "Default" theme, this file will be exactly the same as "navigation.tpl" of your theme, so to make it easy for you is to copy and paste the rest of the code from "navigation.tpl" to this file, or make copy of "navigation.tpl" file then rename the copied file as "splitnewsnavigation.tpl"

Related Tutorials

Review/Leave Comment

comments powered by Disqus