Ecommerce Developer
 
 

Platforms & Shopping Carts

Building a Magento Theme Start to Finish, Part Six: Product Navigation and CSS Rounded Corners

By Armando Roggio on February 12, 2010 · with 13 Comments

 

Magento is an extremely flexible ecommerce platform that provides excellent features in a way that is easy to manipulate and style.

In this episode, I will continue to work on the product navigation, focusing on its active states and adding simple rounded corners with CSS.

About This Magento Theme Series

I created this series of articles and videos to help you become more familiar with Magento theme creation. Whether you are building a theme for a client or planning to sell Magento themes, this series should help get you started. In many ways, its primary focus is to help you become familiar with Magento and how to maneuver through its model, view, control (MVC) structure. I also demonstrate general web design and development techniques in this context.

The Magento Theme Series, To Date

Three Different Links

As we start this week, I am going to focus on the product navigation. This navigation is organized as an unordered list, and it has three types, if you will, of links. First, I have the home page link, which I have labeled, "Pine." As I start, this link does not have an ID or a class. Second, I have a dynamically-generated li that includes some inline JavaScript for a fly out menu. I am not a big fan of inline JavaScript, but I am also not going to change it. Rather I just need to understand how it works. And third, I have some dynamically-generated list items that do not include a fly out menu.

Screen capture showing the links in the Pine Theme

Ultimately, I want all three of these link types to behave in generally the same way. But there are going to be some differences. For example, I want my "Pine" link to be active by default so that when a user visits the home page, this link has a different background treatment than the other links in the list.

Making the "Pine" Link Active

I'll start by making the "Pine" link active. The Modern Theme, which you will recall is what I am using as the basis for my theme, already adds a class name to the dynamically generated links on the page when those links represent the current page. This class name allows me to style the links separately from the other links in the navigation. For example, I can use a different background color to designate which page a user is on. To get a similar effect for my "Pine" link, I am going to use some suggested code from the Magento Wiki.

 <?php $_anyActive = false; foreach ($this->getStoreCategories() as $_category) { $_anyActive = $_anyActive || $this->isCategoryActive($_category); } ?>
        <li class="<?php echo !$_anyActive ? 'active' : '' ?>"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>

To use this code, I need to open top.phtml. This file is located in app > design > frontend > default > pine > template > catalog > navigation. And remember "pine" is the name of my theme, you'll need to use the name of your theme where "pine" appears in the path.

In the last episode, I added the home page link using the following code, which I placed just after the opening ul tag in top.phtml.

<li ><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Pine') ?></a></li>

To this code, I will make two changes. First, just before my home page link and after the opening ul, I will add:

<?php $_anyActive = false; foreach ($this->getStoreCategories() as $_category) { $_anyActive = $_anyActive || $this->isCategoryActive($_category); } ?>

Next, I will insert the following into the li tag for my home page link.

class="<?php echo !$_anyActive ? 'active' : '' ?>"

Now my top.phtml template file looks like this:

<ul id="nav">
        <?php $_anyActive = false; foreach ($this->getStoreCategories() as $_category) { $_anyActive = $_anyActive || $this->isCategoryActive($_category); } ?>
        <li class="<?php echo !$_anyActive ? 'active' : '' ?>" ><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Pine') ?></a></li>		
        <?php foreach ($this->getStoreCategories() as $_category): ?>
            <?php echo $this->drawItem($_category) ?>
        <?php endforeach ?>
   </ul>

When I save top.html and refresh Pine in Firefox, I should see that my home page link—labeled "Pine"—will have a gray box around it. This is the standard style for active links from the Modern Theme.

Screen captures shows the box around the link

Basic Active Link Style

Next, I need to change the style for my active link/home page link. I use FireBug to identify the styles that describe active links in my Pine Theme.

First, I navigate to menu.css at skin > frontend > default > pine > css and make a change to the style for #nav, adjusting the margin-top to 25px and the margin-left to 0px. This is not the first time that I have adjusted this style. I might have planned a little better and avoided this, but from experience, I know that I often tweak the style several times during the development process.

Next, I am going to change the padding for #nav li so that the element's top padding is 10px; its bottom padding is 16px; and the left and right padding is set to 25px each. I also adjust the margin in this description. Some of these pixel dimensions are to compensate for the differences in how Microsoft’s Internet Explorer (IE) browser and better browsers like Firefox or Chrome measure element margins and padding.

#nav li { float:left; margin:1px 1px 11px; padding:10px 25px 16px; }

So far, the changes that I've made have affected all of the links in this navigation section, repositioning them once again. Now I want to focus on the home page link, which, thanks to the PHP I added above, has a class of active.

I am going to locate #nav li.active in _menu.css and change the border color to #372016, which is the brown from the Pine Theme color palette. I will also change the background color to this same brown. The resulting style looks like this:

#nav li.over,
#nav li.active { margin:0 7px 10px 0; border:1px solid #372016; background:#372016; }

I will also add a style to change my font color to the tan from the Pine palette. In fact, I am going to be changing two styles.

#nav li.over a,#nav li.active a { color:# F29A43; }

At this point, the home page link is wrapped in a brown-colored box, and the label text is tan.

Screen capture showing the new font color

Rounded Corners

My Pine Theme graphic design calls for my active tabs to have rounded corners. To do this, I am going to use CSS rather than an image hack. You can see a tutorial I wrote for our companion publication, Practical Ecommerce, on this topic for more details.

I will be adding these borders to #nav li.over and _#nav li.active _, which we edited above.

#nav li.over, #nav li.active { 
margin:0 7px 10px 0; 
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  and Chrome*/
 background:#372016; }

Use a modern browser like Firefox or Chrome, and you should now see rounded corners at the top left and top right of the active tab. Do notice that slightly different syntax for Safari and Chrome, which will be important in the next episode.

Image show the rounded corners

Summing Up

In this episode, I focused on the navigation for our home page link. And surprisingly, there is still a lot to do. In the next episode, I will address the fact that IE and Opera don't support the rounded corner solution I've implemented.

Related Articles

Category: Platforms & Shopping Carts | Tags: Magento, video, Classes and Instruction, CSS

13 Comments

Rss-sm