Peter Harvey, Linguist
The Big Parent Hacks Redesign

Weekend Project: Move the search form to the navigation bar

We're calling this a Weekend Project because there's a bit of code involved but you'll be amazed how easy this is to do. This project can be used on blogs using Basic Templates at any of the Pro subscription levels.

First, you'll need the code for your blog's search form. The code is different for each individual blog so to make it easy, we'll just grab the code directly from the blog's HTML source. Make sure the search form module is enabled in Blogs > Design > Content and then open your blog in your browser.

View the source of the page (View > Page Source on Mac, View > Source on PC) and look for the Search header in the sidebar code. You'll copy just the <form> code. Below is a screenshot of what to look for and copy.

View source

Next, go back to the Design > Content page and open the Navigation Bar. Here, select the Advanced option and paste the code in the list item (<li> in code) for the last item in the list. You will also add a bit of code to the float the form to the right in the nav bar. It will look like this:

 <li class=”last-nav-list-item nav-list-item” style=”float: right;”><form id="search-blog" method="get" action="http://example.typepad.com/.services/blog/6a00e550196b118834013486aabf34970c/search">
            <input type="search" name="filter.q" results="5" value="" />
            <input type="submit" value="Search" />
        </form>
   </li>

Here's an example screenshot:

Nav Bar code

When you save and view your blog, it should look something like this:

Search form on blog

The final step is to remove the search module from your sidebar in Design > Content. That's it! You're all done. Have a great weekend of relaxing and blogging, folks!

Comments

rebecca

i love this idea, but for some reason my search box is not to the far right on my navigation bar- help!

joeyandaleethea.com

Here's a fix. See this link, but make some changes to the sample code:
http://www.w3schools.com/tags/att_div_align.asp
Change the "center" to "right". And where it says "This is some text!", you would replace that with the above code, beginning with the bolded first line above in the post from Typepad. Ultimately, the second to last line of your code would be the above bolded last line from the Typepad post. The very last line would be the line of code from the link given above.

Cookie!

I've been trying to figure out how to get the search bar back on my blog after changing the layout. Thank so much for the uper easy fix. I love it!

Chrisstopher Alexander Anderson

good idea !!

rebecca

thanks so much, perfect! now somewhere around here i ran across a way to tweak the color of the search module...

Dave

You know, you can do this with pretty much anything. You can view the source, copy the module code, and place it almost anywhere.

To stylize the normal search module use:

.module-search .module-content{
*insert code here*
}

For example:

.module-search .module-content{
padding: 10px;
border: 1px solid #DDDDDD;
background: #E9E9E9;
}

is what is used on my blog. The #s can be changed to any 3-6 character hexidecimal. Or use "background: rgb(0,0,0)" for setting the color using Red, Green, Blue values. Since they tell you to copy and paste the search module without the tags this will not work if it is in the nav bar. I am pretty sure the search module would still work in the nav bar if you include the tags, and can also be altered using CSS. At any rate, things like this are very simple. Anyone who likes this kind of stuff simply MUST look into HTML and CSS, and learn the basics.

http://ihavefury.typepad.com/i-have-fury/

If you look at my blog, you can see what is possible with basic CSS. Notice that the Categories module has been stylized using CSS. It looks like buttons, and mousing over them changes their color. The padding on the banner has been removed. The navigation bar was turned to images using HTML, and CSS was used to add a dark background and make it so the buttons turn semitransparent when hovered over, making them darker. I also added a notice to the side, and stylized featured posts. Some of this was learned here at Everything TypePad, but now I can competently do much on my own.

I recommend the next Weekend Project here to be about changing the Categories module using CSS to look like mine. I can leave the CSS somewhere if you want. CSS and HTML offer much freedom.
Even without using an advanced template, the things you can do are astounding.

Also, @Cookie! couldn't you have just copy and pasted the whole Search module HTML into a custom HTML widget, div tags and all? If you want it in the sidebar, do that.

Note that you can add padding, a border, styled borders etc. to any module. Simply view the source, find where the module is defined, look at what it is called between the div tags, and use that in CSS.

.module-search .module-content{
}
for the search module.

.module-categories .module-content{
}
for the categories module.

etcetera.

Also, it might be nice if Everything TypePad mentioned different types of borders. Did you know you can change how a border looks using "border-style:"?

For example, using border-style:groove; uses a groove border etcetera. border-style:double; gives you a double border. Bloggers should take the basic CSS and HTML shown on Everything TypePad and use that as a launchpad into broader learning and projects.

Kate

Actually, I think the reason this didn't work for you is that there is a slight typo above - if you look closely at the quotation marks around "float:right;", you can see that the first pair is actually backwards.

I think this is some weird font thing, but I know when I initially just copied and pasted it didn't work either. When I "inspected element" in Google Chrome it flagged it as a CSS error.

So I just retyped it and it worked - I didn't have to mess around with an additional tag.

Oh, I did have to add a top-margin:10px; to that style as well (to get it to align vertically in the nav bar) - but that's my blog design issue. You can see it here: http://fsp.suncor.com/

I love being able to get stuff out of the sidebar and into the nav - thanks for posting these ideas!

Cheers ... Kate

Account Deleted

hiiiiiiiiiiiiiii

Account Deleted

very well i like it............

Account Deleted

Awesome post.

http://plumbing-xspurts.ca

The comments to this entry are closed.