Headers, Menus, and Search Boxes

After spending some time working on a new header/menu area for the site, I implemented a couple of things I’ve done in the past, most notably having a transparent PNG serving as an overlay. Over on Blizzforums the header images are basic, the only added feature are scanlines, however there is a nifty logo that’s a transparent PNG with alpha transparency so it works with any header graphic. Basically the idea there is that instead of imprinting the BF logo on every header graphic, I would just leave it as a PNG and have it sit on top of whatever is behind it. This doesn’t always work out though, because remember PNG w/alpha transparency stuff renders poorly on some browsers (earlier versions of IE, sigh). Even then there’s a simple javascript-based “png fix” available.

For Kupatrix I decided to take it a step further, instead of having to add scanlines to every random image I added to the header, why not use a PNG? To see what I mean, view the header png. The scanlined area you see is actually transparent. This allows me to drop in any image I wish, as long as I crop it to the correct size, of course. A side benefit, or annoyance depending on your point of view, is that if you right-click on the header and try to view the image, it shows you the overlay, rather than the background image (whatever it may be of).

Search Boxes

That thing was annoying! I decided to change up the sidebar a bit and remove the weird search box, moving it up into the menu area I created. I went through a lot of different ideas, but eventually settled on something basic… After all if someone wants to search for something, why bother styling it too extensively? It should be easy to spot and instantly recognizable as a search box. Throw in some zero border-widths, remove the default “search” from the search button, add a magnifying glass, and tada! A nifty little search box.


So I really like the new menu system wordpress offers. I mentioned the Sandbox theme in an earlier post, and while I’m still using it you do have to manually add the code to enable wordpress-managed menus in your theme. Easy to follow instructions can be found over on wordpress.org. I have been thinking how cool it would be to be able to enable a jquery-animated (or similar) type menu utilizing the automaticly generated code from wordpress, but haven’t had much luck. I sort of lost track of WordPress development for awhile, so for all I know this menu thing is relatively recent and no one has had a chance to go in and do such a thing.

Comments are closed.