Rounding Corners

While writing up my portfolio entry on mobile templates, I got an idea of how I can round the corners on the viewport theme header images.  I changed the template around on the single page to inject the image url into a background style on the wrapper div instead of creating a full img tag.  Now that the wrapper displays the image I can us CSS3 to round the corners.  Presto!  If you are in Safari I also added a drop shadow.  Come on Firefox, get your CSS3 on and display that box shadow!

(Hours later…)

I’m so excited.  So when I made the changes I mentioned above this really screwed up my jQuery default image replace code.  I tried to fix it but I’m just not good enough to work around the new way I was inserting the image as an inline style attribute.  So I had to venture into the unknown.  Instead of testing to see if the image source was empty with jQuery, I tried testing it with PHP.  This is big time wilderness for me.  My first attempt crashed and burned.  A quick look on Google for PHP if/else statements got me pointed in the right direction.  My second attempt worked perfectly!  I’ve never wrote PHP and to have it work on the second try was awesome.  I’m learning so much from customizing this the Viewport WordPress theme.