Product category pages are often one of the most important landing pages on an ecommerce site. They attract search engines and are almost always an important page for human shoppers.
In this ongoing series, I have been developing a Magento theme, and after 15 episodes it is time to style the main content section of the theme's product category pages. I will focus first on adding a category image and adjusting the font for the category page header text.
Magento Theme Start to Finish, Part 16
The Magento Theme Series, To Date
- Part One: Prolegomena
- Part Two: Page Planning, Templates, & HTML 5
- Part Three: HTML Validation and "Your" Labels
- Part Four: The CSS Work Begins
- Part Five: The Home Page CSS Continues
- Part Six: Product Navigation and CSS Rounded Corners
- Part Seven: More Rounded Corners
- Part Eight: The Boring Middle
- Part Nine: A Content Slider
- Part Ten: The Home Page Home Stretch
- Part Eleven: The Footer
- Part Twelve: The Search Form
- Part 13: Turning the Page
- Part 14: Facing the Horror
- Part 15: Style and Graphics for the Category Page Sidebar
- Part 16: Category Page Image and Font
- Part 17: The Category Page Grid
- Part 18: CSS for the Product Detail Page
- Part 19: Smooth Sliding Tabs
Add a Category Image
My first task in this episode is to add a category image. I created my image, a PNG file, in Adobe Photoshop and then uploaded it via the Magento admin. To do the same, navigate to admin > catalog > manage categories (be sure you are logged in). Under the general information tab, you should see an option for an image.
Simply upload your image and Magento will place it on page for you. In the example, my category image is 690 pixels wide and 250 pixels high. The "live" area of the image is approximately 10 pixels narrower to allow for the shadow effect.
In the Magento Modern Theme, which my Pine Theme is based on, the size of the category page image is controlled in the boxes.css style sheet. The size specified is 705 pixels, so I need to head to skin > frontend > default > pine > css to find the file and then aim for about line 203 where I will change the style declaration as follows.
.category-image { display:block; width:690px; }
@Font-Face for the Category Header
With my category image in place, I focus my attention on the content header text. The text, which in my example reads "Blister Packs," is marked up as an H2 tag and styled on about line 198 of boxes.css. Since this header is created dynamically by Magento based on admin-side input, I don't want to use an image. But I also don't want to live with plain old Arial font either, so I am going to use CSS' @font-face rule to embed a different font.
The @font-face rule works across browsers and is very easy to implement. I start by getting a font from Font Squirrel. The kit I chose was ChunkFive because it looks great in my theme and its license allows for commercial use. Thanks to The League of Moveable Type, the font's creator.
With the @font-face kit downloaded and extracted, I need to find some room for it in my Pine Theme, so I create a "font" folder at skin > frontend > default > pine. I place four versions of the font—.eot, .svg, .ttf, and .woff—in my freshly minted folder and turn my attention back to boxes.css.
At the top of boxes.css, I add the following style description to embed the ChunkFive font.
@font-face {
font-family: 'ChunkFiveRegular';
src: url('../font/Chunkfive-webfont.eot');
src: local('?'), url('../font/Chunkfive-webfont.woff') format('woff'), url('../font/Chunkfive-webfont.ttf') format('truetype'), url('../font/Chunkfive-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}Next, I specify my font in the H2's style declaration, which has moved about nine lines down in boxes.css.
.category-head h2 { padding:3px 0; color:#5b9400; font-family: ChunkFiveRegular, Rockwell Extra Bold, serif; font-size:1.6em; }
With my embedded font included and working well, I make a few other changes. I replace the font color with the green from the Pine Theme palette; adjust the font size, add a description for line-height to line it up with the left column, and transform the text to uppercase.
.category-head h2 {padding:0; color:#2AA92A; font-family: ChunkFiveRegular, Rockwell Extra Bold, serif;
font-size:4em; line-height: .5em; text-transform: uppercase;}
With a category image in place and an embedded font, I am ready to call it an episode.
