Ecommerce Developer
 
 

Platforms & Shopping Carts

Building a Magento Theme Start to Finish, Part 23: User Account and Checkout Styles

By Armando Roggio on August 13, 2010 · with 1 Comment

 

With the Pine Theme rapidly nearing completion, it is time to finish the style descriptions for the user account sections and begin working on the checkout pages.

In the previous episode of this ongoing series, I made template changes to the accounts page, so the account pages already have the general Pine Theme look and feel. They just need some minor updates.

Magento Video

The Magento Theme Series, To Date

User Account Styles

shows account page at the start of the tutorial

To continue to develop the theme, I need to create a customer account in Magento. At each step of the way, I will be making minor updates to the page style descriptions.

Shows white header text

On the create account page, I see that I still have some white header text. I need to add a style description for this text, changing the color to black and making it easier to read.

Although the form–the parent element for these headers–has an id, there is no style description associated with it. So the simplest approach will be to add a new style description to boxes.css, which can be found at skin > frontend > default > pine > css in the Magento hierarchy. And remember "pine" represents the name of my theme.

With boxes.css open, I am reminded that I made a similar change in the previous episode for the "login-from," so I will add the "form-validate" id to that existing style.

#login-form , #form-validate {color: #000;}

shows the page with black header text

The Account Dashboard

After I complete the registration process, I am shown the Account Dashboard and a thank you message. From left to right on the page, there are several style changes I want to make, including updating the background color for the "Your Account" header, changing the color on the "Account Information" header, and updating the link color.

shows the account dashboard page

Using Firebug, I am able to identify that the style description controlling the "Your Account" background is on approximately line 1,152 of boxes.css. So I simply change the style's hex-color declaration to the blue from the Pine Theme's color palette.

.account-nav .head { border:none; background:#0F3FD0; }

Shows Your Accounts with blue background

Next, I also want to change the style description for the "Account Information" header. That description is located at line 195 of my version of boxes.css. But I am not going to make the change there, because I know that other pages use this style, too. Instead, I am going to include it at the end, and add the parent's class to ensure that I am not overwriting a style elsewhere. Notice the chain of class names: .account-box, .head-alt, and .title.

/*Additional Account Page Styles*/
.account-box .head-alt .title {color: #0F3FD0;}

Next, I add to this line, updating the color for the anchor tags on the page.

/*Additional Account Page Styles*/
.account-box .head-alt .title, .account-box a {color: #0F3FD0;}

Show the links in blue

With these style changes in place, I am fairly certain that the account pages are complete. To make sure, I click through all of the links on the left of dashboard, confirming that this section is done.

Checkout Styles

I place an item in the shopping cart and enter the checkout workflow. On the initial page of this workflow, I am going to need to make several changes to my CSS.

Shows the checkout page

First, I again update header colors—again heading to the bottom of boxes.css.

/*New Checkout Styles*/
#shopping-cart-table {color: #000;}

On this page, I will leave the links green (this is already the green from the Pine Theme palette). So I move on to the graphics on the lower left of the page.

shows a detail of the checkout graphic banners

To get at these graphics, I need to make adjustments to the content blocks that hold them. To determine which blocks I need to modify, I go to the Magento admin and turn on the block hints. To do this yourself, navigate to System > Configuration > Developer. Be sure to set the "Current Configuration Scope" to the website you're working on. Turn on block name hints and template path hints then save the configuration.

Refreshing the front end of the site should help me find the appropriate block.

shows block name hints

The block hint reads "MageCheckoutBlockCartCrosssell." So, after turning off the block name hints, I head to app > design > frontend > default > pine > template > checkout > cart and open crosssell.pthml.

On about line 59 of this template file, I find the following code. It calls both images in the event that the cross sell section is empty.

<div class="cross-sell-blank">
<p><img src="<?php echo $this->getSkinUrl('images/media/callout1.jpg');?>" alt=""/></p>
<p><img src="<?php echo $this->getSkinUrl('images/media/fpo_no_crosssell.gif');?>" alt=""/></p>
</div>
<?php endif; ?>

I am going to replace "callout1.jpg" with a new graphic. But given that it is in the JPG format, I will not handle it here. Rather, I will simply upload a replacement image. But I do want to get rid of "fponocrosssell.gif," since I don't like the GIF format. I am also going to make both of these images links.

Having created my graphics, I place the new "callout1.jpg" and "greenie.jpg" in the media folder at skin > frontend > default > pine > images > media.

I next update the aforementioned template file, adding my "greenie" image and including links to a product category and a particular product.

<div class="cross-sell-blank">
<p><a href="<?php echo $this->getUrl('blister-packs/kits.html'); ?>"><img src="<?php echo $this->getSkinUrl('images/media/callout1.jpg');?>" alt="You can never have too many Stikfas"/></a></p>
<p><a href="<?php echo $this->getUrl('blister-packs/assembled/grenadier.html'); ?>"><img src="<?php echo $this->getSkinUrl('images/media/greenie.jpg');?>" alt="Add a Green Stikfas and save 10 percent"/></a></p>
</div>

shows updated graphics

Note how I specified the URLs for my anchors. I am using some PHP here. The method getUrl() gives me the base URL for the site. The parameter is a string defining everything that comes after that base URL.

<?php echo $this->getUrl('blister-packs/assembled/grenadier.html'); ?>

I am going to stop this episode right here. In all likelihood, the next episode will be the last in this series, so I will need to finish up the checkout workflow.

Related Articles

1 Comment

Rss-sm