You can style and control the layout of a search form, particularly the search results, by stylizing specific HTML objects and their associated CSS classes, already defined for that page. To view the classes, click the Edit HTML Source button on a page that has generated some search results.
Note: While you can style the search results, you cannot define which fields and properties are listed.
Insert the following HTML code when styling your search forms:
<p class="searchDisplayResults"></p>
<div class="searchNavigation"></div>
<p class="searchTitle"></p>
<p class="searchTeaser"></p>
<p class="searchDescription"></p>
A typical search results page has the following characteristics:
- Keyword search results are paginated.
-
Results are ordered by rank.
- The title, publication date, description (if it exists) and base type for each item are displayed.
- The first few sentences of the Web page body are displayed.
These characteristics appear in HTML source mode as in this example:
<table>
<tr>
<td>
<form action="search.jsp" name="search">
<input size="20" name="query" value="[INPUT_STRING]">
<input type="submit" value="Search">
</form>
</td>
</tr>
</table>
<p class="searchDisplayResults">Displaying results 1 - 10 of more than 100 items found.</p>
<div class="searchNavigation">1 <a
href="search.jsp?query=[INPUT_STRING]&page=2">2</a> <a
href="search.jsp?query=[INPUT_STRING]&page=3">3</a> <a
href="search.jsp?query=[INPUT_STRING]&page=4">4</a> <a
href="search.jsp?query=[INPUT_STRING]&page=5">5</a> <a
href="search.jsp?query=[INPUT_STRING]&page=6">6</a> <a
href="search.jsp?query=[INPUT_STRING]&page=7">7</a> <a
href="search.jsp?query=[INPUT_STRING]&page=8">8</a> <a
href="search.jsp?query=[INPUT_STRING]&page=9">9</a> <a
href="search.jsp?query=[INPUT_STRING]&page=10">10</a> <a
href="search.jsp?query=[INPUT_STRING]&page=2">Next</a></div>
<p class="searchTitle">1.
<a href="http://www.hostname.org/path/path/filename.html">Content Item Title</a></p>
<p class="searchTimeStamp">(Web Page; Thu Mar 15 11:50:00 EDT 2007)</p>
<p class="searchTeaser"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla convallis. Quisque et nisi. Ut sagittis. Curabitur a nisi euismod neque euismod dictum....</p>
<p class="searchDescription">Description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla convallis. Quisque et nisi. Ut sagittis. Curabitur a nisi euismod neque euismod dictum.</p>
<p class="searchTitle">2. <a href=" http://www.hostname.org/path/path/filename.html ">Content Item Title</a></p>
<p class="searchTimeStamp">(Web Page; Thu Oct 05 12:46:00 EDT 2006)</p>
<p class="searchTeaser"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla convallis. Quisque et nisi. Ut sagittis. Curabitur a nisi euismod neque euismod dictum....</p>
...
<div class="searchNavigation">1 <a
href="search.jsp?query=[INPUT_STRING]&page=2">2</a> <a
href="search.jsp?query=[INPUT_STRING]&page=3">3</a> <a
href="search.jsp?query=[INPUT_STRING]&page=4">4</a> <a
href="search.jsp?query=[INPUT_STRING]&page=5">5</a> <a
href="search.jsp?query=[INPUT_STRING]&page=6">6</a> <a
href="search.jsp?query=[INPUT_STRING]&page=7">7</a> <a
href="search.jsp?query=[INPUT_STRING]&page=8">8</a> <a
href="search.jsp?query=[INPUT_STRING]&page=9">9</a> <a
href="search.jsp?query=[INPUT_STRING]&page=10">10</a> <a
href="search.jsp?query=[INPUT_STRING]&page=2">Next</a></div>