Blog Search Customization

It has been nearly a year since we released the blog search module. Many of you have added the search module to your blog making it easy to find posts by searching.

We've received several great questions about how to customize the search module, including how to change the header. With Custom CSS - a feature available with the Pro Unlimited and higher plans - you can customize the search module.

At Design > Custom CSS, you can enter the CSS provided with the tips below or CSS from the Knowledge Base article.

Hide the Search module header

Since the submit button says "Search", you may feel the Search header is unnecessary. The CSS code to hide the header is:

.module-search .module-header { display: none !important; }

Align the Search button next to the text field

To save space in the sidebar, you may want to include the search field and button on the same line using the CSS:

.module-search input[type="search"] {
width: 175px !important;
float: left !important;
display: inline !important;
}

.module-search input[type="submit"] {
display: inline !important;
}

You may need to adjust the width depending on your column width.

Change the Search module header

You can add text before or after the Search text in the header. If you want to add your blog's name to the search header, you can use CSS similar to:

.module-search .module-header:after { content: " The Blog" !important; }

Where you can change " The Blog" portion of the CSS to be the name of your blog or other text to display in the header. The space between the first quotation mark and your text is required if you want a space to appear between it and the existing "Search" text in the module header.

The Knowledge Base article on the search module has more tips. Are there other customizations you would like to make to the search module? Let us know in the comments.

Comments

[abdi kassim]

Woooooooow! This is awesome!

[Boy Khobar]

yes...........thanx!for the typepad team...for making this kind module!