and I design games.




The Making of a Not-So-Boring Search/RSS Widget

Category : Tips, Tutorials · by Nov 28th, 2008

Before & after of the search widget for ryanburrell.com

Maintaining your own site can be a real chore.  That’s one of the many reasons why I like WordPress so much: it makes updating and adding new content easy.

But what about non-content updates?  I’m talking about tweaking something that doesn’t look exactly the way you’d like it to visually.  A lot of people seem to shy away from this because it seems very daunting.  That’s yet another reason why I love the general setup of WordPress: changing the visual composition is just as easy as changing the content.

Note: from this point on I’m going to assume the reader’s at least beginner knowledge of Photoshop, CSS, and HTML.

The Goal

As you can tell from the header picture above, the search section in the sidebar of this site was pretty lacking for awhile.  It worked fine, but looked like crap (which in my book is just as important as making sure it works).  So, I set out to give it facelift.

But where to begin?  Probably the most daunting part of making a visual change to any part of a site is the fact that it involves being *GASP* creative.  It’s really not that hard; give yourself some credit: you’re more creative than you think.  In my case, I’ve decided to go with this whole mixed-media jump-off-the-page approach because I feel it is more engaging to the viewer and keeps me from being entirely bored after staring at it for hours trying to get something to work right in IE6.  So, I decided I need to do something that goes along with that.  Enter the torn paper look.

Texturize Me!

Awhile back I found this great post on Smashing Magazine.  I think I downloaded almost every brush they had listed, but in particular I was intrigued by the torn paper brushes.  I selected one that looked like a scrap of paper, and smacked it over my original layout file in Photoshop. The brush I selected

I added a little bit of emboss to make it pop, and called it good.  Nothing super fancy, but enough to make it interesting.

Paper scrap in my layout

Now, the bigger issue is scalability.  Since whatever I end up putting in this search area could potentially increase with the browser’s text size, I need to make sure that it grows.  So, what is now a single image will become two, and the bottom portion will have a transparent background so it can move down the page and still have the page background show through.  Let’s look at the code:

  1. <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
  2. <div>
  3. <label class="nodisplay" for="s"><?php _e('search for:'); ?></label>
  4. <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
  5. <div class="right">
  6. <input type="image" src="<?php bloginfo('template_directory'); ?>/images/btn_search.gif" id="searchsubmit" value="search" />
  7. </div>
  8. </div>
  9. <div class="btm"></div>
  10. </form>

Now, I made my theme from the Default Theme that’s included with WordPress, so the above code is located in the searchform.php template page.  All themes are different, so yours may be somewhere else entirely.  The idea here is that the background portion that is more solid will be its own image that will tile, while the bottom part with the ragged edge will be a single, non-tiling image.  To accommodate this, all of the actual content of the search form (the <label> <input type="text"> and the <input type="image">) is contained within its own <div> that will have the tiling background.  A separate <div> (the one with the class="btm") is placed just below that, which will be styled to show just the ragged edge.

Next up, saving the images and writing the CSS.

Enter Photoshop

Photoshop is great.  Saving the first background image (the one that will tile) is easy.  The image is cropped to only have the solid portion, click the Save For Web option in the menu, and you’re done.

Cropping the image

The ragged portion at the bottom is a little trickier.  We want the ragged edge to be able to move down the page as this search widget area lengthens.  If we simply cropped the image with the page background behind it, then when it moved it would eventually show the crop line.  Nope, instead we’re going to erase around the ragged edge of the image to make it transparent, and then save it as a GIF.  Don’t worry about being too exact; a surprisingly large amount of visual effects on the web rely on your eye automatically blending like-colored and blurred areas together on screen and other visual tricks:

Making the bottom transparent

The CSS

Now that the images have been cropped, edited, saved, and uploaded correctly, we’ll write in some simple CSS to make everything come together.  The following is entered into the stlyesheet I have connected to my site that defines the visual composition:

  1. /* Search Form */
  2. #searchform div {
  3. background: url(../images/bkgrd_search.jpg) repeat-y;
  4. padding: 0 12px 0 7px;
  5. }
  6. #searchform div.right {
  7. background: none;
  8. padding: 0;
  9. }
  10. #searchform div.btm {
  11. background: url(../images/bkgrd_search_btm.gif) no-repeat;
  12. height: 18px;
  13. }
  14. #searchform input#s {
  15. border: solid 1px #A5ACB2;
  16. margin: 12px 0 6px 0;
  17. width: 100%;
  18. }

I quick run-through on what the code is doing here.

  • #searchform div assigns the background to the <div> containing all the form elements, tiling by default.  Since this is assigned to all <div> tags within the <form>, we need:
  • #searchform div.right.  This excludes the <div> that aligns the search button to the right from tiling the background image again.
  • #searchform div.btm edits the “empty” <div class="btm">.  It tells it to have the ragged edge as a background, to not tile, and to be the exact height of the image.  This is important, because otherwise the <div> would collapse since it contains nothing inside it.
  • #searchform input#s just contains some simple styling for the search box.

That’s it; we’re done!

Going Further

Next time up: the RSS portion.  It’s a bit more complicated, but luckily it involes jQuery, which makes it extremely easy.  Until then…

SHARE :

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>