My idea to change the design of this WordPress blog begins now. In this 1st tutorial I’ll design a search box. First I’ll begin with the design in Photoshop. Look at the video below to see my design. Hope it will be in use for you.
Part1 Design the simple search box and search button:
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,
Here is the CSS I am using:
for search form:
and for search submit (thisi s my button):
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:
value=”Search” should be empty like the example:
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