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

However, if you're using tags for custom filters in the Manage Articles interface, you might not want those internal tags to be shown in search results.

You can mark tags like this as hidden from readers. Hiding a tag from readers:

  • Keeps it visible in the article editor and category editor
  • Allows it to be used as a filter in Manage Articles custom filters
  • Prevents the tag from appearing in search results in your knowledge base
  • Prevents the tag from appearing in the typeahead suggestions when a reader types ":" to begin a tag search

To hide an existing tag from readers:

  1. Go to Library > Tags.
  2. Click to select the tag you'd like to hide from readers.
  3. Click on the Edit link.
    Select the tag you'd like to hide and click Edit
  4. In the edit pop-up that appears, under Visibility, check the box next to "Hide tag from readers."
  5. Click the Edit Tag button to finalize your changes.
    Check the box to Hide tag from readers, then click Edit Tag to finalize your changes
  6. Regular tags will have a normal tag icon in the Tags Library; tags hidden from readers will have a padlock icon. Here, "javascript" is a tag readers can see, and "tipsandtricks" is hidden from readers:

Style the glossary snippet search results

If you've enabled the option to display glossary snippets in your search results, you can style the snippets in a few ways.


Style the box

You can style the box the result displays in, to adjust the background color, border, border color, thickness, and so on.

The default styling for this box is:

.ko-glossary-search {
    border: 2px solid #e3e3e3;
    border-radius: 4px;
    margin: 15px 0;
    padding: 12px;
    position: relative;
}

This creates a box with a light grey border, with a white background and some padding between the text and the border, as seen in the screenshot above.

If you'd like to change any or all of this styling:

  1. Go to Settings > Style.
  2. Below the preview window, select Custom CSS.
  3. Add CSS to style the .ko-glossary-search class the way you'd like. 
  4. Save your changes.

For example, this CSS will keep the border the same size and width but change it to dark red, gives the entire box a light pink background color, and changes the font-color of all regular text in the box to white:

.ko-glossary-search {
    border: 2px solid #9c4728;
    background-color: #dc9b83;
    color: #ffffff;
}

It looks like this:

Sample of the glossary snippet search result box as styled using the above code

Style the term

By default, the term will be displayed in bold, and the definition will appear below it in slightly smaller regular font text.

The glossary term is styled using the .ko-glossary-search-header class. You can add custom CSS to change the font-weight, color, font-family, and so on. To do so:

  1. Go to Settings > Style.
  2. Below the preview window, select Custom CSS.
  3. Add CSS to style the .ko-glossary-search-header class the way you'd like. 
  4. Save your changes.

For example, this CSS will display the glossary term in all uppercase letters and in a dark pink color:

.ko-glossary-search-header {
    text-transform: uppercase;
    color: #9c4728;
}

It looks like this:

Sample of the glossary snippet search result term as styled using the above code

Style the definition

By default, the term's definition will be displayed in bold, and the definition will appear below it in slightly smaller regular font text. You can style the definition font differently using one of two classes:

  • .ko-glossary-search-result will style the definition as well as the Glossary hyperlink at the end. Use this class if you want to set the font-family, etc., for all the text there. (Since the Glossary is a hyperlink, the color and a few other traits cannot be styled here and need to be styled for the Glossary hyperlink itself--see below. But the font-family added here will apply to that hyperlink!)
  • .ko-glossary-search-result-definition will only style the definition. Use this class if you want to style the definition only but not touch the Glossary hyperlink.

To add styling for either of these classes:

  1. Go to Settings > Style.
  2. Below the preview window, select Custom CSS.
  3. Add CSS to style the .ko-glossary-search-result class or the .ko-glossary-search-result-definition class the way you'd like. 
  4. Save your changes.

For example, this code will set the full search result to display in Garamond, in all uppercase, and a dark pink color:

.ko-glossary-search-result {
    text-transform: uppercase;
    color: #9c4728;
    font-family: Garamond;
}

Which will produce this result:

Sample of the glossary snippet search result text as styled using the above code

Whereas this code will make those changes only for the definition itself:

.ko-glossary-search-result-definition {
    text-transform: uppercase;
    color: #9c4728;
    font-family: Garamond;
}

Which looks like this (note that the Glossary link is still in the original font and case):

Sample of the glossary snippet search result definition as styled using the above code

Style the Glossary link

Last but not least, you can also style the hyperlink pointing to the Glossary. This gets styled using the .ko-glossary-search-link class, but since our themes have some global styles for hyperlinks specifically, the CSS to change it looks a little different.

If you're using the Minimalist theme, you'll want to style using: .hg-minimalist-theme a.ko-glossary-search-link:not(btn). If you're using any of our other themes, style using a.ko-glossary-search-link. (And if you might switch between themes, you can use both, as we do in our code examples below!)

To

  1. Go to Settings > Style.
  2. Below the preview window, select Custom CSS.
  3. Add CSS to style the a.ko-glossary-search-link class for the link in its original state, or the a.ko-glossary-search-link:hover class for the link in its hover state. For the Minimalist theme only, include .hg-minimalist-theme first, as noted above.
  4. Save your changes.

For example, this CSS will change the hyperlink to a blue color:

.hg-minimalist-theme a.ko-glossary-search-link:not(btn),
a.ko-glossary-search-link {
  color: #5C9AD1;
}

Sample glossary snippet search result with hyperlink styled using CSS above

And this CSS will change it to a blue-green color on-hover:

.hg-minimalist-theme a.ko-glossary-search-link:not(btn):hover,
a.ko-glossary-search-link:hover {
  color: #1abc9c;
}

Sample glossary snippet search result with on-hover hyperlink styled using CSS above