Home » Forum
  • If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

Announcement

Collapse
No announcement yet.

Customize search result

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Customize search result

    I am using the Zoom Search Engine (free version) in my website. I can customize the search form, but cannot do that for the search result page. Any one can provide me some tips how to achieve that? Your assistance is appreciated very much.

    ~Kevin

  • #2
    You can edit the search_template.html file, the same as you would on with any other HTML file on your web site.

    Plus use CSS to change the appearance of the search results. See,
    http://www.wrensoft.com/zoom/support/css.html

    Comment


    • #3
      Originally posted by wrensoft View Post
      You can edit the search_template.html file, the same as you would on with any other HTML file on your web site.

      Plus use CSS to change the appearance of the search results. See,
      http://www.wrensoft.com/zoom/support/css.html
      Hi,

      After indexing, I open the search template page (search_template.html) and added the code for the search form with input and submit functions. and then I have modified the CSS. In my search test, the result is there but the result page appearance still shows up as default and without any changes. Here is the htlm code with my modified CSS. Hope if you can point out what may go wrong in the code. Your assistance and advice are appreciated very much.

      ~Kevin

      .................................................. .................................................. ...........

      My customized search form:

      http://www.kevincheungdesign.com/iLasso_search2016/search_template_color4.html

      .................................................. .................................................. ...........

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <!--
      This is the search template file (search_template.html) which contains the layout
      to your search page.

      Note that you can not access the search function from this page. Instead,
      you should open or link to the search script, which is a file named "search.php",
      "search.asp", or "search.cgi".
      -->
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
      <title>Example Zoom search template page</title>
      <!--
      You can change the fonts, colors, and styles of your search results with the CSS below.
      For some examples and more information on Cascading Style Sheets (CSS), visit our support page at:
      http://www.wrensoft.com/zoom/support/css.html
      -->
      <style type="text/css">
      .highlight { background: #FFFF40; }
      .searchheading { font-size: 130%; font-weight: bold; color:#F00; }
      .summary { font-size: 80%; font-style: italic; }
      .suggestion { font-size: 100%; }
      .results { font-size: 100%; }
      .category { color: #999999; }
      .sorting { text-align: right; }

      .result_title { font-size: 100%; }
      .description { font-size: 100%; color: #008000; }
      .context { font-size: 100%; }
      .infoline { font-size: 80%; font-style: normal; color: #808080;}

      .zoom_searchform { font-size: 100%; }
      .zoom_results_per_page { font-size: 80%; margin-left: 10px; }
      .zoom_match { font-size: 80%; margin-left: 10px;}
      .zoom_categories { font-size: 80%; }
      .zoom_categories ul { display: inline; margin: 0px; padding: 0px;}
      .zoom_categories li { display: inline; margin-left: 15px; list-style-type: none; }

      .cat_summary ul { margin: 0px; padding: 0px; display: inline; }
      .cat_summary li { display: inline; margin-left: 15px; list-style-type: none; }

      input.zoom_button { }
      input.zoom_searchbox { }

      .result_image { float: left; display: block; }
      .result_image img { margin: 10px; width: 80px; border: 0px; }

      .result_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
      .result_altblock { margin-top: 15px; margin-bottom: 15px; clear: left; }

      .result_pages { font-size: 100%; }
      .result_pagescount { font-size: 100%; }

      .searchtime { font-size: 80%; }

      .recommended
      {
      background: #DFFFBF;
      border-top: 1px dotted #808080;
      border-bottom: 1px dotted #808080;
      margin-top: 15px;
      margin-bottom: 15px;
      }
      .recommended_heading { float: right; font-weight: bold; }
      .recommend_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
      .recommend_title { font-size: 100%; }
      .recommend_description { font-size: 100%; color: #008000; }
      .recommend_infoline { font-size: 80%; font-style: normal; color: #808080;}
      .recommend_image { float: left; display: block; }
      .recommend_image img { margin: 10px; width: 80px; border: 0px; }
      </style>
      </head>

      <body onload="if (document.getElementById('zoom_searchbox')) {document.getElementById('zoom_searchbox').focus() ;}">
      <!--
      The ZOOMSEARCH tag below marks the place where your search form and search results
      will be inserted when you run the search script. By default, you do not need to place a
      search form here, the search script will generate one and display it before the search
      results.

      There are other tags you can add to this page to show/remove different elements from
      the search results. See "Advanced template options" in the Users Guide or Help file
      for more information.
      -->
      <form name="searchform" method="get" action="http://www.kevincheungdesign.com/iLasso_search2016/search.php">
      <input type="text" name="zoom_query" style="background-color:#e8ffe3; border-width:1px; border-color: #060; border-radius:4px; padding-bottom:3px;" />&nbsp;&nbsp;<input type="submit" class="topbar" value="Search" name="search" style="background-color:#093; color:#FFF; border: 0px; background-color:#093; background-image:url(assets/buttom_gradient_green.jpg); width:80px;border-radius: 4px; font-size:80%; padding-bottom:3px; padding-top:3px;" />
      </form>
      <br>
      <form method="get" action="http://www.kevincheungdesign.com/iLasso_search2016/search.php">
      <table cellpadding="0px" cellspacing="0px">
      <tr>
      <td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
      <input type="text" name="zoom_query" style="width:150px; border:0px solid; height:17px; padding:0px 3px; position:relative;">
      </td>
      <td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
      <input type="submit" value="" style="border-style: none; background : url('assets/searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
      </td>
      </tr>
      </table>
      </form>

      <h1>Search this site</h1>
      <p>
      Enter one or more keywords to search for using the Zoom Search Engine.<br />
      Note that '*' and '?' wildcards are supported.
      </p>


      <!--ZOOMSEARCH-->
      </body>
      </html>

      .................................................. .................................................. ......

      Comment


      • #4
        I open the search template page (search_template.html) and added the code for the search form
        You don't need to add a search form. The code for the search form is inserted by the script when it runs. It says as much in the comments (see your post).

        If changes are appearing, then maybe you didn't upload the new page to the right location on your server.

        Comment

        Working...
        X