The home page matters.
Thanks to search engines, just about any page of an ecommerce website can be a landing page. But no matter how a customer gets to a store, at some point that customer is likely to go to the home page, which means that while the home page may not be the first page a customer sees, it is a page that a customer will almost certainly see.
With this in mind, I have spent the first nine episodes in this series focused on developing the Pine Magento Theme's home page. We still have a couple of episodes to go before its completely finished, but we have hit the home page home stretch.
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
Adjusting the Content Slider
At the end of episode nine, I finished plumbing in a content slider using carousel.js. Now that I have that slider in place, I need to adjust the styles to get it aligned just where I want it.
I start by noticing that the div I created for my content slider is actually larger (960px) than the div it is nested in. I want to change this to make both of these the proper width. The style description that I need to change is located in boxes.css on about line 306. I can find boxes.css at skin > frontend > default > pine > css.
Specifically, I want to change the style for the class .col-main so that the width is no longer set.
Next, I want to change the height of the carousel-wrapper element. In the last episode, I set the height value for this element to 540px. That height was somewhat arbitrary, just to give me room to plumb in the slider. Now, I want to readjust the height to 405px, which should have it lining up nicely with other elements on the page and with my background image. The style description is found at the bottom of the boxes.css file. Next, I make a similar change to the style for #carousel-content .slide.
With the slider proportions properly established, I want to adjust the menu section. This section allows for users to manually click back and forth between the slides. I want these links aligned to the right, slightly larger, and painted, if you will, to match the Pine Theme palette.
I will add these styles at the bottom of the boxes.css file.
.menu {padding-top: 3px; text-align: right;}
.carousel-jumper {font-size: 2em; text-decoration: none; color:#F29A43;}
.carousel-jumper:hover { text-decoration: none; color:#9d0000;}
Home Page Merchandising
Next, I want to add some home page merchandising to the Pine Theme. Following the example of sites like REI.com and Newegg.com, I am going to add a "Deal of the Day" and "Special Offer" promotions just below the content slider.
I will start by creating some basic mark up and adding that mark up to the home page in the Magento administration panel: CMS > Manage Pages.
<div id="merchandising"> <ul> <li id="deal-1"><a href=""><img src="http://localhost/Theme-Dev-Pineskin/frontend/default/pine/images/deal-1.jpg" alt="deal-1" /></a></li> <li id="deal-2"><a href=""><img src=" http://localhost/Theme-Dev-Pineskin/frontend/default/pine/images/deal-2.jpg " alt="deal-2" /></a></li> <li d="deal-3"><a href=""><img src=" http://localhost/Theme-Dev-Pineskin/frontend/default/pine/images/deal-3.jpg " alt="deal-3" /></a></li> <li d="deal-4"><a href=""><img src=" http://localhost/Theme-Dev-Pineskin/frontend/default/pine/images/deal-4.jpg " alt="deal-4" /></a></li> </ul> </div>
With the mark up in place, I need to create my images and move them to the images folder at skin > frontend > default > pine > images.
The style for this new merchandising section is very straightforward. I simply add the following to the end of boxes.css:
/* Merchandising */
#merchandising ul {color: #000; margin: 30px 0; width: 960px;}
#merchandising ul li {display: inline; margin: 10px 23px 10px 0; padding:0;}
Positioning The Footer
I am going to start working on the page footer, so I need to locate the footer class in boxes.css at about line 435. The new footer description follows.
.footer { margin: 0 auto; color:#666; width: 960px; }
Now that the footer is in the correct spot, I need to adjust the content and add some style. That is where I'll start in the next episode.
