How To Code The Mockup Search Box Design from PSD to WordPress Theme

4th Jun 2010 | Posted by Eko S. | 6 Comments

A couple of weeks back we went through the process of creating a search box design concept in Photoshop. The tutorial covered the process of designing our search box in photshop to an inspiratian for creating more color schemes. Now, let’s take the design to apply a complete mockup in wordpress theme.

Cast your mind back and you’ll remember we create a simple and elegant search box with transparency style.

In this tutorial we will use one of our most popular free wordpress theme “LighFolio” as an example of its application.

Tutorial Details

Step 1. Cutting up the psd concept
In your photoshop, open the search.png file (as we have made in the previous tutorial), then open canvas size (alt+ctrl+C) change the width of the image become 178px, clik ‘OK’

Then slide the layer to the right until the end of the visible image on the left. Save the image with the name “search_img.png”
See the result :

Again open the canvas size (alt+ctrl+C), change the width of the image become 31px, clik ‘OK’

Then slide the layer to the left until the end of the visible image on the right. Save the image with the name “ico-search.png”
See the result :

Step 2. Upload the images
Now we have two image (search_img.png and ico-search.png). Next upload these image to the images folder on LightFolio theme. These images will replace the old image on the LightFolio theme.

Once all of the images have been saved, you’re ready to move onto applying it to wordpress theme.

Step 3. Applying it to wordpress theme
It’s easy, open the style.css file, go to line 247 in #topSearch p.fields button{} change the background #ffffff become transparent and the right position become 8px.

Save it! and it’s done

Final Concept

So here we have the complete mockup in live wordpress theme. With minimal effort, we’ve created an elegant looking search box from scratch. Let me know if you have any questions! Thanks for reading.

Our excellent online CISSP test training programs will lead you to success in the PMI-001 exam.We also offer latest 350-030 questions with 100% success guarantee.

Want to be emailed when new comments are added?