Debugging CSS Print Stylesheets without Killing Trees

Working on a print stylesheet has been a pain for me to the point where I often don’t even add print styles even to things that ought to have them. Partially this is because it so rarely comes up (either the page is meant to be printed or not… why complicate things) but partially because debugging is such a pain!

However, while working on a page where the content was the same for what should be displayed on the screen and what’s printed, all I needed to do was hide the navigation I realized I needed a solution. Instead of making my changes and printing a new copy for every major change I needed a way to preview my print style in the browser. Then Google provided the answer: they linked to this StackOverflow page where user “danblaker” with the suggestion provided by “ZMorek” solved the problem.

All you have to do is make sure the “print” stylesheet is the last one in your HTML <head>, remove the “media=’print'” attribute from it and add the following to the top of your print stylesheet to set the appropriate size for the document:


BODY {
width: 8.5in;
height:11in;
}

After that, you can see the results of applying the print stylesheet in your browser! You’ll still need to print at least once to make sure everything looks the same in the browser as on the page, but this saved at least a dozen sheets of paper and probably a half-hour of my time.

Remember that if you’re doing this on a production site all visitors will see the results of the print stylesheet so watch out!

Styling HTML Ordered Lists with CSS

Nicely styled OL on KeepAndCastle.Com
Nicely styled OL on KeepAndCastle.Com

As with the previous post, it’s the simple, small things that build your site’s “feel.” As with the HR in the previous post, ordered lists often end up being quite boring despite the range of numbering options. However, again, CSS3 offers us the ability to style these lists in a wide range of ways giving us full control over the lists’ feel.

Here I found Red Team Design‘s article “CSS3 Ordered List Styles” excellent and helpful. While I didn’t use any of the animations they built (they seemed a bit over the top to me, except for the small movement on the rectangle-shaped elements) I did find these examples a great starting point for creating my own styles.

The only issue I ran into that I have yet been able to solve is restarting the numbering on a multi-page list since their examples used CSS3’s counter-reset and counter-increment properties which I don’t fully understand yet.

Styling Horizontal Rules (HRs) in HTML

Beautiful CSS-Styled HTML HR with Code
Beautiful CSS-Styled HTML HR with Code

While the large things (colors, images, content, etc.) contribute to the “look” of your site, it’s the small things that make your site “feel” the way you want. When you’re looking at enhancing the “feel” of your site it’s often good to default styles applied by the users’ browser as much as possible. One place this can be done is with the HR element. Most websites use the horizontal rule in one way another as a way to easily divide content on the site. However, while it’s easy to change the color by setting the CSS “border-color” property, this leaves the same square, blocky look as the default HR. However, with widespread adoption of modern CSS properties, we can now use the “background-image” property to effectively modify the appearance of HRs, while allowing for excellent backwards-compatibility. To that end, I’ve discovered the “Simple Styles for <hr>’s” document at css-tricks.com to be very handy. These styles are beautiful, simple, and useful.

Magento 1.7: The Beginning

In spinning up a new store for keepandcastle.com I decided to go with Magento (the free community edition) because it seems to be an extremely flexible base to build on from a design perspective. I have worked with Zen Cart for about 6 years and enjoyed the speed at which you could spin up a store (you could have a fully running and functional store within 6 hours, if you had a payment processor ready to go) but have been frustrated by difficulties in setting up custom templates or adding functionality because either of these activities seemed to require (sometimes extensive) modifications of core files. Version 2.0 of Zen Cart has been promised for a few years and seems like it would address those issues. However, I wanted to try out a new platform so I chose Magento.

Installing Magento was easy enough, I need a database, a user for that database, and needed to allow write access to a few folders during the installation. It took about 15 minutes all told. This is where I diverged from the simple path, however, since I didn’t want our site to look like very other site out there. This meant creating a new design package and theme. In Zen Cart this was easy (if my theme doesn’t have a needed file, the default is used). In Magento the process took over half an hour and I ended up with absolutely no styling. Since my goal was to be able to style the site myself from the ground up, I celebrated!

I used this guide to walk through the basics, and I’ll post later on how easy it was to add my own styles and functionality. However, at the moment, I have an non-functioning but entirely unstyled site to work with. We’ll see how it goes from here!