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

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.

2 Comments to “How To Code The Mockup Search Box Design from PSD to WordPress Theme”

Add Comments (+)

  1. johnhoma124 says:

    Your work has always been a great source of inspiration for me. I refer you blog to many of my friends as well.

  2. Sanjeev says:

    Thanks great tutorial

Trackbacks/Pingbacks

  1. Tweets that mention How To Code The Mockup Search Box Design from PSD to WordPress Theme | DynamicWP -- Topsy.com
  2. How to Create A Simple and Elegant Search Box in Photoshop | DynamicWP
  3. wp-popular.com » Blog Archive » How To Code The Mockup Search Box Design from PSD to WordPress Theme | DynamicWP
  4. 35+ Fresh WordPress Tutorials and Resources of June 2010 | DynamicWP
  5. Wordpress Tutorials 2010 - Nilesh Shiragave PHP | Wordpress Expert

Leave a Reply

 

Amazingly Beautiful WordPress Themes