Search

Contents

1. Introduction
    1.1 Features

2. Search overview
    2.1 Search current area
    2.2 Search all available areas
    2.3 Search public areas only

3. Adding the module

4. Configuration options
    4.1 Content options
    4.2 Advanced options
    4.3 Overview of available CSS selectors

5. The module in practice: tips

1. Introduction

The search module allows visitors to perform a simple search of the website. Search results provide direct links to pages that contain the keywords that were specified.

1.1 Features

The features of this module in no particular order:

(top)

2. Search overview

[ search overview ]
search_start.png

Initially the search page shows:

Searching the site for keywords is a matter of entering one or more keywords into the 'Search' field and clicking [OK] or pressing [Enter].

Example

After entering the phrase rumpelstiltkin and clicking [OK], the following is displayed.

[ no search results  ]
search_no_results.png

This indicates that the search phrase rumpelstiltkin was not found in any page.

2.1 Search current area

The search module can be configured to limit the search to the current area, all public areas or all areas. In this section the configuration for searching the current area is discussed. See section 4.1 Content options below for configuration details.

NOTICE:
In this section and the next it is assumed that the visitor (wblade in our example) is currently logged in and that this visitor has access to the protected area ('Exemplum Intranet').

After entering the phrase exemplum and clicking [OK], the following is displayed.

[ search results public area screen 1 ]
search_public_1.png

The search page now shows:

At this point the visitor can either follow one of the links in the list of search results or proceed to the second results page by clicking 2 or Next. In the latter case the following is displayed.

[ search results public area screen 2 ]
search_public_2.png

The search page now shows:

2.2 Search all available areas

In this section the configuration for searching all areas is discussed, i.e. all public areas and all private areas to which the currently logged in user (e.g. wblade) has access. Searching for the same keyword as before (exemplum) now yields the following results.

[ search results all available areas screen 1 ]
search_all_1.png

Note that the second hit in these results (''2. Exemplum Intranet' was not there in the first screenshot in section 2.1 Search current area above.

Clicking Next yields the following results.

[ search results all available areas screen 2 ]
search_all_2.png

NOTICE:
The list of numbers in the navigation bar now contains three pages. The search module keeps looking for new hits, but does so in an adaptive way rather than searching all results upfront. This is an optimisation feature.

Clicking Next again yields the last page of the results.

[ search results all available areas screen 3 ]
search_all_3.png

Note that the total number of hits was 12, whereas there were 9 hits in the example in section 2.1 Search current area above. The difference is that the 12 results include 3 results from the Exemplum Intranet: hits 2, 6 and 7, as was to be expected.

2.3 Search public areas only

If the search is configured to search public areas only and the visitor is not logged in, the results will be exactly the same as those discussed in section 2.2 Search all available areas above.

(top)

3. Adding the module

NOTICE:
Adding a module requires that you have sufficient access privileges to add a page. This is specially important for non-webmasters like pupils and teachers who often have limited permissions. See section 3.2.5.1 Table: Roles and permissions in chapter Account Manager.

In the Page Manager, select the Area or section and click on the Add a page link to enter the Add a page dialogue:

[ search add module ]
search_add_search.png

Fill out the fields as described in section 3.1 Add a page in chapter Page Manager.

In the Module dropdown menu, select the module. Do not forget to select Visible, Hidden or Embargo. Click [Save] to save your work and return to the Edit basic properties of page nn dialogue. Now click on Content to enter the module configuration dialogue. Alternatively, you can click [Done] to save your work and return to the Page Manager.

(top)

4. Configuration options

The module can be configured in two places. The most important one is the Content, discussed in section 4.1 Content options below. In section 4.2 Advanced options below we will briefly mention the available advanced options. Finally, section 4.3 Overview of available CSS selectors presents an overview of available styling selectors.

4.1 Content options

If you are not in the Search Configuration dialogue already, you can navigate to the Page Manager, and click on the name of the page you added in section 3. Adding the module. The following is displayed on the screen.

[ search configuration ]
search_configuration.png

Explanation:

4.2 Advanced options

The advanced options also apply to this module. In particular it means that you can use Bazaar Style Stylesheets (BSSS) to get rid of colours that do not match the style of the school site. See section 4.3 Overview of available CSS selectors below for details of styling the search module.

More on the backgrounds of BSSS can be found in section 4. On form and content in chapter Viewpoints.

More on the practical side of BSSS can be found in section 3.4 Configure theme 'Theme Name' for area n in chapter Configuration Manager.

The other advanced options are discussed in section 3.3 Advanced: edit advanced properties of page nn in chapter Page Manager.

4.3 Overview of available CSS selectors

This is the contents of the stylesheet (/program/modules/search/search.css) that is included automatically on every search page.

div.search_form { } div.search_form .textfield { } div.search_result { padding: 0.5em 0.5em 0.1em 0.5em; } div.search_odd { background-color: #EEE; } div.search_even { background-color: #FFF; } h4.search_result_title { margin: 0; } h4.search_result_title b { background-color: #FF0; } div.search_result_context { font-size: 0.7em; } div.search_result_context b { background-color: #FF0; } div.search_result_url { font-size: 0.7em; margin-top: 0.5em; } div.search_more, div.search_navigation { padding: 1em; margin: 1em 0; background-color: #DDD; } div.search_navigation .search_previous { display: inline-block; padding: 0 2em; } div.search_navigation .search_page { display: inline-block; padding: 0 1em; } div.search_navigation .current { font-weight: bold; border: 1px solid #000; } div.search_navigation .search_next { display: inline-block; padding: 0 2em; }

These settings can be overruled via Bazaar Style Stylesheets (BSSS). Below is a table that documents all tags in the search module that can be styled.

Overview of tags and recognised classes
Tag Selector class Remarks
DIV .search_form wrapper for the (initial) search dialogue
DIV .search_navigation wrapper for the navigation bars
  SPAN .search_previous wrapper for label 'Previous' on the first result page
  A .search_previous used for link to previous result page
  A .search_page all numbers in the navigation bar that link to individual search result pages
.current optional; only on the currently selected result page
  A .search_next used for link to next result page
  SPAN .search_next wrapper for label 'next' on the last result page
DIV .search_result wrapper for a result on the result page
.search_odd additional style for the odd numbered result rows on the result page (always combined with .search_result)
.search_even additional style for the even numbered result rows on the result page (always combined with .search_result)
  H4 .search_result_title
  DIV .search_result_context note: the search keyword can be highlighted by styling the B tag in this DIV
  DIV .search_result_url
DIV .search_more used at the end of the list ('No more results.') and in case nothing was found ('No results.)

(top)

5. The module in practice: tips

Tip: add a page linked to the search module in every area, allowing visitors to search the site from any area on your site.

(top)

Author: Peter Fokker <peter (at) websiteatschool (dot) eu>
Last updated: 2016-07-06