October 12, 2011

Blog Search Results

These tips are available for use in all Pro-Unlimited accounts and above.

The search results displayed when using the native Typepad search module include matches found in several areas. By using Custom CSS or Advanced Templates, you can make several changes to the search results--hide results from specific areas you don't want made available to your readers, or change the highlight color of the search term in the results!

Note that, by default, the search module will search for results in the content of posts, pages, and comments.

How to Hide Comments in Search Results


Comments in Search Results

As shown in the image above, there is a comment that has been returned in the search results because the search term, "ipsum", was found within the comment itself.

If you do not wish to show results that match comments, then you can hide or remove them so they are not shown in your blog. There are two ways in which to get rid of their cropping up in the search results:

  1. Use CSS
    (recommended, regardless of whether you have access to the Custom CSS screen or use the Advanced Templates stylesheet)
  2. Edit "Search Results" template
    (only if you use Advanced Templates for your blog and see a "templates" in the left column when you click on the Design tab)

Use CSS to Remove Comments from Search Results

If you use Basic or Advanced Templates, and prefer to hide comments from within the search results, then you can use CSS to perform that task for you. This is the recommended method since it does not require having to comb through any HTML or worry about accidentally deleting something vital to your templates. 

The CSS you would use is the following:

.search-results .comment { display: none !important; }

Add that to either the Custom CSS screen at Design > Custom CSS or, if you're an Advanced Template user, to the stylesheet template at Design > Templates.

Edit Template to Remove Comments from Search Results

If you prefer to completely remove the code for the comments from the search results template, then you would go to Design > Templates, and click to open the "search results" template.

Scroll through the template until you locate the MTSearchResultsIfAsset tag group associated with the comment type. Delete the entire tag group and the contents within.

The tag will look like this:

<MTSearchResultsIfAsset type="comment">

It will end with:

</MTSearchResultsIfAsset>

Please note that there are multiple instances of the end tag (</MTSearchResultsIfAsset>), so only remove the tag which closes the comment type instance.

Save your changes to the template. To verify you made the correct changes, you can perform a search for a term you know previously resulted in comments appearing in the search results.

How to Hide Pages in Search Results

Edit Template to Remove Pages from Search Results

If you prefer to completely remove the code for the Pages from the search results template, then you would go to Design > Templates, and click to open the "search results" template.

Scroll through the template until you locate the MTSearchResultsIfAsset tag group associated with the page type. Delete the entire tag group and the contents within.

The tag will look like this:

<MTSearchResultsIfAsset type="page">

It will end with:

</MTSearchResultsIfAsset>

Please note that there are multiple instance of the end tag (</MTSearchResultsIfAsset>), so only remove the tag which closes the page type instance.

Save your changes to the template. To verify you made the correct changes, you can perform a search for a term you previously resulted in Pages appearing in the search results.

Change the Highlight Color of the Search Term

If you would like to change the highlight color, which appears in the background of each instance of the search term, then we recommend using CSS. You can use this tip with both Custom CSS or the Advanced Templates stylesheet.

The CSS you will need to use in order to change the highlight color is:

.search-results .search-results-highlight {
  background-color: #c00000;
}

The #c00000 hexadecimal outputs a red color, which would change the default background color of yellow to red. You can use any hexadecimal color you feel best matches your blog's design.

Remember that if you set it to have none, transparent, or the same color as the background of your blog, then the search term will not be highlighted at all.

If you don't know the hexadecimal color code of the color you want, then we recommend using your preferred search engine to search for "hexadecimal color chart." One such site is the W3Schools' HTML Color Chart.

Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services