An ecommerce site's home page is the central hub of activity. Even if a shopper arrives at a store from a search engine on a category page or a product-detail page, that shopper will almost certainly visit the home page at least once. So it's important that the home page offers options and is aesthetically pleasing.
In this episode, I am going to add a few product categories to Magento and style the home page's product-oriented navigation.
About This Magento Theme Series
This series of articles and videos was created 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 on a market place this series should help get you started.
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
Add a Few Products, Categories
At this point, I am going to add a few products, or more importantly, a few categories, to the Magento store. I need these categories to make up the top navigation for my theme. And I am going to toss a couple of products in while I am working in that section of the administration panel.
Before I installed Magento, I could have downloaded a number of sample products directly from the Magento site, but I chose not to for two reasons. First, I like to start theme development with Magento empty. For me, I find it easier to identify the templates and blocks when there is less information on page. Second, while the Magento sample products are helpful, there are a lot of them, and again, I like to work with a smaller number of products.
I also need to include products in a couple of categories so that I can get an idea of how my page will lay out. For the Pine Theme, I am going to use several products from Stikfas. I like to use these because the manufacturer has great product photography, which is helpful when I am developing a theme, and because the action figure kits are just cool.
Reposition The Product Navigation
With my categories created and anchored, I now have several links on the home page. But these links are not where I want them. I need them to be positioned lower in the header.
Delete
Right now, my theme logo is set to float: left; and had a significant amount of top padding. This is why my navigation seems to be too high in the header. To adjust it, I am going to remove the float from the logo and let the elements flow naturally. To do this, I need to change the style for the logo in the boxes.css file, which can be found at skin > frontend > default > pine > css. When I find this style it looks like this:
h1#logo { float:left; padding-top: 100px; }
Removing the float is all that I need to do.
Next, I am going to add a top margin to the product navigation, effectively moving it still lower in the header. I will also remove the left margin and remove a float. All of this work will be done in menu.css, which is located in the same folder as the boxes.css file I just changed. The new CSS looks like this.
#nav { margin-top:30px; margin-left:-5px; font-size:1.1em; }
Adding A Home Page Link
Now that I have my product navigation placed correctly, I want to add to it. My initial graphic design called for a home link—labeled "Pine"—at the front of this navigation. To add it, I need to adjust the top.phtml template file. This file can be found at app > design > frontend > default > pine > template > catalog > navigation. Locate the code that looks like this:
<ul id="nav">
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?>
</ul>
Insert the following code just after the opening ul tag.
<li ><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Pine') ?></a></li>
Adjusting the Basic List Style
Now, I am going to style the list items that make up my product navigation. I need to change the font color, remove the background image, increase the font size, and increase the padding. Most of these styles are described in the menu.css file.
The current font color for these items is set my #nav a. I will change these to the brown from the [Pine Theme palette] http://kuler.adobe.com/#themeID/723591). This same line of code also has the background image that I want to remove and the padding that I need to adjust. When I find the code it looks like this:
#nav a { float:left; background:url(../images/nav_top_level_arrow.gif) no-repeat 100% 50%; padding-right:11px; color:#444; font-weight:bold; }
When I was finished, it looked like this:
#nav a { float:left; color:#372016; font-weight:bold; }
I also made changes to the font color in two other descriptions, #nav li.over a,#nav a:hover and _ #nav li.active a_.
Next, I adjust the font size at #nav _ just above the section of _menu.css that is devoted to styles for all of the nav elements. When I find the code, it looks like this:
#nav { margin-top:15px; margin-left:15px; font-size:1.1em; }My modified CSS is here:
#nav { margin-top:30px; margin-left:-5px; font-size:12pt; }
Summing Up
This week, I continued to modify the CSS on the home page of my Pine Theme. In the next episode, I will style the active states of the product navigation links.
