This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to the seventh and final part of Lesson 9 of the Build Your Own E-Commerce Website tutorial series. In this final part of the lesson we are going to replace the search bar with a search button image in the Thesis Header.
Let’s go ahead and look at what the final product looks like. Here it is; this is the search button that we are going to take and use in the place of the CSS search bar in the Thesis Header. If we inspect that element you can see that it’s input searchsubmit, it’s got the value of none which we’ll have to make a change for, then a background-color of transparent, a background-image without any repeating and then it also has some width and height.
Locate the Search Button Image and Customize the CSS
Let’s borrow that search button image, go over to Media, scroll down here to search2.png –save it. Then we’ll save it again. Bring up FileZilla – whoops, I went too far – go to images, upload search2, close it, come back here, inspect that element again so we are talking about input. Now we are going to custom.css, scroll down here to this search – inadvertently put it under footer rather than under header but in any case we are going to come to this search_form #searchsubmit. Font size is irrelevant and we don’t want any padding. We’ll make the background-color transparent as you saw earlier. Well, we’re going to leave it alone for a moment and we’re going to say the background-image: url. Let’s go ahead and steal this background-image: url from another place. This is a no-repeat and then you can see it’s trying to use the original image there. Come over here and instead of footer-background2 replace that with search2.png.
You can see that the search button is trying to take up that space. I think the width of 100 is fine. We need to give it a height of 30 pixels. Yes, that does work. Now you can see why we want the background color to be transparent because you can see the gray around here. Say background-color: transparent. Now it’s green back there but that green is partially obstructed by this border so say border :none.
Change custom_functions.php File
Although you can see that little bit of text back there so we’re going to also have to change our custom_functions.php file to get rid of that value but the button has dropped in place there. We’re going to copy this one piece, the one thing that we changed. Come back to our custom.css, and change that one piece there. Then we’re going to take this custom search out of that section because it doesn’t belong there and bring it up to our header section. Before we save that come over here to this function that we created and take that Search out of the value. The value is blank. So we’ll save that document, save the custom.css, open up Filezilla and we will upload both those files.
Come back over here to Firefox, test it and you can see that the search button has shown up in its place and if we type in orange and hit Search it works.
Add Hover Behavior to the Search Button
We want to give the search button a bit of hover behavior. So we’re going to do that by adding opacity to it and by changing the pointer when we hover over it. To test that first, come over to custom.css, down here let’s copy that and give ourselves a closing bracket, searchsubmit it will say colon hover, and then 1, 2, 3. Then we’re going to say opacity: 0.6, you can see it changes color now and becomes slightly transparent. Then we’re going to say curser, colon, pointer, semi-colon. See you could take opacity down to 0.2 which would be really funny, right. It almost goes away entirely or to 9 where it barely changes. I like 6 so that’s where we’re going to keep it at.
That works the way it ought to so we’ll copy that. Come back over to our custom.css file, go below the searchsubmit button, add the next iteration, save the document, upload it, test it in Firefox –works great. We’ll test it in Chrome. Well it sits kind of funny in Chrome. Let’s test it in Internet Explorer. It’s just fine in Internet Explorer except IE does not support the opacity property and so all we’re getting is a pointer but that’s fine. And the location of this searchsubmit button in relationship to this is going to change once we finish making the changes to the header by customizing our Nav Menu.
So that wraps up Lesson 9, Replace Search Bar with a Search Button Image in the Thesis Header.
