When we think of online stores, we natural think first of the home page, product category page, and product detail pages. But every site also has lots of auxiliary pages for things like customer accounts.
In this episode, I am going to begin styling some of my Magento theme's account pages.
If you have been following the series, you know that I had planned to make a couple more changes to the product detail page, but I decided to table those changes indefinitely after I learned that the JavaScript solution I wanted to use was no longer available. Moving on to the account pages brings me very close to the completion of the theme.
Magento Video
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
- Part 20: Facebook's 'Like' Button
- Part 21: Details, Details, Details
Finding the Template
For the Pine Theme, I started my design on the home page, which uses a template file called, 2columns-right.phtml. When I switched to the product category page, I had to modify its template, 2columns-left.phtml, to match the home pages header, links, and similar.
When I move to the account pages, I again find that my template needs to be adjusted. As a reminder, below is a screen capture of the home page.
Next is a screen capture of the "create an account" page when I load it in the browser.
You can see that it is something of a wreck. But I will have it shaped up in no time. I start that process by navigating to the Magento backend. I want to learn which template is controlling this account page. Under System > Configuration > Developer > Debug, I find an option to turn Template Path Hints on. This option is only available if my current configuration scope is set to the main website.
Next, I return to the frontend and reload the page to learn which template is being used on the page. Turns out that it is 1column.phtml.
Modifying the Template
Now that I have identified the proper template, I turn off the Template Path Hints feature, and turn my attention to updating 1column.phtml, which in my Magento install can be found at app > design > frontend > default > pine > template > page, wherein "pine" is the name of the theme.
I want to open this template and open one of the templates that I have already updated for the Pine Theme, for example 2columns-left.phtml.
Changing the Header
My first change will be at about line 47 of 1column.phtml. The code in question looks like this.
<?php echo $this->getChildHtml('header') ?>
In context, it will be directly below the code that creates a div called "container."
<div class="container">
<?php echo $this->getChildHtml('header') ?>
<div class="outline-creator">
I want to replace this code with the header section from 2columns-left.phtml
<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') ?>
<?php echo $this->getLayout()->getBlock('header')->getWelcome() ?>
<?php echo $this->getChildHtml('topLinks') ?>
</div>
<?php echo $this->getChildHtml('header') ?>
</div>
</header>
After I make this change, my account page is immediately looking more like the rest of the theme.
I next need to remove a few more lines of code from 1column.phtml. The following can be found inside of the "outline-creator" div and is redundant given the changes to the header above.
<div class="toplinks-bar">
<?php echo $this->getChildHtml('store_language') ?>
<?php echo $this->getLayout()->getBlock('header')->getWelcome()?>
<?php echo $this->getChildHtml('topLinks') ?>
</div>
<div class="search-bar">
<?php echo $this->getChildHtml('breadcrumbs') ?>
<?php echo $this->getChildHtml('topSearch') ?>
</div>
Adding the White div
On all of my theme's pages except the home page, I have a "white" div that acts as the main section of the page. I need to add this to 1column.phtml just after my header and just before the div called "outline-creator."
<div class="white-div">
I will place the closing tag for this new div after the closing tag for the "outline-creator" div.
Updating My Font Color
Adding the "white" div made some of my font, which was also white, impossible to read, so I need to make a style change before I move on. To make this change, I head to boxes.css at skin > frontend > default > pine > css.
I am going to be adding a style description that doesn't exist yet, so I will just go to the bottom of the file. Here is what I added.
/*Login form style updates*/
#login-form {color: #000;}
Repositioning The Footer
I have one final change to make in the 1column.phtml template. I need to reposition the footer. Here is the code I want to move.
<div class="footer" id="footer">
<?php echo $this->getChildHtml('footer') ?>
</div>
I need it be positioned after the closing tag for the "container" div. Making this change fixes a problem with the newsletter sign up.
Here is the newsletter sign up before the footer is moved.
And here it is after the change.
That is all for this episode.
