Build Your Own Business Website header image

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.

Lesso 9 – Part 7 – Replace Search Submit Button With Button Image

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

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.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
4 Comments… add one
4 comments… add one
  • steve Whitehead September 8, 2010, 7:59 am

    Rick — Im getting a bit confused — am i right in thinking that all custom changes are really only custom css and custom php – so can that be done through just web developer for css and net bean for php?? –ie dont need additional text editor ??? or do we? let me know
    thanks STeve

    • Rick Anderson September 8, 2010, 9:05 am

      Steve, you do also need a text editor. I highly recommend the free Net Beans editor and that’s what you will see mostly in the videos

  • chung tang December 3, 2010, 11:05 am

    Wow..awesome tutorials Rick.

    You’re an extremely good educator.

    I learned a lot here.

    Everything is very well explained.

    Thank you.


  • Gerd Haslinger July 31, 2012, 7:58 am

    Rick, I followed the steps, but still can’t see the footer image (i used yours to test it) on my website. Is there a pre configuration of the footer i need to do on thesis before?