How can I make "Search Results" like this?

How can I make "Search Results" like this?



Forum Version: PunBB

Bump

Bump

Bump

bump

Bump

Bump

Bump

Bump

Bump

Bump

Bump

Hi @Black-Shadow,

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}&nbsp;»&nbsp;<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>&nbsp;&nbsp;
               {L_TOPIC}: <strong><a class="postdetails" href="{searchresults.U_TOPIC}">{searchresults.TOPIC_TITLE}</a></strong>&nbsp;&nbsp;
               {L_REPLIES}: <strong>{searchresults.TOPIC_REPLIES}</strong>&nbsp;&nbsp;
               {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}&nbsp;»&nbsp;<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}&nbsp;
                  {searchresults.NEWEST_POST_IMG}
                  {searchresults.PARTICIPATE_POST_IMG}&nbsp;
                  {searchresults.TOPIC_TYPE}&nbsp;
                  <h2 class="topic-title"> <a class="topictitle" href="{searchresults.U_VIEW_TOPIC}">{searchresults.TOPIC_TITLE}</a></h2>&nbsp;
                  {searchresults.GOTO_PAGE}&nbsp;
                  {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>

Hello @Ange Tuteur,
I think the code needing a js for the selected option on the left menu:



How can I add it?

In both the templates, find this :

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.

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:

Bump

Bump

Bump

Bump

Bump

Hi @Black-Shadow,

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.

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 think your headers have a fixed height. Add this to your stylesheet :

Code:

.frm-form .main-head { height:auto; }

It should return the height to auto for the searches.

Hi @Ange Tuteur,
Now looks like that



and I want to make headers with this look:



the table contents/columns looking different too.

So you want to get rid of the texts at the top ? If so, edit the templates and find this :

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.

Now it has lost the sorting options of the header

Did you add it before or after ? It should look like this after you're done editing it :

Code:

title.innerHTML = '';
title.appendChild(container);

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?

Just to make sure, did you already enable the last post avatars ?
Display > Structure and Hierarchy > Show avatars in the column "Last posts"