(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?>

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:

• Magento : Payment and shipping method [Article]
• Categories and Attributes in Magento: Part 2 [Article]
• Magento: Exploring Themes [Article]