Enabling your new theme in Magento

Exclusive offer: get 50% off this eBook here
Magento Responsive Theme Design

Magento Responsive Theme Design — Save 50%

Leverage the power of Magento to successfully develop and deploy a responsive Magento theme with this book and ebook

$20.99    $10.50
by Richard Carter | December 2013 | e-Commerce Open Source Web Development

This article by Richard Carter, the author of Magento Responsive Theme Design, has discussed how to enable a responsive Magento theme for your store. Magento is an open source e-commerce solution. It comes with a variety of tools that are necessary for building a successful online shop.

(For more resources related to this topic, see here.)

After your new theme is in place, you can enable it in Magento. Log in to your Magento store's administration panel. Once you have logged in, navigate to System | Configuration, as shown in the following screenshot:

From there, select the global configuration scope (labeled Default Config in the following screenshot) you want to apply your new theme to, from the Current Configuration Scope dropdown in the top left of your screen:

Once this has loaded, navigate to the Design tab under GENERAL in the left-hand column and expand the Themes block in the right-hand column, as shown in the following screenshot:

From here, you can tell Magento to use your new theme. The values given here correspond to the name you gave to the directories when creating your theme. The example uses responsive as the value here, as shown in the following screenshot:

Click on the Save Config button at the top right of your screen to save the changes.

Next, check that your new theme has been activated. Remember the styles.css file you added in the skin/frontend/default/responsive/css directory? The presence of that file is telling Magento to load your new theme's CSS file instead of the default styles.css file for Magento from the default package, so your store now has none of the original CSS styling it. As such, you should see the following screenshot when you attempt to view the frontend of your Magento store:

Overwriting the default Magento templates

Noticed the name of your Magento theme appearing next to the logo in the header of your store? You can overwrite the default header.phtml that's causing it by copying the contents of app/design/frontend/base/default/template/page/html/header.phtml into app/design/frontend/default/responsive/template/ page/html/header.phtml. Open the file and find the following lines:

<?php if ($this->getIsHomePage()):?>
<h1 class="logo"><strong><?php echo $this->getLogoAlt()
?></strong><a href="<?php echo $this->getUrl('') ?>" title=
"<?php echo $this->getLogoAlt() ?>" class="logo"><img src =
"<?php echo $this->getLogoSrc() ?>" alt="<?php echo
$this->getLogoAlt() ?>" /></a></h1>
<?php else:?>
<a href="<?php echo $this->getUrl('') ?>" title="<?php echo
$this->getLogoAlt() ?>" class="logo"><strong><?php echo
$this->getLogoAlt() ?></strong><img src =
"<?php echo
$this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt()
?>" /></a>
<?php endif?> <!--?php endif?-->

Replace them with these lines:

<a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this-
>getLogoAlt() ?>" class="logo"><img src =
"<?php echo $this->
getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a>

Now if you save that file (and upload it to your server, if needed), you can see that the logo now looks tidier, as shown in the following screenshot:

That's it! Your basic responsive Magento theme is up and running.

Summary

Hopefully after reading this article you will get a better understanding of how to enable your new theme in Magento.

Resources for Article:


Further resources on this subject:


Magento Responsive Theme Design Leverage the power of Magento to successfully develop and deploy a responsive Magento theme with this book and ebook
Published: December 2013
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

About the Author :


Richard Carter

Richard Carter is a web designer and frontend web developer based in Newcastle upon Tyne in the North East of England.

His experience includes many open source e-commerce and content management systems, including Magento, MediaWiki, WordPress, and Drupal. He has worked with clients including the University of Edinburgh, University College Dublin, Directgov, NHS Choices, and BusinessLink.gov.uk.

He is a creative director at Peacock Carter Ltd (peacockcarter.co.uk), a web design and development agency based in the North East of England. He graduated from the University of Durham in Software Engineering, and currently lives in Newcastle upon Tyne. He blogs at earlgreyandbattenburg.co.uk and tweets as @RichardCarter and @PeacockCarter.

This is his sixth book. He has previously written MediaWiki Skins Design, Magento 1.3 Theme Design, Magento 1.4 Theme Design, Joomla! 1.5 Templates Cookbook, and The Beginner's Guide to Drupal Commerce, and acted as a technical reviewer on MediaWiki 1.1 Beginners Guide, Inkscape 0.48 Illustrator's Cookbook, and Apress' The Definitive Guide To Drupal 7.

Books From Packt


Mastering Magento
Mastering Magento

Magento 1.4 Development Cookbook
Magento 1.4 Development Cookbook

Magento 1.3 Theme Design
Magento 1.3 Theme Design

Instant E-Commerce with Magento: Build a Shop
Instant E-Commerce with Magento: Build a Shop

Magento 1.3: PHP Developer's Guide
Magento 1.3: PHP Developer's Guide

Instant Magento Shipping How-to
Instant Magento Shipping How-to

Magento Beginner’s Guide - Second Edition
Magento Beginner’s Guide - Second Edition

Magento 1.4 Themes Design
Magento 1.4 Themes Design


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
V
X
s
N
M
1
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software