For better design: Template 1: Design a simple search box and search button tutorial.

Begining.

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,

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!

Search button image with text

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

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

3 Comments

  1. Nice tutorial, there’s not enough importance put on the design of a search bar. Check out bigsearchbar.com for more search bar design examples & inspirations.

    ReplyReply
    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. @Brett:

    Nice web site, thanks for sharing :)

    ReplyReply
    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  3. I blog often and I really appreciate your information.
    This great article has really peaked my interest.

    I’m going to book mark your website and keep checking for new details about once a week. I subscribed to your RSS feed as well.
    Antoine´s last blog post ..Antoine

    ReplyReply
    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

Leave a Reply

Your email address will not be published.

*

CommentLuv badge

© 2017 For better Designs

Theme by Anders NorenUp ↑

Get Adobe Flash player