How to use

CSS classes

There are several CSS classes which are in use. You may change them when editing the block. The example here is shown as a LESS file.

 

  • thumbnail - Class for the page attribute "thumbnail" if set.
    Default: tt-thumbnail.
  • meta-description - Class for the page attribute "meta-description" if set.
    Default: tt-meta-description.
  • description - Class for the page attribute "description" if set.
    Default: tt-description.
  • input - Class for the search input field.
    Default: tt-input.
  • menu - Class for the menu element.
    Default: tt-menu.
  • suggestion - Class for suggestion elements.
    Default: tt-suggestion.
  • open - Class for a menu element when it is opened.
    Default: tt-open.
  • highlight - Class for the element that wraps highlighted text.
    Default: tt-highlight.

 

Example (from toesslab.ch)

 

/*
Auto Complete Search
 */
#toesslab-typeahead-container {
  .tt-thumbnail {
    border: 1px solid #333;
    padding: 0.5em;
    margin: 0.25em;
  }
  .tt-meta-description {
    font-style: italic;
  }
  .tt-description {
    font-style: italic;
    color: #3b3b3b;
  }
  .tt-input {
    color: #a61c29;
  }
  .tt-menu {
    z-index: 10000 !important;
  }
  .tt-suggestion:nth-child(even) {
    background-color: #f7f7f7;
  }
  .tt-suggestion:nth-child(odd) {
    background-color: #fff;
  }
  .tt-open {
    overflow-x: auto;
    overflow-y: auto;
  }
  .tt-highlight {
    color: #a61c29;
  }
}
 

How to set the query placeholder

 
  1. In the input field "No results text", write the text to be shown when no results are found.
  2. Then place the cursor at the position in that text.
  3. Click "Insert query placeholder".
  4. To remove the query placeholder, click "Delete query placeholder"

Be careful to not change the appearance of the placeholder!