The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How can I make "Search Results" like this?

2 posters

Page 1 of 2 1, 2  Next

Go down

Solved How can I make "Search Results" like this?

Post by Van-Helsing September 23rd 2015, 2:03 am

How can I make "Search Results" like this?

How can I make "Search Results" like this? LWxSswu

Forum Version: PunBB
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing September 24th 2015, 2:24 am

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing September 25th 2015, 2:29 am

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing September 26th 2015, 2:30 am

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing September 27th 2015, 2:38 am

bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing September 28th 2015, 3:09 am

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing September 30th 2015, 2:16 am

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 1st 2015, 2:51 am

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 3rd 2015, 2:15 am

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 4th 2015, 3:15 am

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 5th 2015, 9:36 am

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 6th 2015, 9:50 am

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Ange Tuteur October 6th 2015, 10:58 am

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>
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 6th 2015, 11:21 am

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

How can I make "Search Results" like this? YPzS7Uo

How can I add it?
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Ange Tuteur October 6th 2015, 11:31 am

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. Smile
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 6th 2015, 11:39 pm

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:

How can I make "Search Results" like this? Qcuj9uo

Curreent Image:

How can I make "Search Results" like this? F6T3wB2

Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 8th 2015, 3:18 am

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 9th 2015, 6:06 pm

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 10th 2015, 9:54 pm

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 12th 2015, 3:16 am

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 13th 2015, 3:48 am

Bump
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Ange Tuteur October 13th 2015, 12:44 pm

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 13th 2015, 9:50 pm

Hello @Ange Tuteur,
I am thinking somewhere I have confused the results now looking like this:

How can I make "Search Results" like this? 1v1D8uz

The headers of the results table aren't appearing correct.Sad
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Ange Tuteur October 13th 2015, 11:56 pm

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 14th 2015, 12:15 am

Hi @Ange Tuteur,
Now looks like that

How can I make "Search Results" like this? OZ676Om

and I want to make headers with this look:

How can I make "Search Results" like this? E5nI3aj

the table contents/columns looking different too.
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Ange Tuteur October 14th 2015, 12:25 am

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. Wink
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 14th 2015, 12:35 am

Now it has lost the sorting options of the header

How can I make "Search Results" like this? MlZKlP0
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Ange Tuteur October 14th 2015, 12:40 am

Did you add it before or after ? It should look like this after you're done editing it :
Code:
title.innerHTML = '';
title.appendChild(container);
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Van-Helsing October 14th 2015, 12:52 am

Hi @Ange Tuteur
Ok the header now looks ok,

How can I make "Search Results" like this? K9vwUvR

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?
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

Solved Re: How can I make "Search Results" like this?

Post by Ange Tuteur October 14th 2015, 11:08 am

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

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Page 1 of 2 1, 2  Next

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum