Ecommerce Developer
 
 

Platforms & Shopping Carts

Building a Magento Theme Start to Finish, Part Eight: The Boring Middle

By Armando Roggio on March 09, 2010 · with 1 Comment

 

Starting a project is fun, exciting, and even invigorating. Ending projects provides a sense of completion and satisfaction at a job done well. But the middle parts can be painful and even a little boring.

For the third consecutive week, this "Magento Theme Series" must focus on the boring middle part—at least where the theme home page is concerned—but please stay with me as we continue to advance this project.

About This Magento Theme Series

For the past several weeks, I have been walking you through the creation of an actual Magento Theme. The goal is to help you become familiar with how Magento works—its environment, if you will—and how to work with it.

In this episode, I am going to continue fiddling with the product category navigation.

The Magento Theme Series, To Date

An Issue of Borders and Margins

While I was working on the rounded corners of the tabs in the product category navigation in the past couple of episodes, I noticed a wiggle when I hovered over some of the labels. This wiggle indicates that some element was changing size or position. In this particular case,it is a margin and a 1px border that was being added. To get rid of this wiggle, I can either add a transparent border to other list items, or remove the border from the active and over classes. And, of course, fix the margins.

For the Pine Theme, I will solve the problem by adding a border to #nav li in menu.css which is located at skin > frontend > default > pine > css. 

 border:1px solid transparent;

More Curved Corners

My wiggle fixed, I now have a finished hover effect for the over class, but I would like to get a similar effect when shoppers hover over other labels, which don't have child elements. Making this change for Firefox, Camino, Chrome, and Safari is a snap.

I head back to menu.css, locate the following line, which is around line 39 in my copy of the file:

#nav li.over, #nav li.active { border:1px solid #372016; border-radius: 20px 20px 0px 0px; /* CSS 3 */ -moz-border-radius: 20px 20px 0px 0px; /* Firefox */   -icab-border-radius: 20px 20px 0px 0px; /* iCab */  -khtml-border-radius: 20px 20px 0px 0px; /* Konqueror */  -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; /* Safari */ background:#372016; }

To this line, add #nav li.level0:hover just after #nav li.active. Be sure to separate this new description with a comma.

#nav li.over, #nav li.active, #nav li.level0:hover { border:1px solid #372016; border-radius: 20px 20px 0px 0px; /* CSS 3 */ -moz-border-radius: 20px 20px 0px 0px; /* Firefox */   -icab-border-radius: 20px 20px 0px 0px; /* iCab */  -khtml-border-radius: 20px 20px 0px 0px; /* Konqueror */  -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; /* Safari */ background:#372016; }

Next, I need to add an additional style to change the color of the label text. This style can be added on the very next line of the file.

#nav li.level0:hover a {color:#F29A43;}

[SCREEN CAPTURE ONE]

Add a Fix for IE

Unfortunately, my solution does not work in Microsoft's Internet Explorer (IE), so taking a cue from the last episode, I will again implement a hack so that CurvyCorners will work with my new style.

To start, I need to remove the style descriptions for #nav li.level0:hover when a visitor is using IE. Otherwise, a visitor using IE would see the dark brown tabs as squares. To remove or counteract this style, I go to iestyle.css, which is in the same folder as menu.css. In the last episode, I added a style for #nav li.over. Now, I will just add #nav li.level0:hover to that same style description.

#nav li.over, #nav li.level0:hover {background: transparent; border: 1px solid transparent; }

With my style fixed for IE, I have some JavaScript work to do. Which is where I will pick it up next time.

Related Articles

1 Comment

Rss-sm