Random Images, PNGs, Firefox, and Annoyance

Awhile back, I had this smart idea to use an overlay for my random headers. I’m sort of a fan of these things, I think it’s kind of fun to browse around a site and see the headers change. In the past they worked fine, a google search can find you a simple php image randomize script, but really any will do. What I’m going to talk about today is the problem I had which happened only in Firefox and drove me completely insane.

I decided the best way to implement a PNG overlay was to use a standard image and then change it’s background-image via css. So something like this:

Continue reading Random Images, PNGs, Firefox, and Annoyance→

Whiteboard Disappointment

So I spent some time working with Whiteboard looking for a replacement for Sandbox. If you couldn’t tell, I was not impressed. At first I was thrilled because it was lightweight, reminding me of why I like Sandbox… But then I started working with it. Man was I wrong!

I’ve decided that, instead of giving up Sandbox, I’ll simply update it for my own use. I’m planning to update it to include support for managing menus with WordPress, and even including an updated dropdown menu setup, etc… I actually have done this for quite a few projects, most recently for Starcraft.org where the menu is driven entirely by CSS, rather than javascript. It also fully supports menu management from the CMS, which is pretty fun.

While that is relatively easy to add, I’m also planning to update the default post layout, and integrate support for the 960 grid (fixed and fluid) — basically the idea would be to bring it inline with what I’m looking for, y’know? All while keeping it simple. I’ll probably also add in a css reset as well.

As an aside, I’m quite happy with the integration between vBulletin and WordPress provided by vBSSO. I highly recommend it if you’re looking for a secure, simple, and working method to link a wordpress powered site and your vbulletin.

Sandbox for WordPress

In the glorious past (’09) there was an awesome barebones theme for WordPress called Sandbox. I discovered and instantly fell in love. I’ve used it actually for all of my projects from then on, but as WordPress updated it became dated, I have to “update it” now to include basic support for menus and other things that are somewhat basic and standard with most themes nowadays.

Over the years I’ve tried to find a replacement, but I usually come across projects that seem to miss the entire point of a basic wordpress theme. Sandbox is nice because it’s easy to understand, and any markup added is for basic functionality and/or if it “makes sense”, as it were. However you look at WordPress’s new theme like TwentyTen and even someone like me is wondering “what the heck?”…

I will fully admit that perhaps it’s just me, and the way I “grew up” in regards to design but I prefer to make sure that pages load quickly, and to me having a theme weigh in over 100s of kb and a css file that’s massive seems to miss the entire point. I’m also not much of a fan of child themes. I understand the basic idea from my work with vBulletins, but for wordpress I’m often creating themes so I can “ship” them out to another wordpress or for a project, so having a “parent” theme and then a customized child theme just seems kind of silly.

Oh well, I’ve decided to try an offshoot of Sandbox, and a couple others and see how they work out, the current project I’m working on doesn’t require anything complicated so it’s the perfect chance to move away from Sandbox.

Why Internet Explorer?

Why must you be so cruel to me? I’ve never done anything to you! In fact I refused to switch from using you for years until I finally moved to Firefox.  I even defended you against those who didn’t understand how awesome you were. So… why do you hate me? Why must you taunt me? My design looks fine in every browser… But then I open it with you and it’s like a twisted joke of epic proportions.

I love designing websites, coding them especially. For some reason I just enjoy it a lot, but one of things I never really liked is fighting various browsers and the way they display things. Most often I come across this problem when working in a site that’s already active or a design that was coded by someone else. I don’t know how to explain it, but it always feels like I’m walking into someone else’s playground, and getting lost.

For anyone interested my most recent IE issue was related to it’s z-index mishandling. I cannot wait until I can switch to CSS3 completely… Sadly that day is not today.

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.

Menus

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.