A retail site's product-detail page is often the last thing a shopper sees before making a buying decision. So it is vital to ensure that this page is attractive, informative, and on brand.
In this quick episode of the "Building a Magento Theme Start to Finish" series, I will be updating the styles for the theme's product detail pages. This will include making font changes to the product title and descriptions and updating the tabbed product description section at the bottom of the main column.
Magento Theme Start to Finish, Part 18
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
Product Name
The first change that I want to make is to the font and color descriptions for the product name. As you may recall from earlier episodes, the Pine Theme started with the Modern Theme as its foundation, so we are essentially modifying existing cascading style sheet descriptions.
The style descriptions for the product name can be found at about line 731 of boxes.css, which is located at skin > frontend > default > pine > css. I want to make few changes here.
I will change the font color to match the green from the Pine Theme palette, transform the text to uppercase, and adjust it size.
Next, I will add a font-family description to call the Chunk Five Regular font that I embedded in episode 16 ("Category Page Image and Font") of this series.
.product-info-box .product-name { margin-bottom: .3em; color:#2AA92A; text-transform: uppercase; font-size: 3.5em; font-family: ChunkFiveRegular, Rockwell Extra Bold, serif; }
Available Status and Quick Overview
Next, I make a change to the font color for the availability status and the "Quick Overview" sections of the page. Because our body font is set to white—which we needed for the home page—we have to adjust the font color style attribute individually for some page sections, including this one.
The style declaration that I am going to change is at about line 730 of boxes.css, where I simply add a color description specifying the brown from the Pine Theme palette.
.product-info-box { float:right; width:363px; color:#372016;}
Image Zoom Tip
Next, I make a similar change to the image zoom tip, which is positioned under the main product image. This style description can be found at about line 713 in boxes.css.
.product-img-box { float:left; width:302px; color:#372016; }
More Font Changes
I have one more font change to make in the product description section at the bottom of the main column. The declaration that I am changing can be found at about line 315 of boxes.css.
.col-main .padder{ padding-right:20px; color:#372016; }
Style for the Tabbed-Product Description Section
With the font style on the page updated (for the most part), I am going to address the tabbed-product description section at the bottom of the main column.
I am going to replace the background image for the tabs. I do this by adding a new image to the images folder at skin > frontend > default > pine and modifying the style description for the tab class at about line 153 of boxes.css. I will also adjust the color for the bottom border at this same line of the style sheet.
.tabs { margin-bottom:15px; border-bottom:1px solid #372016; background: url(../images/tabs_bg.png) repeat-x 0 100% #372016; }
With my new, darker background image in place, I need to make a change to the tab's font color at roughly line 157 of boxes.css.
.tabs a { display:block; padding:6px 15px; color:#fff; }
My next style change comes just one line further down in the style sheet, where I change the background color for the anchor tag's hover state to the tan from the Pine Theme palette, and the font color for that same state, to Pine's brown.
.tabs a:hover { background-color:#F29A43; text-decoration:none; color:#372016; }
I also change the background color for and add a background image to the active tab. This style description should be on the very next line of boxes.css.
.tabs li.active a, .tabs li.active a:hover { background:url(../images/tabs_bg_g.png) repeat-x 0 100% #2AA92A; font-weight:bold; color:#fff; }
I need to change the right border description and remove the left border description for the tab's list items on about line 154 of boxes.css.
.tabs li { float:left; border-right:1px solid #372016; font-size:1.1em; line-height:1em; }
With this change, I have come to a good stopping place for this episode. In the next episode, I am going to add some JavaScript to this page to create smooth fading transitions for the tabs.
