Theme development requires a lot of attention to detail, including being careful to address just about every style or state that could show up on a page.
In this episode, I am going to update style descriptions for a couple of sections on the product detail page that might have otherwise been over looked. This is going to be a very short episode relative to the rest of series, but these little details are important too.
A Magento Theme Start to Finish, Part 21
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
- Part 20: Facebook's 'Like' Button
Style Descriptions for "Your Cart"
As I have been working on the product detail pages so far, I have done so with an empty shopping cart.
This would be fine except that when an item is loaded into the cart new content is introduced the page (in the form of a mini-cart in the sidebar). So I need to update this new content's style descriptions to reflect the Pine Theme.
The first style that I want to address is the mini-cart class cart-count description, which is located at approximately line 421 of boxes.css in skin > frontend > default > pine > css. I am going to make two changes, first, adding a color description (I will use the brown from the Pine Theme palette) and then removing the background description.
.mini-cart .cart-count { padding:8px; text-align:center; color:#372016;}
Product Comparisons
The next section of the sidebar, "Compare Products," can also introduce new content into the page. To style this section, I go back to the product category pages and add a couple of items to compare and note the changes.
I want to make a small change to the text by adding a style description for the ID compare-items to the base-mini section of boxes.css near line 1380.
.base-mini .content #compare-items a {text-transform: uppercase;}
Although, I have only made a couple of changes, I am going to end this episode here. The next section—exploring modal windows—is going to take some time so I want to give it its own episode or two.
