Ecommerce Developer
 
 

Platforms & Shopping Carts

Building a Magento Theme Start to Finish, Part 24: The Final Episode

By Armando Roggio on August 18, 2010 · with 10 Comments

 

The Pine Theme will be complete with a few more changes to the checkout pages.

For the past few months, I have been describing the process of building a Magento theme. With just a few more changes to the checkout pages that theme will be complete.

Magento Video

The Magento Theme Series, To Date

The Cart Collateral Block

In my version of Magento, the functional part of the initial checkout page is contained in a div, with the class of "cart-collateral-black." In the Modern Theme, on which the Pine Theme is based, this block contains a unique background that looks like a box with an arrow attached.

images show initial background

While I think this is a nice and communicative graphic, it doesn't really fit the Pine Theme. So my first action is to remove it. It is divided into two parts. The first is a background color description for "cart-collateral" at about line 845 of boxes.css, which can be found at skin > frontend > default > pine > css.

Here is the code before the change.

.cart-collateral                    { background:#e6f7d7; padding:10px 12px; }

And now after my change.

.cart-collateral                    { padding:10px 12px; }

image shows white background

On about line 869 of boxes.css, I will remove a reference to a background image (the arrow). Once again, here is the style description before I make my change.

.cart-totals    { padding:12px 0;  background:url(../images/cart_totals_bg.gif) no-repeat; text-align:right; }

And now after I have made a change.

.cart-totals    { padding:12px 0; text-align:right; }

images shows that the graphic has been removed

Update Font Color Descriptions

I want to make a few changes to the font color descriptions for this page. So I determine that the header "Discount Codes" is described on about line 847 of boxes.css. I simply need to change the color to the green from the Pine Theme palette.

Here is the updated description.

.cart-collateral h4   { float:left; color:#2AA92A; font-size:1.3em; font-weight:normal; }

shows green font

Next, I want to change the font color for the text that reads "Grand Total." This style description is located at about line 872 of boxes.css. The particular style definition is for ".cart-tools tfoot td."

Here is the declaration after I have changed the font color to the red from the Pine Theme palette.

.cart-totals tfoot td         { color:#9d0000; font-size:1.3em; }

shows that the font is now red

There is also a white-colored font that I need to update. This font does not yet have a style description that is unique to it, so I am going to add the following. In my copy of boxes.css, I inserted it at line 888, which is at the end of where the checkout styles reside.

.cart-shipping-block p  {color: #372016;}

shows that text is now visiable

Proceed Graphic

There is a relatively clean graphic that is used as the "Proceed to Checkout" button. I want to updated this graphic to match the Pine Theme. I could simply create a new graphic with the same name, but this image is a GIF, and I try to avoid using GIFs in favor of JPG or PNG graphics. So I will need to both create a replacement and modify one of the blocks in Magento.

After creating the button image, I place it in the images folder at skin > frontend > default > pine > images.

To learn which block I should modify, I go to the Magento administration panel and navigate to System > Configuration > Developer > Debug. I am careful to set the "Current Configuration Scope" to the website I am working on, which is probably "Main Website." Next, I turn on Template Path Hints and Add Block Names to Hints and save the configuration.

shows block and template hints

Returning to the frontend, I learn that the block I need to modify is "MageCheckoutBlockOnepageLink." I can find this block in the Magento hierarchy at app > design > frontend > default > pine > template > checkout > onpage > link.phtml.

I open this block in my code editor and locate the following lines.

<a href="<?php echo $this->getCheckoutUrl()?>"><img src="<?php echo $this->getSkinUrl('images/btn_proceed_to_checkout.gif');?>" alt="<?php echo Mage::helper('checkout')->__('Proceed to Checkout');?>" /></a>

Now I change the image URL to match my new graphic.

<a href="<?php echo $this->getCheckoutUrl()?>"><img src="<?php echo $this->getSkinUrl('images/btn-go-to-checkout.png');?>" alt="<?php echo Mage::helper('checkout')->__('Go To Checkout');?>" /></a>

I turn off my block hints and reload the frontend.

shows new button

The One-Page Checkout

Next, I click the button that I just updated and land on the actual one-page checkout form, where I find there is a background color that I need to change.

shows initial page

The style description that I need to adjust is on about line 927 of boxes.css. Here is what it looks like when I find it.

.one-page-checkout .active .head { border:1px solid #e46b00; background:#e46b00; cursor:default; }

I change both the border color and the background color to the blue from the Pine Theme palette.

.one-page-checkout .active .head { border:1px solid #0F3FD0; background:#0F3FD0; cursor:default; }

shows updated blue background

You will notice that at the end of the "Email Address" and "Password" field labels on the right-hand side of the page there are asterisks. These asterisks are currently orange. I want them to be blue, so I make a change at about line 112 of boxes.css. The updated code follows.

.validation-advice, .required { color:#0F3FD0; }

This change also alters the style for the "Required Fields" label below and to the right.

shows font in blue

More Font Adjustments

As I step through the checkout process, I find that some of the text on the left of the page is white. I need to change this to the brown from the Pine Theme palette. The style description to do this can be added at about line 940 of the boxes.css file.

Here is the code as I find it.

.one-page-checkout-progress .content { background:none; }

And here is the code with my minor change.

.one-page-checkout-progress .content { background:none; color:#372016; }

Place Order Button

Continuing through the checkout process. I encounter the "Place Order" button, which I need to update.

To make the change, I take steps similar to what I did above: Adding a new graphic to the images folder, locating the proper block to amend, and updating the frontend to see the change.

In this case, the template block I needed to change was in review.phtml at app > design > frontend > default > pine > template > checkout > onepage.

shows place order button

Summing Up

With this final change the Pine Theme is complete. I hope you have enjoyed this series.

Related Articles

10 Comments

Rss-sm