
Today, I followed this tutorial from Chris Spooner’s blog.
I had a lot of fun doing it!
Retro futurist poster tutorial from blog.spoongraphics
PSD to WordPress for a catering business
A client came to me with a website design in Photoshop and I converted it to a WordPress theme.
I enjoyed creating the theme as it was quite challenging, and I learned a lot about creating child themes for the Hybrid framework.
This is my fifth Hybrid child theme.
The homepage has a featured post area, a latest posts area, all widgetized and easily editable from the admin panel.
There are different page layouts, 1,2 & 3 columns.
I used the widgets logic and query_posts combo extensively which allows a lot of control from the admin panel, which is one of my goals when creating a theme. I try to make everything dynamic and editable.
IE transparency and font rendering
While designing a website, I wanted to add some semi-transparent backgrounds using CSS rgba.
In this article, the author suggests using a PNG as a fallback for browsers that don’t support the rgba declaration.
Having read about Internet Explorer’s proprietary filters, I decided to use that instead, to avoid having to download another image.
I added the following declarations to the IE stylesheet with conditional comments:
.content, #primary {
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ebe7e7,endColorstr=#80ebe7e7);
}
.page-title, .singular-page-title {
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80146ea4,endColorstr=#80146ea4);
}
You can see that the result is not very pretty! The font doesn’t seem to render very well.
I suspected that the IE filters were the culprit, so I removed the declarations, and here is the result:

Much better!
Conclusion: I’ll use the PNG fallback method.
Have you experienced this issue? Is there a fix?
Leave your comments!
