Adding style to the product category page's useful sidebar is next on my list of to-dos in this ongoing Magento theme series.
In the last episode, we faced the horror of moving from one template file to the next. This week, we will continue to improve the look and feel of the our product category page.
I also want to let you know that this video and article will focus mostly on CSS and graphics work, so if you feel comfortable in these areas, please feel free to skip ahead as episodes become available.
Magento Theme Start to Finish, Part 15
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
Putting the "GO" Back in Newsletter
I am still making some changes to get this product category page to layout properly. I noticed that the newsletter form had moved slightly on this page, and I want to try to understand why.
The problem has to do with where the footer div is located in the .phtml template governing the page. On the home page, the template (2columns-right.phtml) has the footer section outside of the main page container. But in 2columns-left.phtml, which is the template for this product category page, the footer resides within the container. As such, the container's text-align: left; style is being applied to the footer section.
To solve this problem, I simply moved the footer down further in the template, which is located at app > design > frontend > default > pine > template > page, where "pine" is the specific name of the theme you're building.
Squaring Things Off
In the last episode, I had deliberated about adding a border of some kind to the "white-div" which sets off the product section on this page. After more thought, I decided that I did need some sort of an edge delineator, but I used a new background image with subtle shading on the left and right sides rather than a border.
To do that, I navigated to boxes.css at skin > frontend > default > pine > css. The style declarations for the "white-div" are on or near line 1376 (line numbers can and do vary from one implementation to the next), where I added a link to the image, which I had placed in the Pine Theme's image folder.
Here is the changed CSS description.
.white-div {position: relative; top: -1px; background: #fff url("../images/white-div-back.jpg") no-repeat; padding: 20px 0;}
Updated the "Shop By" Graphic
Next, I want to update the "Shop By" graphic at the top of the theme's layered and faceted navigation. The image is called "layerednavhead_bg.gif," and is included as a background image. I don't use the .gif format much, so my new image will be a .png.
My image will be larger, and I am also going to incorporate the blue, #0F3FD0, from the Pine Theme color palette. To add the new image, I upload it to the theme and head to boxes.css line 605 (or so) to adjust the style sheet. I also adjust the height of the div containing this image to compensate for my taller graphic.
.layered-nav .head {
margin-bottom:6px;
background:url(../images/layered_nav_head_bg.png) no-repeat;
height:22px;
}
Frankly, the graphic looks a little odd with the green headers below it, but those are next on my list of changes.
Changing the Navigation Headers
The headers like "Shopping Options" and "Your Cart" are managed with an <h4> that is easily adjusted in boxes.css at about line 611 and again at about line 414.
.layered-nav h4 {
margin:0;
padding:2px 10px;
background:#0F3FD0;
color:#fff;
font-size:1.1em;
}
.mini-cart .head { background:#0F3FD0; }
The layered navigation has yet another kind of header that I need to address. These are "base-mini" headers, and in addition to changing their background colors to the theme's blue, I also need to change the font color for their associated <h4> tags.
The background color is managed by .basemini .head_ at about line 383 in boxes.css.
.base-mini .head { border-bottom:1px solid #ddd; background-color:#0F3FD0; padding:2px 10px; }
The font color can be adjusted just a couple of lines further down the style sheet.
.base-mini .head h4 { margin:0; font-size:1.1em; color:#fff; text-transform:uppercase; }
Adjust Color for Some Layer Titles
Next, I want to update the font color for some of the layer titles in the navigation. Because this left sidebar is comprised of several blocks of content, I need to make more than one change, but it is not difficult. In fact, I can take care of everything by adding two short lines of style to the end of the boxes.css file.
.narrow-by {color:#372016;}
.base-mini .content {color:#372016;}
Adjusting the Sidebar's Backgrounds and Borders
The sidebar is looking really good. I just want to make a few more changes.
I will remove the grayish backgrounds for each section at about line 359 of boxes.css.
.sidebar .content { padding:8px 10px;}
Then I will make a change to the border description for ".layered-nav .narrow-by dd", which you should find at about line 620 of boxes.css.
.layered-nav .narrow-by dd { padding:0 8px 8px 8px; border-bottom:1px dotted #372016; }
Moving just a few more lines down in the style sheet, I change the color declaration for ".layered-nav .narrow-by a" and ".layered-nav .narrow-by a:hover" to match the blue from the Pine Theme palette.
.layered-nav .narrow-by a {color: #372016;}
.layered-nav .narrow-by a:hover { color:#0F3FD0; }
Continuing my way down the left column of the page, I next address the border styles for the ".mini-base" blocks on line 382, or there about, in boxes.css. Just remove the border description altogether.
.base-mini { line-height:1.3em; }
Finally, I change the style description for ".mini-base h5" wherein I remove a text-transform and ".sidebar .actions" where I change a border color. These sections can be found at about line 387 and 400 of boxes.css, respectively.
.base-mini h5 { margin:0; font-size:10px; font-weight:normal; text-align:left; }
.sidebar .actions { margin-top:0; border-top:1px dotted #372016; padding-top:5px; }
So I now have a left sidebar worthy of the Pine Theme and a natural place to stop this episode. Next time, I will address the main content section on this product category page.
