1. DLE Search Customization

DLE Search Customization

  |   15
DLE Search Customization


Customize Datalife Engine search box is one of the feature that we have been asked about how to make it looks good and look fancy, in this tutorial we will show you how to customize your site search box and keywords
- Enable Quick Search dropdown
- Customize search result dropdown
- Add search by category
- Add google search keyword which will generated from meta keywords for your articles
- Add special search keywords in your theme search page
- Using Open Search Feature build-in with Datalife Engine

Enable Quick Search in Datalife Engine


Datalife Engine have added the new feature in DLE 9.x version which using jQuery for quick search with quick results dropdown list, this feature can be enable or disable within DLE Admin CP, to enable this feature
- Login to Admin CP > System Settings > Database Settings tab
Enable quick search: Yes

- Open {THEME}/main.tpl, find your search box html form code and add the id="story" in input search box code, for example our search box input we use the code like this:
<input name="story" id="story" class="startersearch" type="text" value="Search..." onfocus="if(this.value=='Search...') this.value='';" onblur="if(this.value=='') this.value='Search...';" />

The designs are vary and different depending on your theme design but all you need is add id="story", you can easily disable the drop down search if you don't need by set enable quick search to "No"

Customize Search box drop down


After you enable quick search, now if you want to make the drop down box look fancy, you can modify the core file to add your box style and modify the engine.css for drop down style css, in this tutorial I will show you the style we use in this site, but you can use your own style or you can find some fancy drop down search out there on the internet...
1) First we will modify the search.php, so open /engine/ajax/search.php Find:
echo $buffer;

Replace with:
echo '<div class="fastsearch"><div class="fastsearch-top"></div><div class="fastsearch-inner">' . stripslashes ( $buffer ) . '</div></div';

2) Second, modify engine.css, so go ahead open your theme engine.css and find:
#searchsuggestions { border-width:1px; border-color:#919191; border-style:solid; width:300px; background-color:#5c9ccc; font-size:10px; line-height:14px; }
#searchsuggestions a { padding:5px;display:block; background-color:#fff; clear:left; height:75px; text-decoration:none; }
#searchsuggestions a:hover { background-color:#fdd08b; color:#fff; }
#searchsuggestions a span.searchheading { background: #5c9ccc; display:block; font-weight:bold; padding:5px; color:#fff; }
#searchsuggestions a:hover span.searchheading { color:#fff; }
#searchsuggestions a span {color:#555; }
#searchsuggestions a:hover span { color:#000; }
#searchsuggestions span.seperator { float:right; padding-right:15px; margin-right:5px;}
#searchsuggestions span.seperator a { background-color:transparent; display:block; height:auto; color:#fff; }
#searchsuggestions span.notfound { padding:5px; background-color:#fff; display:block; height:auto; color:#000; }

The style above is based on Default theme, but for your theme you will need to find #searchsuggestions section and then replace with this:
#searchsuggestions {width:300px; font-size:10px; line-height:14px; z-index: 9999}
#searchsuggestions a {padding:3px;display:block; clear:left; height:65px; text-decoration:none;color:#ccc; overflow:hidden;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#searchsuggestions a:hover { background-color:#444; color:#fff; }
#searchsuggestions a span.searchheading { background: #1b628e; display:block; font-weight:bold; padding:5px; color:#fff; margin: -3px -3px 0 -3px;white-space:nowrap; overflow:hidden}
#searchsuggestions a:hover span.searchheading { color:#fff;}
#searchsuggestions a span {color:#ccc; }
#searchsuggestions a:hover span { color:#fff; }
#searchsuggestions span.seperator { background: #444; text-align:right; margin-top:3px; display:block; white-space:nowrap; clear:both; color:#fff;-webkit-border-bottom-right-radius: 3px;-webkit-border-bottom-left-radius: 3px;-moz-border-radius-bottomright: 3px;-moz-border-radius-bottomleft: 3px;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;}
#searchsuggestions span.seperator a { background:url(../images/arrow_icon_white.gif) 266px 50% no-repeat;padding-right: 25px; height:auto; color:#fff; }
#searchsuggestions span.seperator:hover { background-color:#1B5CCD; height:auto; color:#fff; }
#searchsuggestions span.notfound { padding:5px; background-color:#ffffcc; display:block; height:auto; color:#990000;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; }
#searchsuggestions .fastsearch {opacity:0.9;background-repeat:no-repeat;padding:5px;}
#searchsuggestions .fastsearch-inner {padding:5px;background-color:#000;color:white;text-align:left;display:block;overflow: hidden;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
#searchsuggestions .fastsearch-top {background:url(../images/fastsearch-top.gif) 0 0 no-repeat;display:block;width: 9px;height: 5px;margin: -5px 0 0 10px;}

3) download this image Quick Search Top Arrow and place it in your {THEME}/images/ folder

Add search by category (Dropdown Category List)


DLE Search Customization

This is very small hack to add the categories in search box, so that you can search for specific category for quick results, please note that, this category list will be automatically generated from your database "PREFIX_category" table, unfortunately this hack will not limit or exclude the categories which allow or not allow by usergroup, but it will display all categories you have created in the entire website.

In this tutorial I will use jQuery SelectBox to customize the select/option to make it look nice instead of standard dropdown style, you can find the jQuery Select Box plugin page at http://www.abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/

Installation:
- Open index.php from root of your site directory (http://www.site.com/index.php) Find:
if ($dle_module == "showfull" ) {

Add Before (Or Add above)
$search_list = CategoryNewsSelection( 0, 0 , false);$searchcat = '<select name="catlist[]" id="category">	   
<option>'.$lang['s_allcat'].'</option>
'.$search_list.'
</select>';
$tpl->set ( '{searchlist}', $searchcat );

- Open {THEME}/main.tpl Add this code before </head>
<script type="text/javascript" src="{THEME}/js/jquery.selectBox.js"></script>
<script type="text/javascript"> $(document).ready( function() {$("#category").selectBox();});</script>

- Add this tag next to search box (before or after search in but before submit button)
{searchlist}

- Open this css style to one of your css file (styles.css or engine.css doesn't matter)
.selectBox-dropdown{width:130px;position:relative;border:1px solid #a4c3ca;background:#d4e8ec;background-image:0;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);display:block;outline:none;color:#000;text-decoration:none!important;padding:0 40px 0 0}
.selectBox-dropdown:focus,.selectBox-dropdown:focus .selectBox-arrow{border-color:#a4c3ca}
.selectBox-dropdown .selectBox-label{width:100%;white-space:nowrap;overflow:hidden;display:block;text-transform:none!important;text-decoration:none!important;padding:6px 5px}
.selectBox-dropdown .selectBox-arrow{position:absolute;right:0;top:0;width:20px;height:100%;background:url(../images/arrow_cat.png) 50% 50% no-repeat;border-left:solid 1px #a4c3ca;cursor:pointer}
.selectBox-dropdown.selectBox-menuShowing .selectBox-arrow{background:#f1f1f1 url(../images/arrow_cat.png) 50% 50% no-repeat;box-shadow:inset 1px 1px 0 0 #a4c3ca;border-bottom:solid 1px #eee}
.selectBox-dropdown.selectBox-menuShowing{box-shadow:none;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;border-bottom-right-radius:0;border-bottom-left-radius:0}
.selectBox-dropdown-menu{position:absolute;z-index:99999;border:solid 1px #a4c3ca;border-top:none;overflow:hidden;background:rgba(241,241,241,0.9);-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;text-transform:none!important;text-decoration:none!important;-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5)}
.selectBox-options{margin-top:0;text-transform:none!important;text-decoration:none!important}
.selectBox-options,.selectBox-options li a{list-style:none;display:block;cursor:default;text-transform:none!important;text-decoration:none!important;padding:0}
.selectBox-options li a:hover{cursor:pointer}
.selectBox-options li{color:#764f0c;list-style:none;display:block;cursor:default;border-top:solid 1px #a4c3ca;box-shadow:inset 1px 1px 1px 0 #fff;text-transform:none!important;text-decoration:none!important;margin:0;padding:2px 5px}
.selectBox-options li:first-child{border-top:none;box-shadow:none}
.selectBox-options li:hover{background:#fff}
.selectBox-options li a{line-height:1.5;white-space:nowrap;overflow:hidden;text-transform:none!important;text-decoration:none!important;padding:0 .5em}
.selectBox-dropdown,.selectBox-dropdown a,.selectBox-dropdown a:link,.selectBox-dropdown a:visited,.selectBox-dropdown a:hover,.selectBox-dropdown a:active,.selectBox-dropdown .selectBox-label,.selectBox-dropdown .selectBox-label a,.selectBox-dropdown .selectBox-label a:link,.selectBox-dropdown .selectBox-label a:visited,.selectBox-dropdown .selectBox-label a:hover,.selectBox-dropdown .selectBox-label a:active,.selectBox-options li a,.selectBox-options li a:link,.selectBox-options li a:visited,.selectBox-options li a:hover,.selectBox-options li a:active{color:#000!important;text-decoration:none!important}

- Download the file below and add to your theme folder {/templates/{THEME})
Login Required!Only registered users can download files. Please register or Login

Add google search keyword


This hack is not really hack or any thing is very important but it's simple and it will only add the keywords from your articles, the keyword will automatically generate the Meta Keywords from your articles and it will add link query to google search page, this will not improve your site google search or anything like that but it could help bring traffic between your site and google search somehow, every time you add articles to your site either from main page or in admin cp, your article will generate meta keywords to every article, the hack will grab those keywords and listed it as google keywords and you can click to search on google page for those keyword, also please note that the google search will not search on your site only but it will search on every website on the Internet that have same keywords

Installations
- Open /engine/modules/show.full.php Find:
$tpl->set( '{title}', $metatags['title'] );

Add below
if( $row['keywords'] ) {$tpl->set( '{googlekeywords}', "<b>Google - Keyword:</b> Keywords are generated not by adding news." );
$keys_arr = explode( ', ', $row['keywords'] );
$keywords = '';foreach($keys_arr as $key){$keywords .= '<a href="http://www.google.com/search?q=' . $key . '" target="_blank">' . $key . '</a>, ';}$keywords = substr( $keywords, 0, -2 );
$tpl->set( '{googlekeywords}', "<b>Google - Keyword:</b> " . stripslashes( $keywords ) . "." ); } else {$tpl->set( '{googlekeywords}', "<b>Google - Keyword:</b> Keywords are generated not by adding news." );}

- Open {THEME}/fullstory.tpl Add tag in any place you want the google keywords to display
{googlekeywords}
You can add style to display block for it like your cloud tags block, up to you...

Add special search keywords in your theme search page


This hack has been used in some websites for advertising purposes, what this hack does is that every time you inout the keywords to search in your website, the keywords will show automatically, in many sites use fake keywords for advertising purposes so that the users can click on those links to support your website sponsors for example if you add this tag in your search page
Full Download {keyword} High Speed
Every time you search in your website like searching for "Windows 7 Ultimate" in search page you will get the search query as
Full Download Windows 7 Ultimate High Speed


Installation
- Open /engine/modules/search.php find:
$findstory = stripslashes( $story )

- Add After:
$tpl->set('{keyword}', $findstory);

- Open {THEME}/search.tpl add tag where you want the keywords to display
{keyword}
for example
Full Download {keyword} High Speed
Free Download {keyword} Fast Speed
Get {keyword} Nulled Version
You can also use links for those keyword by adding your ads url, for example:
<a href="http://my_ads_affiliate_link.com/my_id">Full Download {keyword} High Speed</a>
<a href="http://my_ads_affiliate_link.com/my_id">Free Download {keyword} Fast Speed</a>
<a href="http://my_ads_affiliate_link.com/my_id">Get {keyword} Nulled Version</a>

This feature was known in "Search Cloud Module" sponsor links, it is not and was not part of DLE Script on any versions, because some people think it's part of DLE and when they upgraded to new version then it's no longer work this because you don't add this hack with new version,

Note: the tag "{keyword}" can be changed to whatever you want to use in your own, just make sure that you make change to the same tag name, for example if you use {spamhater} then you much make sure you use {spamhater} in both search.php and search.tpl, both must be the same

DLE Open Search


This feature was added in DLE 8.x or maybe 7.5 I am not sure exactly the version was first implements, OpenSearch is a collection of technologies that allow publishing of search results in a format suitable for syndication and aggregation. It is a way for websites and search engines to publish search results in a standard and accessible format. In Datalife Engine, open search is automatically turn on in your website, you can easily add your site search into your search engine providers, for example I am using Firefox I can easily select the search engine from drop down list as you can see in screenshot
DLE Search Customization

When you add this search to your search engine list, you can search your website very easily, it will work exactly the same as google search and other search engines but it will only search in your website
DLE Search Customization

The OpenSearch will use the engine function from /engine/opensearch.ph by using theme value format in /templates/opensearch.tpl, however, the results for the search queries will be displayed in regular format like you search in your website using searchresults.tpl, the opensearch is just for handy for you and your visitors to search your site easily in same concept with standard search engine, the open search is supported by all major browsers including Firefox, Opera, Internet Explorer, Chrome, Safari and more...after you add the opensearch, you can remove or manage like set as default etc in browser configurations and settings just like the same way you change your search engine default search engine

Many people don't know this function and don't know how to use it, for me it's quite helpful and if I visit any websites that using DLE which have a lot of contents, this open search is the best what to find what I need in that website...


That's all folks, any comments or suggestions are gladly welcome, or if I have missed some details or misunderstanding on some functions or details, please advice...

Thank you....
Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.

Details

+38

Comments 15

Gozan
Gozan
V.I.P.
Commented By Gozan on April 2, 2012 (12:32 am)
thank u so much 4 nice tutorial spamhater snegurka
33 132Forum topics : 20Forum replies : 88Forum likes : 7
romeoluv56
Commented By romeoluv56 on April 2, 2012 (10:26 pm)
Nice work, thanks bro for sharing. Try to share Related News hack too.
Waqas Ahmad
Commented By Waqas Ahmad on April 2, 2012 (11:50 pm)
Great Spamhater. You are the only one... Excellent tutorial
Thank you very much.
I need help in Add special search keywords in your theme search page.
Is it possible to use this method for Article title?
As I am using download links custom article field which appears at the end of full story, Want to put my affiliate link same as you described in this tutorial but for article title instead of search keyword in full story.
Also if anyone knows, please suggest me any affiliate program which I can use in this manner.
Once again thank you very much Spamhater to provide us this helpful tutorial.
1 28Forum topics : 14Forum replies : 67Forum likes : 5
spamhater
spamhater
DLE TEAM
Commented By spamhater on April 3, 2012 (1:18 pm)
thank you guys for positive comments...

romeoluv56,
which related new hack are you talking about man? tell me the way you want to see I will make tutorial for it..

Waqas Ahmad,
if you want that in fullstory then that's quite simple because you can simply use tag {title}, this will show the title of your article in every page, for example if you use code like this
<a href="http://my_ads_affiliate_link.com/my_id">Full Download {title} High Speed</a>

You will get the link display like this
<a href="http://my_ads_affiliate_link.com/my_id">Full Download DLE Search Customization High Speed</a>
because tag {title} is the na,e of your article, it will show automatically in each article...for affiliate programs I don't know much about it...
24 386Forum topics : 12Forum replies : 950Forum likes : 130

Love is a symbol of eternity. It wipes out all sense of time, destroying all memory of a beginning and all fear of an end!
Great achievement is usually born of great sacrifice, and is never the result of selfishness...Without continual growth and progress, such words as improvement, achievement, and success have no meaning.
romeoluv56
Commented By romeoluv56 on April 29, 2012 (7:43 am)
spamhater,
i am talking about related news, which is displaying in dlestarter full story,
screenshot http://i.imgur.com/daqyQ.png
and can you make a tutorial for scroll to comment, like if we click reply to any comment it automatically take the user in comment box, similar in dlestarter.

Thanks and regards
spamhater
spamhater
DLE TEAM
Commented By spamhater on April 29, 2012 (7:23 pm)
romeoluv56,
ah I see what you mean, sawanbanna is making video tutorial for theme customizations, he will show you how to do that for both topnews and related news in 3-4 different ways without having to modify the script, all done by css...just stick around he will upload when he finished edit the video...you will like it...
24 386Forum topics : 12Forum replies : 950Forum likes : 130

Love is a symbol of eternity. It wipes out all sense of time, destroying all memory of a beginning and all fear of an end!
Great achievement is usually born of great sacrifice, and is never the result of selfishness...Without continual growth and progress, such words as improvement, achievement, and success have no meaning.
romeoluv56
Commented By romeoluv56 on May 1, 2012 (9:51 pm)
Great News, Thanks Dlestarter Team
Kathryn
Kathryn
V.I.P.
Commented By Kathryn on January 3, 2013 (3:03 pm)
Fantastic tutorial Thank you!
15 47Forum topics : 109Forum replies : 481Forum likes : 6
mecho
mecho
Members
Commented By mecho on May 13, 2013 (9:14 am)
how can i add {keyword} to info.tpl ???

Thanks for the great tut anyway :)
N/A 3Forum topics : 9Forum replies : 27Forum likes : 0
noobos
noobos
DLE TEAM
Commented By noobos on May 13, 2013 (5:29 pm)
mecho
you can't because the info.tpl is not part of search, you might, however, be able to add the code in language file but have not been test, however, my question is what you are trying to do? I just trying to understand your intention since I have no idea what you have in your mind so I can understand what you need since last time you want it in "title" now what?
16 302Forum topics : 12Forum replies : 1036Forum likes : 170
mecho
mecho
Members
Commented By mecho on May 14, 2013 (3:28 am)
when users search for something that does not exists , the page that they will see is info.tpl with and error message.

I want to add some links on that page like the one that we can have in search.tpl with {keyword} .
N/A 3Forum topics : 9Forum replies : 27Forum likes : 0
spamhater
spamhater
DLE TEAM
24 386Forum topics : 12Forum replies : 950Forum likes : 130

Love is a symbol of eternity. It wipes out all sense of time, destroying all memory of a beginning and all fear of an end!
Great achievement is usually born of great sacrifice, and is never the result of selfishness...Without continual growth and progress, such words as improvement, achievement, and success have no meaning.
MisterCaca
MisterCaca
Members
Commented By MisterCaca on September 7, 2013 (10:26 pm)
Hello
Why is the text goes up?
http://i.imgur.com/0JbZxK8.png


It's possible only show the title?
Example search:
http://yify-torrents.com/browse-movie


Thanks!
N/A 18Forum topics : 25Forum replies : 86Forum likes : 1
spamhater
spamhater
DLE TEAM
Commented By spamhater on September 7, 2013 (10:44 pm)
MisterCaca
1) I don't know what title goes up in your screenshot
2) please do not compare dle to other scripts, the functions are totally different, if you want custom modules for it, please make request in paid request, any interesting developers will take a look at it.

This is dle customization, not torrent or custom script, so please ask the right questions otherwise no one can help you if you want all in one script that cover every single custom script.
24 386Forum topics : 12Forum replies : 950Forum likes : 130

Love is a symbol of eternity. It wipes out all sense of time, destroying all memory of a beginning and all fear of an end!
Great achievement is usually born of great sacrifice, and is never the result of selfishness...Without continual growth and progress, such words as improvement, achievement, and success have no meaning.
alx974
alx974
Members
Commented By alx974 on April 23, 2015 (12:52 pm)
Hi, thank for this hack :) I have a little question.
Below title, where is displayed shortstoy , i use xfield to show synopsis so it's blank.
Everyone know how to show xfield instead shortstory ? Thanks. :)

http://www.world-lolo.com/images/uploads/image.num1429813682.of.world-lolo.com.jpg
N/A 1Forum topics : 2Forum replies : 4Forum likes : 0
Information!Would you like to leave your comment? Please Login to your account to leave comments. Don't have an account? You can create a free account now.
DLEStarter Notice!Please note...Every hack and every module will get additional queries from your database and some hacks and some modules may result your server overload, so install only what you "need", remove any hacks and modules from your script when you don't need them, all hacks and modules appears in this website are not guaranteed by DLEStarter Team for your script security and compatibility, please read instruction carefully and use hacks and modules at your own risk...Thank you.