Typepad 101: Changing the Search Highlight Color

December 19, 2012

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. Topics covered in this series are suitable for bloggers at any skill level, but since this trick uses Custom CSS, you'll want to be at the Pro Unlimited level or above. If you're interested in upgrading to put these tricks to use on your blog, you can upgrade your account anytime. If you're at the Free Micro or Pro Basic level and are interested in upgrading to put these tricks to use on your blog, you can upgrade your account anytime.

We've been over this before; you want to fancy up your blog with some design changes, but you don't want to spend a lot of time working on it.  Today's tip is a way to make a change to your search results with minimal time and effort.

If you haven't already, you should first go to Design > Content and add the Search module to your blog's sidebar.

Next, go to Design > Custom CSS and add the following:

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

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

Yellow
Before Custom CSS is applied.

Red
After Custom CSS is applied.

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.

If you're feeling really adventurous, you can find some additional search CSS changes in the Knowledge Base.

comments powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.