Ecommerce Developer
 
 

Platforms & Shopping Carts

Building a Magento Theme Start to Finish, Part Eleven: The Footer

By Armando Roggio on March 25, 2010 · with 0 Comments

 

Developing a Magento theme requires a lot of attention to detail. In this episode, I am going to pay some attention to the footer section.

If all goes well, we could be finished with the home page in the next episode or two.

The Magento Theme Series, To Date

Adjusting the Newsletter Submission Style and Layout

I want to make the newsletter submission form stand out a bit more, and I want to adjust its position.

I am going to start by adding a background image to the fieldset element. To add this style, I need to navigate to about line 409 of boxes.css located at skin > frontend > default > pine > css. The specific line I want to adjust is for the class .mini-newsletter.

.mini-newsletter  { margin:8px 0; height: 75px; background: url("../images/news-background-blu.jpg") no-repeat top; }

I am using the background image to effectively take the place of the form label, so I am going to remove that label from the template filesubscribe.phtml at app > design > frontend > default > pine > template > newsletter. The label that I want to remove can be found at about line 30. 

<label for="newsletter"><?php echo $this->__('Newsletter Sign-up') ?>:</label>

While I am in the subscribe.phtml file, I am also going to add an ID to the form input for our submit button and select a different image, which I have already uploaded to the images folder. The new code will look like this:

        <input id="news-submit" type="image" src="<?php echo $this->getSkinUrl('images/submit-button.png') ?>" value="<?php echo $this->__('Sign me up') ?>"/>

Next, I am going to upload a third image that will eventually serve as a background for the text field in the newsletter submission form. I also need to go back to boxes.css and make the following changes to .mini-newsletter .input-box and .mini-newsletter .input-text.

.mini-newsletter .input-box         { float:left; width:160px; margin:0 5px; text-indent: 135px; }
.mini-newsletter .input-text        { margin-top: 19px; padding-left: 7px; width:235px; height:35px; background: url("../images/news-text-field.png") no-repeat; border: none; vertical-align: middle; color: #888; }

Now, I will add a style for .mini-newsletter #news-submit, which is the ID for the form submission input that I added to subscribe.phtml, above.

.mini-newsletter #news-submit {margin-top: 22px; margin-left: 195px;}

Newsletter section Delete

With these styles in place, I now have a bright blue newsletter submission form that is sure to catch a visitor's attention. I have placed the images that I used in the source files for this episode, so you can download them.

Download Source Files

Getting Social

Next, I am going to replace the banner at the lower right of the home page with several social media icons. In a shopping environment, these icons would be linked to the merchant's various social accounts. Before I can start, I need to have some icons to work with. For the Pine Theme, I created some custom, social-media icons using the brown from the Pine Theme palette.

With the images created and uploaded to the images folder, I need to navigate to footer.phtml at app > design > frontend > default > pine > template > page > html. In this file, I want to find the following code at about line 29.

<div class="footer-right">
    <p><img src="<?php echo $this->getSkinUrl('images/media/footer_callout.png');?>" alt="" class="footer-callout"/></p>
    <?php echo $this->getChildHtml('store_switcher') ?>
</div>

I will replace the current image with an unordered list. Each item in the list will be represented by one of my social media icons.

<div class="footer-right">
 
 <ul>
 <li class="socialite"><a href=""><img src="<?php echo $this->getSkinUrl('images/pine-rss.png') ?>" alt="Get the RSS Feed" /></a></li>
 <li class="socialite"><a href=""><img src="<?php echo $this->getSkinUrl('images/pine-you-tube.png') ?>" alt="Watch Our YouTube Channel" /></a></li>
 <li class="socialite"><a href=""><img src="<?php echo $this->getSkinUrl('images/pine-facebook.png') ?>" alt="Fan Us on Facebook" /></a></li>
 <li class="socialite"><a href=""><img src="<?php echo $this->getSkinUrl('images/pine-twitter.png') ?>" alt="Follow Us on Twitter" /></a></li>
 </ul>
 
    <?php echo $this->getChildHtml('store_switcher') ?>
</div>

With these images in place, I head back to boxes.css to around line 437, where I want to add a new style for these list items. You should notice that I am setting the opacity for the images to 25 percent. When a user hovers over an icon, the opacity move to 100 percent. Here are the new styles to add. 

.footer .socialite a {background: none; opacity: .25; filter: alpha(opacity=25)}
.footer .socialite a:hover {opacity: 1; filter: alpha(opacity-100);}

Now, I move up to the class .footer .footer-right to adjust the element's position. With the additional positioning, the description now reads:

.footer .footer-right           { float:right; margin: 25px 0 30px; width:50%; text-align:right;  }

Social Media section

The Pine Theme footer is now complete.

Related Articles

0 Comments

Rss-sm