Search look and feel

Change the search "No Results" message, the search bar placeholder, and hide individual tags from search results.

Change your search bar placeholder

This script replaces the standard placeholder that appears in your search bars. You can use whatever sentence you like!

To use these, copy the relevant code at the very bottom of the Body template (if you're not sure how to do this, see here).

 Replace Type here... with whatever you like!

<script>
$(function() {
$(".hg-search-bar .form-control").attr("placeholder","Type here...");
});
</script>

Customize the search "No Results" message

By default, searches that return no results display the text, "No results found":

You can customize the text in that message using this script.

Script

Go to Settings > Style, click on Custom HTML and select Body.

Copy the script text below and paste it into the Body window.


<script>
//customize the "no results" text on search results screen
$(function(){
  if($('.hg-search-page') && $('.hg-search-page').length > 0){
    $('.no-results-msg').html('<p>Replace this with the custom search text of your choice. You can style it using standard html</p>');
  }
});
</script>

This script will replace the "No results found" text in the screenshot above with the text between the <p> </p> tags. Update the text by editing the highlighted text above.

You can style the text in the script using html.

Sample

Not sure what to include? Some ideas include:

  • A link to your contact form
  • The email address of your support team
  • If you have a guide on how to use the knowledge base or specific guided search instructions, include a link to those

Here's a sample script:

And the output it produces:

Hide tags from Search Results

KnowledgeOwl search results will automatically display all tags assigned to a given article :

Sample of Tags showing in Search Results You can add some code to hide tags from search results in a few different ways:

  • Hide the Tags label and all tags from Search Results
  • Hide specific tags from Search Results
  • Hide all tags containing specific text from Search Results (such as prefixes, suffixes, etc.)
  • Hide the majority of tags and show only specific tags in Search Results

See below for instruction on each.

Note: these solutions will hide the tags from Search Results. Tags will still appear in the search dropdown list if readers begin their search with the ":" used for tag searches.

Hide all tags and the Tags label from Search Results

To hide the Tags: label and all tags from Search Results:

  1. Go to Settings > Style. Be sure you are in the Custom CSS section.
  2. Copy and paste this code exactly into your Custom CSS:
    /* Hide Tags label and all tags from search results */
    .ko-tags-container {
      display: none;
    }
  3. Click Save.

This will hide the entire Tags section from Search Results.

Note: this will hide the tags from Search Results. Tags will still appear in the search dropdown list if readers begin their search with the ":" used for tag searches.

Hide specific tags from Search Results

If you use tags for internal purposes, you may want to hide those Tags from Search Results while still displaying the rest of your tags. To hide specific tags from your Search Results:

  1. Go to Settings > Style. Be sure you are in the Custom CSS section.
  2. Copy and paste this code into your Custom CSS.
    /* Hide a specific tag from Search Results 
    Replace "hidden-tag" with the tag text */
    .ko-tag[href="/help/search?phrase=:hidden-tag"] {
      	display:none;
    }
  3. Change hidden-tag with the tag label you wish to hide.
  4. Click Save.

For example, this code will hide the int-category tag from Search Results:

Sample Code: will hide "int-category" tag from Search Results

Note: this will hide the tag from Search Results. It will still appear in the search dropdown list if readers begin their search with the ":" used for tag searches.

Hide tags containing a specific prefix or suffix from Search Results

If you use naming conventions to identify internal rather than external-facing tags, you might want to hide those internal tags from Search Results. If your tags have a consistent naming pattern, we recommend using JavaScript to hide the tags, rather than CSS, since you can write one statement to do partial matches (for example: hide all tags that begin with "internal-").

To use this approach:

  1. Go to Settings > Style.
  2. Click on Custom HTML > Body.
  3. At the bottom of the Body, add this script:
    <script>
    //Hide tags with "sample-" prefix from Search Results
    $(function(){
     $('.ko-tag:contains("sample-")').hide();
    });
    </script>
  4. Change sample- to match the prefix or suffix you use for the group of tags you want hidden.
  5. Click Save.

Note: this will hide the tags from Search Results. They will still appear in the search dropdown list if readers begin their search with the ":" used for tag searches.

This script will hide all tags that have "sample-" anywhere in them from Search Results.

Pro Tip: If you have a group of tags like "productguide", "productlabel", "product", and "byproduct" this logic will hide all four tags. We recommend using dashes or something similar in your prefix/suffixes so that you can try to avoid accidentally hiding tags that contain this word somewhere else.

Ideally, use a prefix that wouldn't show up as part of a legit tag. For example, we use "internal-" as a tag prefix and then hide all internal tags:

Sample Code: will hide all tags with text matching "internal-" from Search Results

Hide all tags and show only specific tags

You can also choose to hide all tags from Search Results by default and show only specific tags. This is great if you're mostly using tags for internal purposes but do have a handful of tags you want to show to your readers (like content designations: "Webinar", "User Guide", etc.) For this option, we'll use CSS to hide all tags from Search Results, and then use JavaScript to override that and display the specific tags we want to see.

  1. Go to Settings > Style. Be sure you are in the Custom CSS section.
  2. Copy and paste this code exactly into your Custom CSS:
    /* Hide all tags from Search Results */
    a.ko-tag {
      display: none;
    }
  3. Go to Custom HTML > Body.
  4. Copy and paste this code into the bottom of the Body editor:
    <script>
    //Show "tagname" tag in Search Results
    $(function(){
     $('.ko-tag:contains("tagname")').css("display", "inline-block");});
    </script>
  5. Change tagname to match the tag you want to appear in Search Results.
  6. For multiple tags, simply copy $('ko-tag:contains("tagname")').show(); and paste it again for each additional tag.
  7. Click Save.

Note: the CSS will hide the rest of the tags from Search Results. All tags will still appear in the search dropdown list if readers begin their search with the ":" used for tag searches.

Here's a sample with several tags:
Sample code to show only Webinar, User Guide, and Troubleshooting tags in Search Results; requires the CSS in Step #2 to work properly.