Build Your Own Business Website header image

How to upgrade from Thesis 1.x to Thesis 2 Using the Thesis Classic Skin – Part 7 – Add Search to the Header

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

The next thing to do in this Thesis 2 upgrade is to add in our Add to Search to the header. In the original Search is actually a function that is added using PHP code. We’re not going to do it that way here, what we’re going to do instead is create a widget area then use the Thesis Search Widget there.

Add Thesis Search Widget

So we’ll come back over to HTML and we’re going to create a new widgets box and we’ll call it Header Widget then I’m just going to shift drag it up into place. I’m going to drop it into the Header actually down below the Tagline and I’m going to call it Header Widget and save that.

Then what we’re going to do is come back over to the Appearance and Widgets Panel and under our new Header Widget, we’re going to take this Thesis Search Widget, drop it into place and we’ll say, Search and we’ll Display Submit Button. We’ll leave it like that, hit save then if we refresh our page, the Search Widget is in here.

Add a Style to the Widget Area

Now, we have to style this so that it shifts over to the right and gets to a reasonable size. Let’s come back over to the Thesis Skin Editor and over to CSS. First, we’re going to add a style to that widget area. It’s a single element style. We’re going to add a package, call it Header Widget, we’ll reference it header_widget, and it’s going to get the CSS selector of .header_widget.

What we want to do is give it a width of 315 pixels and first, we’re just going to start off with 0 margins everywhere. But we do need to add some additional CSS here so we’re going to say .header-widget then it’s going to say {float:right;} because we want it to float to the right and we’ll hit save.

Actually, let’s make sure we get our reference, hit save, come down beside widgets and we’ll say, & and our reference, save the CSS. So there it is, we’ve now jumped this thing down and we’ve moved it over.

Add Additional CSS to the Menu

Now, we’re going to adjust the margins on this a little bit yet and we’re also going to make some changes to the menu but I think the most rational thing to do first is to clear this right float for the menu. That means we’re going to take our menu and we’re just going to add Additional CSS and it’s going to be .menu. Actually, I think we just want this for the ul so it’ll be then {clear:both;} and that will make that menu drop down below. See now it’s dropped down there.

I think we’re going to want to get rid of this bottom border in the header then we’re going to want to shorten this up. Then we’re going to create two input styles essentially, an input style for the text input and an input style for the search button.

Let’s come over to Header first and get rid of that border, then we’ll create two new input styles. The first one is going to be a text input style and actually, let’s save this, refresh this one just so you can see what’s going on here.

If we inspect that, this form is called the search form, it’s got a class search_form and the text input has a class of input_text. What we want to do is change up the search form but we only want to do it inside the header so that if there’s some other place we put the search form, we don’t change it everywhere.

Add a Form Input to the Header

We’re going to go back to the Header Area, search_form and input_text as our selector for this. We’re going to take a Form Input, add a package, we’ll call that, Header Search Text Input and header_search_text _input and what did we say that was, we said it was #header_area then .search_form and .input_text.

If we give it a width and we need to give it a float so we’re just going to grab this selection again. I want it to float to the right, save that then let’s see, where are my forms, &input so &header_search_text_input. There we go, now it’s 200 pixels and sitting off to the side.

I do want to get this peachy color in there, that’s this color here and let’s just grab that color and see what it is, okay ffffdc. Come back over to that input and we’re going to give it this background color then we’re going to create one more input style and that’s the Submit Button input style.

It’s not going to be .input_text, that id searchsubmit so .search_form then #searchsubmit. This is going to be the Header Search Submit and the reference will be header_search_submit. In terms of options, I’m going to make the width 105 pixels. I’m going to get rid of the border, I’m going to give top and bottom padding of 10 pixels and I’m going to hit save. Then we’ll come over to our &submit and look at it. There we go, we’ve got that almost happening right.

Add Header Background Image

Now, what we want to do is put the background image in there because we’ve got a little search button. We need to come over to images and choose a file, grab our search button, open, add the image. We’ll copy that, come back over to CSS, open up Header Search Submit then background is going to be this background image.

Actually I’m just going to show it to you what it looks like right now first before we talk about what to do. We have the Search button plus the Search Text over the top of it. We don’t want that, we want this to turn into a cursor when we hover over it, we also don’t want this thing repeated and we want the background to be transparent. So we’ve got a bunch of niggly little things to do with this. We’ll start off back over here to Header Search Submit and we are going to go to background.

Change Background Position

First actually, background position, what I really want is 50% and 50%. I want this thing centered in the space perfectly then I want to no repeat and the background color here to be transparent. The other thing I want to do is get that text out of the way so what we’re going to grab our selector then say, {text-indent:9000px;}.

That makes it get out of our way then the other thing we want is curser:pointer;}, change the cursor, hit save, come back over and take a look at it. It now looks right but the cursor pointer didn’t take because what that really is, is a hover condition.

So we’ll just copy this again, use the hover pseudo class, get rid of the text-indent, get rid of the curser:pointer there, save that and take a look at it. You know what, I must be spelling cursor wrong, oh, “or” that’s it. That’s the nice thing about working with error checking code editor, it will tell you when you mess up like that.

We have to look it up over here and now it works. Then we just want to add a bit of margin to the top of this text to bring it down so it lines up. Maybe 3 or 5 pixels of margin and that’s this one here, our text input, we’ll say margin top, let’s call it 3px and 5 px then we’re going to give this a bit of margin and move it down so that it’s further away from this.

In fact, I think we also have this margin bottom that we need to get rid of so let’s come back to that and looks at our Header Widget. Our top margin, let’s call it 20px and let’s say our bottom margin is 10px, hit save. I’ve also got a funny thing here, this p tag has it. So widget p has a bottom margin of 19 pixels so what I need to do here is under our Header Search, we’re going to take the same thing, input_text p and we’ll say {margin:0;}.

There we go but I didn’t solve it yet. Oh because that’s p then it’s input_text, that’s the problem, it’s the arrangement that I made for this thing. It is .search_form p .input_text, that should have worked. Let’s try it in Header Widget instead, .header_widget p{margin:0;}. Okay, that did the trick so this needs to come down to 5 and we should be good to go there. We are.

0 Comments… add one
0 comments… add one

Leave a Comment