Typepad Master Class: Highlight the blogside search

February 18, 2014

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

blogside searchTypepad offers great built-in features for helping readers navigate your blog. One of those is the blogside search form, which you can enable in Blogs > Design > Content. We recommend placing it near the top of the sidebar so it's easy to find.

A great way to draw attention to the search form is to make it a color that stands out. You can then take that code one step further and use a fancy background image to really draw focus to the search form. It's also a nice way to add visual interest to your sidebar.

This tutorial uses the Custom CSS feature, so it's geared toward our Pro Unlimited and Premium subscribers. Let's get to the code!

First, let's remove the "search" header:

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

Next, we'll set a background color, a font color, and a font size.

.module-search input[type="search"],
.module-search input[type="submit"] {
background-color: #ffcccc;
color: #000;
font-size: 10px;
}

The #ffcccc is light pink with #000 for black text. You can set those colors to anything you wish. Here's how that code should look in action:

Search1

Looking better but it's not there yet. Let's set a narrower width so the search field and button are closer together, remove the border around each element, add some padding so everything looks nice and make the "search" button text uppercase just for fun.

First:

.module-search input[type="submit"] {
border: 0;
padding: 2px 3px;
text-transform: uppercase;
}

The next part depends on which layout you're using. For blogs with one or three column layouts:

.layout-one-column .module-search input[type="search"],
.layout-three-column .module-search input[type="search"],
.layout-three-column-right .module-search input[type="search"] {
width: 63%;
padding: 3px;
margin-right: 0;
border: 0;
}

For blogs with a two column layout:

layout-two-column-left .module-search input[type="search"],
.layout-two-column-right .module-search input[type="search"] {
width: 75%;
padding: 3px;
margin-right: 0;
border: 0;
}

Here's the final result:

Search2

Looks pretty great! And it's not too difficult to implement.

Now let's expand on the code above and place a nice image behind the entire form. Here's an example of how the end result will look:

Sidebar with image background

This method involves creating the image to go behind the search form, so you will need Photoshop or another image editor and some experience there. The design itself is up to you - that's where your own creativity comes into play.

You'll want to make sure to use a good size for the image, so we recommend starting there.

If you're using the Theme Builder, you can determine the correct width for the image by going to Blogs > Design > Theme Builder and checking the width you have set for the sidebar. Then, subtract 30 pixels from that width to account for padding that's inside the column. So if the sidebar is set to 300 pixels, the search background image should be around 270 pixels wide. You can make it narrower if you wish, of course.

If you're using a built-in theme, the width of the sidebar will depend on the specific design. A good place to start is 250 pixels if the design has two columns and 150 pixels if it has three columns.

The height of the image is up to you but in our example, we stuck to 40 pixels. That's enough for a nice design without taking over too much space in the sidebar.

The CSS for this will be similar to what we started with some edits. First, let's hide the sidebar header again and set widths for the search input and submit button. We're using specific pixel widths this time so we have more control over positioning.

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

.layout-two-column-right .module-search input[type="search"] {
width: 170px;
padding: 3px;
margin: 0;
border: 0;
}

.module-search input[type="submit"] {
width: 55px;
padding: 2px 3px;
border: 0;
text-transform: uppercase;
}

The values can be tweaked once the background is in place - that Preview button on the Custom CSS page is handy!

Next, upload the background image in Library > File Manager so you can place it behind the search bar:

.module-search {
height: 40px;
margin-bottom: 20px;
background: transparent url(http://example.typepad.com/blog/searchbg.png) center center no-repeat;
}

The height element should be the same height as the image itself. Here's where we are so far:

Background in place

Next, we'll set a width for the form and center it. This will allow for some space on either side of the form so it's centered in front of the image. The width should be 10 pixels more than the search and submit widths combined from above. In this case that's 170px + 55px + 10px.

.module-search .module-content {
background: transparent;
width: 235px;
margin: 10px auto;
}

Finally, let's set a transparent white background for the search input and button so some of the background image shows through:

.module-search input[type="search"],
.module-search input[type="submit"] {
background-color: rgba(255, 255, 255, 0.5);
color: #000;
}

In the example, 0.5 is half transparency. You can adjust that up (to say, 0.8) for less transparency or down (ex. 0.2) for more transprency.

The example above is just to get your creative ideas flowing! We hope you'll take some time to try it out and if you do, share a link to your blog in the comments for this post.

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.