Ecommerce Developer
 
 

Platforms & Shopping Carts

Building a Magento Theme Start to Finish, Part Four: The CSS Work Begins

By Armando Roggio on January 29, 2010 · with 34 Comments

 

Varien recently announced that its popular Magento ecommerce platform has been downloaded more than 1.5 million times. This is a strong indication that web designers and developers have a lot of potential clients who are interested in Magento.

For the past few weeks, I have been building a Magento theme from start to finish, and for this fourth article, I've come to the CSS.

About This Magento Theme Series

Article one of this series dealt with the prolegomena—the discussion and decisions that had to be made before I could really start creating a new Magento theme. Article two dealt with how I manage pages; installing the Modern Theme, which I am using for the basis of my Pine Theme; avoiding some cookie-related issues; and changing to the forward-looking HTML 5 document type. In the third article, I made some changes to how I had implemented HTML 5, used the translate.csv file to change some labels, and checked to confirm my page was valid.

The Magento Theme Series, To Date

Isolating Graphics

I have a basic graphic design ready, so now I start by separating the layers of my Photoshop mock-up and creating web graphics.

Setting the Background Image

I am using a large, horizontally seamless background image. This image does use a bit more bandwidth, but it is a trade-off I am willing to make. One thing that I consider is the target audience. I am building the Pine Theme for an actual store that is already running. Analytics data shows that the majority of that store's customers have plenty of bandwidth to support a heavier background image.

Once the image is created, I need to place it in the Magento images folder. The path to the folder is skin > frontend > default > pine > images.

Next, I use the Firebug Firefox extension to identify which stylesheet is describing the background. In this case, I want reset.css, which I can find at skin > frontend > default > pine > css. While I have the CSS open, I am also going to change the font color to the dark brown color that is featured in the Pine Theme's palette, and I will update the copyright information to cover my changes. Here is what my CSS addition looks like.

body        { background:#fff url(../images/body_bg.jpg) 0 0 repeat-x; color:#372016; font:11px/1.55em arial, helvetica, sans-serif; text-align:center; }

The Pine Theme background is horizontally seamless.

Adjusting the Header's Dimensions

With my background image in place, it is clear that the Pine Theme is built on a different scale than the Modern Theme that I am using as a starting point. I need a lot more headroom, so to speak, so I need to make several adjustments to the margins around the header section. At the same time, I want some of my navigation (search, your account, and shopping cart, in particular) to be closer to the top of the browser's viewable area to accommodate an interactive div that I'll be adding to the design later.

First, I change the margin for the div with a class of "container." It is described in boxes.css, which is located in the same folder as the reset.css file, which I opened earlier. Here is my altered code.

.container      { width:960px; margin:10px auto 0 auto; text-align:left; }

Next, I am going to set a height for the div with a class of "header." It is described in boxes.css; in fact, it is on the very next line. You'll notice that I also add an !important flag to prevent some older browsers from squeezing this div.

.header         { margin-bottom:12px; z-index:999; text-align:left; height: 240px !important; }

Some Content Migration

I need to reposition some of the content on my page. The Modern Theme, which is my starting point, has the shopper greetings and search box in the main section of the page. The Pine Theme that I am building has these at the top of the header. So I need to make a move.

I could have made this change earlier, when we were adjusting the HTML templates, but I didn't notice it until the page design started to come together. Perhaps I should have done a little more planning in the first article.

I need to make several changes to the 2columns-right.phtml file found at app > design > frontend > default > pine > template > page. In this template, I am going to move the semantic <header> tag and the <div class="header"> tags in from the header.phtml file. Next, I am going to move the search-bar div (minus the breadcrumbs) and the toplinks-bar div to just above the line of PHP code calling the header.phtml template. The new code for the page looks like this.

<!DOCTYPE html>
<html lang="<?php echo $this->getLang() ?>">
<head>
    <?php echo $this->getChildHtml('head') ?>
</head>
<body <?php echo $this->getBodyClass()?'class="'.$this->getBodyClass().'"':'' ?>>
    <?php echo $this->getChildHtml('global_notices') ?>
    <div class="no-display">
        <h4>Skip to Store Area:</h4>
        <ul>
            <li><a href="#main"><?php echo $this->__('Skip to Main Content') ?></a></li>
            <li><a href="#col-right"><?php echo $this->__('Skip to Right Column') ?></a></li>
            <li><a href="#footer"><?php echo $this->__('Skip to Footer') ?></a></li>
        </ul>
    </div>
    <div class="container">
        
		<header>
		<div class="header">		
		<!--<div class="search-bar" id="search-expand">
                <?php echo $this->getChildHtml('topSearch') ?>
        </div>	-->	
		<div class="toplinks-bar">
            <?php  echo $this->getChildHtml('store_language') ?>
            <strong><?php echo $this->getLayout()->getBlock('header')->getWelcome() ?></strong>
                <?php echo $this->getChildHtml('topLinks') ?>
        </div>
		<?php echo $this->getChildHtml('header') ?>
		</div>
		</header>
		
        <div class="outline-creator">

            <div class="breadcrumb">
                <?php echo $this->getChildHtml('breadcrumbs') ?>
            </div>
            <div class="middle layout-2columns">
                <div class="col-right sidebar" id="col-right">
                    <?php echo $this->getChildHtml('right') ?>&nbsp;
                </div>
                <div class="col-main" id="main">
                    <?php echo $this->getChildHtml('global_messages') ?>
                    <?php echo $this->getChildHtml('content') ?>
                </div>
            </div>
        </div>
        <div class="footer" id="footer">
            <?php echo $this->getChildHtml('footer') ?>
        </div>
    </div>
    <?php echo $this->getChildHtml('before_body_end') ?>
    <?php echo $this->getAbsoluteFooter() ?>
</body>
</html>

You'll notice that I have commented out the search-bar div, because I don't really want it affecting the document flow. Later, I will be adding and removing this section dynamically with some JavaScript. So I still need it in the document. I also need to remove some code from the header.phtml file, which now reads like this:

	
        <h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>"/></a></h1>
        <img src="<?php echo $this->getSkinUrl('images/side_logo_promo.gif') ?>" alt="" class="side-logo-promo"/>
        <?php echo $this->getChildHtml('topMenu') ?>

While I have the header.phtml file open, I am going to eliminate the free shipping promo that is currently next to the logo. To eliminate this promo, I will delete the following line from this template file, too.

        <img src="<?php echo $this->getSkinUrl('images/side_logo_promo.gif') ?>" alt="" class="side-logo-promo"/>

Change the Top Links

The links at the top of my header need to be repositioned, restyled, and/or removed to match the graphic design for the Pine Theme.

First, I am going to remove two of the labels, "Log in" and "Checkout." These labels live in XML files, which, frankly, are not always easy to find.

The "Log in" label comes from customer.xml which is at add > design > frontend > default > pine > layout. If I don't want the "Log in" (or "Log out") label to appear, I need to comment out the following two sections. I am commenting them out and not removing them so that if a client or if someone that purchases the Pine Theme wants to put this label back in, he or she does not have to reinvent the XML.

<!--
Load this update on every page when customer is logged in
    <customer_logged_in>
        <reference name="top.links">
            <action method="addLink" translate="label title" module="customer"><label>Log Out</label><url helper="customer/getLogoutUrl"/><title>Log Out</title><prepare/><urlParams/><position>100</position></action>
        </reference>
    </customer_logged_in>

-->
<!--
Load this update on every page when customer is logged out
    <customer_logged_out>
        <reference name="top.links">
            <action method="addLink" translate="label title" module="customer"><label>Log In</label><url helper="customer/getLoginUrl"/><title>Log In</title><prepare/><urlParams/><position>100</position></action>
        </reference>
        <remove name="wishlist_sidebar"></remove>
        <remove name="reorder"></remove>
    </customer_logged_out>
-->

The "Checkout" label is in a separate XML file, checkout.xml, which is in the same folder as customer.xml. In this file, I need to comment out a single line of code.

        <!--<action method="addCheckoutLink"></action>-->

The Pine Theme adds a label for search to these top links. So I need to open catalogsearch.xml and add the following code inside of the <layout> tags.

    <default>
        <!-- Mage_Customer -->
        <reference name="top.links">
            <action method="addLink" translate="label title" module="customer"><label>Search</label><url helper="catalogsearch/getAdvancedSearchUrl"/><title>Search</title><prepare/><urlParams/><position>5</position></action>
        </reference>
    </default>
<pre>

This code adds the search link, points that link to the advanced search page (`<url helper="catalogsearch/getAdvancedSearchUrl"/>`), and positions the link between the welcome message and the "Your Account" label.

###Style the Top Links

Next, I locate the _toplinks-bar_ class in _boxes.css_. Firebug will provide me with the line number so that I don't have to browse through 1,300-plus lines of CSS code. I change the font color, eliminate some top padding, increase the font size, transform the text to upper case, and add the Rockwell font family, which is somewhat web safe.

<pre>
.toplinks-bar           { color:#9d0000; padding: 0 13px; text-align:right; font-size: 18pt; text-transform: uppercase; font-family: Rockwell, Georgia, Serif; }

The welcome message should now be larger, but the links did not change, so I need to go back to the CSS and edit .toplinks-bar .top-links a and .toplinks-bar .top-links a:hover. The adjusted CSS will look like this.

.toplinks-bar .top-links a 	   {color: #960000;}
.toplinks-bar .top-links a:hover      { color:#372016; }

I also want to remove the separator image from the next line in boxes.css.

Changing the Logo

The Pine home page is coming along. Now, I want to replace the Magento logo with the Pine Theme logo. I need to save the logo file to the Magento images folder. As mentioned above, the path to this folder is skin > frontend > default > pine > images. I am actually going to save two versions of the logo: a PNG and a GIF.

The Pine Theme Logo With the logo saved, I go to the Magento admin panel, navigate to system > design > header, and change the "Logo Image Alt" to images/logo.png.

My new logo is being rendered, but it is too high on the page, so I will add some padding by adjusting _ h1#logo _ in boxes.css.

h1#logo   { float:left; padding-top: 100px; }

If this theme's build goes like every other Magento theme I've built, I will likely make some minor changes to the logo's position or other CSS as we go, but for now, it is in place.

Summing Up

I have made some real progress on the theme design. There is, of course, still a lot to do. In the next, article, I hope to finish most of the home page CSS.

Related Articles

34 Comments

Rss-sm