Part 2 place the image to the template:

OK so after I have the design, I should crop this images and save them as 3 separate files.
1. Search box image
2. Search button image
3. Search button hover image.
Now it’s time to upload the images to my image folder in my server. Usually in /themes/”themename”/images… The first thing I should do now for this images to work is to make CSS class in my HTML file.

So this part 2 is about that. Let’s begin!

1st: the class of my search form in called : searchform2
and the class of my search button is called: searchsubmit

It’s so easy because all I should do is to add the path to the images I have, also the size of the images,

Used CSS

Here is the CSS I am using:
for search form:

.searchform2{
height:17px;
float:left;
width:159px;
background-image:url(images/searchbox.jpg);
background-repeat:no-repeat;
border:0px;
padding:11px 0px 11px 11px;
color:#628088;
margin-left:19px;
}

and for search submit (thisi s my button):

.searchsubmit{
float:left;
height:28px;
width:28px;
cursor:pointer;
background-image:url(images/searchbutton.jpg);
background-repeat:no-repeat;
border:0px;
margin-top:5px;
}
.searchsubmit:hover{
float:left;
height:28px;
width:28px;
cursor:pointer;
background-image:url(images/searchbutton_hover.jpg);
background-repeat:no-repeat;
height:28px;
width:28px;
border:0px;
margin-top:5px;
}

And I’ll upload everything to my server. So this is all I need for my images to appear. Off course this CSS style is for my template
and this is what sweat my needs. But this is the way how it works

The next thing I should do is in my HTML file. In this way if, you have tried to do this, you’ll notice that over our image of the button there have some text that appear ugly there!

By default the word: search, so if your button is like mine. It is just an image, you can remove from here in the HTML:

<input type=“submit” id=“searchsubmit” value=“Search” />

value=“Search”  should be empty like the example:

<input type=“submit” id=“searchsubmit” value=” ” />

and after that I am done with the design of the searchbox. Now If you have followed this tutorial, you can do all kind of designs for your search boxes. This is basically how everything with CSS work, there have just different techniques and you need a LOT of practice. Hope you’ve learned something here. Bye