How can I make "Search Results" like this?
2 posters
Page 1 of 2
Page 1 of 2 • 1, 2
How can I make "Search Results" like this?
How can I make "Search Results" like this?
Forum Version: PunBB
Forum Version: PunBB
Re: How can I make "Search Results" like this?
Hi @Black-Shadow,
Sorry for the late reply. Go to Display > Templates > General
Replace your search_results_posts template with this code :
and your search_results_topics template with this code :
If you need to add anymore options to the menu, you can find and edit this part in both the templates :
Sorry for the late reply. Go to Display > Templates > General
Replace your search_results_posts template with this code :
- Code:
<style type="text/css">#search-opts {
float:left;
width:180px;
position:relative;
z-index:1;
}
#search-results {
float:right;
width:100%;
margin-left:-180px;
}
#search-results .inner-page { margin-left:183px }
.search-option {
display:block;
margin:3px 0;
}</style>
<script src="{JS_DIR}extendedview.js" type="text/javascript"></script>
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
<ul>
<li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
</ul>
<p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
<p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->
<div class="pun-crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<p class="crumbs">
<a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>{NAV_CAT_DESC} » <strong>{L_SEARCH_TITLE}</strong>
</p>
</div>
<div id="search-opts">
<div class="module main">
<div class="main-head">
<h3>Search by type</h3>
</div>
<div class="main-content">
<a class="search-option" href="/search?show_results=topics&">Topics</a>
<a class="search-option" href="/search?show_results=posts&">Posts</a>
</div>
</div>
</div>
<script type="text/javascript">//<![CDATA[
(function() {
var opt = $('.search-option'), query = window.location.search.slice(1).replace(/show_results=(?:topics|posts)/, '').replace(/^&|&$/g, '');
opt[0].href += query;
opt[1].href += query;
}());
//]]></script>
<div class="main paged" id="search-results">
<div class="inner-page">
<div class="paged-head clearfix">
<p class="paging">{PAGINATION}</p>
</div>
<div class="main-head">
<h1 class="page-title">{L_SEARCH_MATCHES}</h1>
</div>
<!-- BEGIN searchresults -->
<div class="main-content topic">
<div class="post">
<div class="postmain">
<div class="posthead">
<h2><a href="{searchresults.U_POST}">{searchresults.TOPIC_TITLE}</a> - {searchresults.POST_DATE}</h2>
</div>
<div class="postbody">
<div class="user online">
<h4 class="user-ident">
<span class="username">{searchresults.POSTER_NAME}</span>
</h4>
</div>
</div>
<div class="post-entry">
<div class="entry-content">
<div>{searchresults.MESSAGE}</div>
</div>
</div>
<div class="postfoot">
<div class="user-contact">
</div>
<div class="post-options">
{L_FORUM}: <strong><a class="postdetails" href="{searchresults.U_FORUM}">{searchresults.FORUM_NAME}</a></strong>
{L_TOPIC}: <strong><a class="postdetails" href="{searchresults.U_TOPIC}">{searchresults.TOPIC_TITLE}</a></strong>
{L_REPLIES}: <strong>{searchresults.TOPIC_REPLIES}</strong>
{L_VIEWS}: <strong>{searchresults.TOPIC_VIEWS}</strong>
</div>
</div>
</div>
</div>
</div>
<!-- END searchresults -->
<div class="main-foot clearfix">
<h2>{L_SEARCH_MATCHES}</h2>
</div>
<div class="paged-foot clearfix">
<p class="paging">{PAGINATION}</p>
<p class="posting">{L_BACK_TO_TOP}</p>
</div>
</div>
</div>
<div class="clear"></div>
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.post-entry .entry-content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
and your search_results_topics template with this code :
- Code:
<style type="text/css">#search-opts {
float:left;
width:180px;
position:relative;
z-index:1;
}
#search-results {
float:right;
width:100%;
margin-left:-180px;
}
#search-results .inner-page { margin-left:183px }
.search-option {
display:block;
margin:3px 0;
}</style>
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
<ul>
<li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
</ul>
<p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
<p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->
<div class="pun-crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<p class="crumbs">
<a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>{NAV_CAT_DESC} » <strong>{L_SEARCH_TITLE}</strong>
</p>
</div>
<div id="search-opts">
<div class="module main">
<div class="main-head">
<h3>Search by type</h3>
</div>
<div class="main-content">
<a class="search-option" href="/search?show_results=topics&">Topics</a>
<a class="search-option" href="/search?show_results=posts&">Posts</a>
</div>
</div>
</div>
<script type="text/javascript">//<![CDATA[
(function() {
var opt = $('.search-option'), query = window.location.search.slice(1).replace(/show_results=(?:topics|posts)/, '').replace(/^&|&$/g, '');
opt[0].href += query;
opt[1].href += query;
}());
//]]></script>
<div class="main paged" id="search-results">
<div class="inner-page">
<form action="{S_ACTION}" method="post" name="post" onsubmit="return verify_select();" class="frm-form">
<div class="paged-head clearfix">
<p class="paging">{PAGINATION}</p>
</div>
<div class="main-head">
<h1 class="page-title">{L_SEARCH_MATCHES}</h1>
</div>
<div class="main-content">
<table class="table" cellspacing="0">
<thead>
<tr>
<th class="tcl">{L_TOPICS}</th>
<th class="tc2">{L_FORUM}</th>
<th class="tc3">{L_REPLIES}</th>
<th class="tc3">{L_VIEWS}</th>
<th class="tcr">{L_LASTPOST}</th>
</tr>
</thead>
<tbody class="statused">
<!-- BEGIN searchresults -->
<tr>
<td class="tcl tdtopics search">
<span class="status">
<img src="{searchresults.TOPIC_FOLDER_IMG}" alt="{searchresults.L_TOPIC_FOLDER_ALT}" title="{searchresults.L_TOPIC_FOLDER_ALT}" />
</span>
{searchresults.TOPIC_ICON}
{searchresults.NEWEST_POST_IMG}
{searchresults.PARTICIPATE_POST_IMG}
{searchresults.TOPIC_TYPE}
<h2 class="topic-title"> <a class="topictitle" href="{searchresults.U_VIEW_TOPIC}">{searchresults.TOPIC_TITLE}</a></h2>
{searchresults.GOTO_PAGE}
{searchresults.L_BY} {searchresults.TOPIC_AUTHOR}
</td>
<td class="tc2"><a href="{searchresults.U_VIEW_FORUM}">{searchresults.FORUM_NAME}</a></td>
<td class="tc3">{searchresults.REPLIES}</td>
<td class="tc3">{searchresults.VIEWS}</td>
<td class="tcr">{searchresults.LAST_POST_TIME} {searchresults.L_BY} {searchresults.LAST_POST_AUTHOR}{searchresults.LAST_POST_IMG}</td>
</tr>
<!-- END searchresults -->
</tbody>
</table>
</div>
<div class="main-foot">
</div>
<div class="paged-foot clearfix">
<p class="paging">{PAGINATION}</p>
<p class="posting">{L_BACK_TO_TOP}</p>
</div>
</form>
</div>
</div>
<div class="clear"></div>
If you need to add anymore options to the menu, you can find and edit this part in both the templates :
- Code:
<div id="search-opts">
<div class="module main">
<div class="main-head">
<h3>Search by type</h3>
</div>
<div class="main-content">
<a class="search-option" href="/search?show_results=topics&">Topics</a>
<a class="search-option" href="/search?show_results=posts&">Posts</a>
</div>
</div>
</div>
Re: How can I make "Search Results" like this?
Hello @Ange Tuteur,
I think the code needing a js for the selected option on the left menu:
How can I add it?
I think the code needing a js for the selected option on the left menu:
How can I add it?
Re: How can I make "Search Results" like this?
In both the templates, find this :
and add the following before it :
Then add the following CSS to your stylesheet :
You can change the design as you see fit.
- Code:
opt[0].href += query;
and add the following before it :
- Code:
opt[/show_results=topics/.test(window.location.search) ? 0 : 1].className += ' search-actif';
Then add the following CSS to your stylesheet :
- Code:
.search-actif {
color:#FFF;
background:#39C;
}
You can change the design as you see fit.
Re: How can I make "Search Results" like this?
Hello @Ange Tuteur,
Ok the active option now its working and I have adapt the css.
On the right column (list of topics) it looks too different:
Original image:
Curreent Image:
Ok the active option now its working and I have adapt the css.
On the right column (list of topics) it looks too different:
Original image:
Curreent Image:
Re: How can I make "Search Results" like this?
Hi @Black-Shadow,
Add the following to the end of your two search templates you replaced earlier :
That'll add preset options to the top of the table. You can change the basic style with this CSS rule :
and the active style with this CSS rule :
You may need to use !important for the properties in the rules above.
Sorry for the late reply btw.
Add the following to the end of your two search templates you replaced earlier :
- Code:
<style type="text/css">
#search_presets a.preset_option {
color:#FFF;
margin:0 3px;
}
#search_presets a.preset_option.preset_actif { color:#FFA }
#search_presets a.preset_option:hover { text-decoration:none }
</style>
<script type="text/javascript">
(function() {
var href = window.location.href,
presets = {
'Sort by' : {
'Post time' : href.replace(/sort_by=\d+/, '') + '&sort_by=0',
'Post subject' : href.replace(/sort_by=\d+/, '') + '&sort_by=1',
'Topic title' : href.replace(/sort_by=\d+/, '') + '&sort_by=2',
'Author' : href.replace(/sort_by=\d+/, '') + '&sort_by=3',
'Forum' : href.replace(/sort_by=\d+/, '') + '&sort_by=4'
},
'Order' : {
'Ascending' : href.replace(/&sort_dir=(?:ASC|DESC)/, '') + '&sort_dir=ASC',
'Descending' : href.replace(/&sort_dir=(?:ASC|DESC)/, '') + '&sort_dir=DESC'
}
},
title = $('.page-title')[0],
container = document.createElement('DIV'), i, j, str = '';
container.id = 'search_presets';
if (title) {
for (i in presets) {
str += '<span class="preset_label">' + i + ' : </span>';
for (j in presets[i]) {
str += '<a class="preset_option ' + ( new RegExp(presets[i][j].replace(/.*?(sort_by=\d+|sort_dir=(?:ASC|DESC))$/, '$1')).test(href) ? 'preset_actif' : '' ) + '" href="' + presets[i][j] + '">' + j + '</a>';
}
}
container.innerHTML = str;
title.appendChild(container);
}
})();
</script>
That'll add preset options to the top of the table. You can change the basic style with this CSS rule :
- Code:
#search_presets a.preset_option {
color:#FFF;
margin:0 3px;
}
and the active style with this CSS rule :
- Code:
#search_presets a.preset_option.preset_actif {
color:#FFA;
}
You may need to use !important for the properties in the rules above.
Sorry for the late reply btw.
Re: How can I make "Search Results" like this?
Hello @Ange Tuteur,
I am thinking somewhere I have confused the results now looking like this:
The headers of the results table aren't appearing correct.
I am thinking somewhere I have confused the results now looking like this:
The headers of the results table aren't appearing correct.
Re: How can I make "Search Results" like this?
I think your headers have a fixed height. Add this to your stylesheet :
It should return the height to auto for the searches.
- Code:
.frm-form .main-head { height:auto; }
It should return the height to auto for the searches.
Re: How can I make "Search Results" like this?
Hi @Ange Tuteur,
Now looks like that
and I want to make headers with this look:
the table contents/columns looking different too.
Now looks like that
and I want to make headers with this look:
the table contents/columns looking different too.
Re: How can I make "Search Results" like this?
So you want to get rid of the texts at the top ? If so, edit the templates and find this :
then add this before it :
As for the style, you can make that with the CSS I posted earlier. If you need help with that let me know.
- Code:
title.appendChild(container);
then add this before it :
- Code:
title.innerHTML = '';
As for the style, you can make that with the CSS I posted earlier. If you need help with that let me know.
Re: How can I make "Search Results" like this?
Did you add it before or after ? It should look like this after you're done editing it :
- Code:
title.innerHTML = '';
title.appendChild(container);
Re: How can I make "Search Results" like this?
Hi @Ange Tuteur
Ok the header now looks ok,
The problem with columns remaining
I need to change to the following columns:
Column 1:
[TopicName] In [ForumName]
Started [AuthorName] [PostDate] [Pagination]
Column 2:
[NumberOfViews]
[NumberOfReplies]
Column 3:
[Avatar] [LastPoster]
[Date]
How can I change them?
Update:
Ok I have fixed the table columns, which is the php variable to add the avatar of last poster on last column?
Ok the header now looks ok,
The problem with columns remaining
I need to change to the following columns:
Column 1:
[TopicName] In [ForumName]
Started [AuthorName] [PostDate] [Pagination]
Column 2:
[NumberOfViews]
[NumberOfReplies]
Column 3:
[Avatar] [LastPoster]
[Date]
How can I change them?
Update:
Ok I have fixed the table columns, which is the php variable to add the avatar of last poster on last column?
Re: How can I make "Search Results" like this?
Just to make sure, did you already enable the last post avatars ?
Display > Structure and Hierarchy > Show avatars in the column "Last posts"
Display > Structure and Hierarchy > Show avatars in the column "Last posts"
Page 1 of 2 • 1, 2
Page 1 of 2
Permissions in this forum:
You cannot reply to topics in this forum