I was recently tasked with creating a WordPress plugin that allowed the admins to create coupons that could easily be printed. The original system relied on the use of an image library to generate images for each of the coupons. I found that this didn't allow for much flexibility and was difficult to maintain. My preference was to have the coupons displayed as HTML so that they could be styled using CSS.

The problem I immediately ran into was this: CSS background colours don't print. I found a pretty good workaround, though, that isn't too difficult to implement.

I wanted to make it as flexible as possible, so that meant avoiding the use of images for the backgrounds.

So the following code wouldn't look very nice at all when printed:

What I did discover, however, was that CSS borders printed just fine. So as a little cheat I just created DIVs that float underneath and have massive coloured borders on them. Sure enough, it worked like a charm!

Give it a test and let me know what you think in the comments below:

MASSIVE WIDGET SALE

All our widgets are on sale now! Get 20% off your order with this coupon.

April 30/2012