আগামী ৩০ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

Magento Theme Development From Scratch Part-3

Dear Frainds. Now I’ll Describe you Magento Theme Development From Scratch Part 3. If you don’t have our first Part and Second Part, Please look at post ” Our PART 1 and PART 2” Let’s now we describe following:

  • Convert HTML Template to Magento Theme
  • Create and Enable Our Magento Package / Theme

Right, enough talk let’s get down to setting it up. Now you are ready to create your own custom theme. But, before you put your hands on the code, I will always recommend that you already have a mock-up to be developed, rather than designing as you go.

This will allow you to have a clear idea of what you will achieve without wasting unnecessary time to decide the position of the blocks. In this case, I have prepared the following custom layout for a hypothetical store selling products online:

Magento Theme Layout

Now that we a mock-up ready to be transformed into a Magento theme, you have to decide the name of the package to create and use that for the whole project.

I will call my template “eshopper”; you could create one with your name, the name of your customer, or the name of the project.

Creating new template directories in “app” Folder

  • Create the eshopper folder at app/design/frontend/rwd, so you will have app/design/frontend/rwd/eshopper.
  • Create all the necessary subfolders inside the rwd theme:
  • app/design/frontend/rwd/eshopper/template
  • app/design/frontend/rwd/eshopper/layout
  • app/design/frontend/rwd/eshopper/locale

To sum up, you will have the structure as shown in the following screenshot:

New Theme Folder

Creating the skin folders

Once we have created the app, let’s create the skin folder. This folder contains the static files of the theme such as images, JSS, and CSS files.

  • Create the eshopper template folder at skin/frontend/rwd/, so you will have skin/frontend/rwd/eshopper.
  • Create the rwd template folder at skin/frontend/, so you will have skin/frontend/rwd/eshopper/.
  • Create all the necessary subfolders inside the default theme:

 

  • skin/frontend/rwd/eshopper/images
  • skin/frontend/rwd/eshopper/css
  • skin/frontend/rwd/eshopper/js

To sum up, we will have the structure as shown in the following screenshot:

New Theme File for Skin Folder

Creating the necessary files

Now that our theme structure is ready, we have to create the main files we need. As I said before, we can create empty files then we copy the blocks by slicing from our HTML Template.

We start by creating the main files in the app folder, by performing the following steps:

  • Create the template files. Only create the following ones in:

 

  • app/design/frontend/rwd/eshopper/template/page/1column.phtml: This is the file that handles the structure of the page with one column
  • app/design/frontend/rwd/eshopper/template/page/2columns-left.phtml: This is the file that handles the structure of the page with two columns, with the sidebar on the left
  • app/design/frontend/eshopper/default/template/page/2columns-right.phtml: This is the file that handles the structure of the page with two columns, with the sidebar on the right
  • app/design/frontend/rwd/eshopper/template/page/3columns.phtml: This is the file that handles the structure of the page with three columns (main content and two sidebars)
  • app/design/frontend/rwd/eshopper/template/page/html/head.phtml: This is the file for the head of the theme
  • app/design/frontend/rwd/eshopper/template/page/html/header.phtml: This is the building block of the file header of the theme
  • app/design/frontend/rwd/eshopper/template/page/html/footer.phtml: This is the file of the footer structural block of the theme
  • Create the local.xml file at app/design/frontend/rwd/eshopper/layout/. This basic structure of the local XML file is similar to the following code:
<?xml version="1.0"?>
<layout version="0.1.0">
  <!--
    Default layout, loads most of the pages
    -->
  
  <default translate="label" module="page">
    <label>All Pages</label>
    <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
      <block type="page/html_head" name="head" as="head">
        <action method="addJs">
          <script>prototype/prototype.js</script>
        </action>
        <action method="addJs">
          <script>lib/jquery/jquery-1.10.2.min.js</script>
        </action>
        <action method="addJs">
          <script>lib/jquery/noconflict.js</script>
        </action>
        <action method="addJs">
          <script>lib/ccard.js</script>
        </action>
        <action method="addJs">
          <script>prototype/validation.js</script>
        </action>
        <action method="addJs">
          <script>scriptaculous/builder.js</script>
        </action>
        <action method="addJs">
          <script>scriptaculous/effects.js</script>
        </action>
        <action method="addJs">
          <script>scriptaculous/dragdrop.js</script>
        </action>
        <action method="addJs">
          <script>scriptaculous/controls.js</script>
        </action>
        <action method="addJs">
          <script>scriptaculous/slider.js</script>
        </action>
        <action method="addJs">
          <script>varien/js.js</script>
        </action>
        <action method="addJs">
          <script>varien/form.js</script>
        </action>
        <action method="addJs">
          <script>mage/translate.js</script>
        </action>
        <action method="addJs">
          <script>mage/cookies.js</script>
        </action>
        <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
        
        <!-- Remove items which the RWD package is not dependent upon -->
        <action method="removeItem">
          <type>skin_js</type>
          <name>js/ie6.js</name>
        </action>
        
        <!-- Add vendor dependencies -->
        <action method="addItem">
          <type>skin_js</type>
          <name>js/lib/modernizr.custom.min.js</name>
        </action>
        <action method="addItem">
          <type>skin_js</type>
          <name>js/lib/selectivizr.js</name>
        </action>
        <action method="addItem">
          <type>skin_js</type>
          <name>js/lib/matchMedia.js</name>
        </action>
        <action method="addItem">
          <type>skin_js</type>
          <name>js/lib/matchMedia.addListener.js</name>
        </action>
        <action method="addItem">
          <type>skin_js</type>
          <name>js/lib/enquire.js</name>
        </action>
        <action method="addItem">
          <type>skin_js</type>
          <name>js/app.js</name>
        </action>
        <action method="addItem">
          <type>skin_js</type>
          <name>js/lib/jquery.cycle2.min.js</name>
        </action>
        <action method="addItem">
          <type>skin_js</type>
          <name>js/lib/jquery.cycle2.swipe.min.js</name>
        </action>
        <action method="addItem">
          <type>skin_js</type>
          <name>js/slideshow.js</name>
        </action>
        <action method="addItem">
          <type>skin_js</type>
          <name>js/lib/imagesloaded.js</name>
        </action>
        <action method="addLinkRel">
          <rel>stylesheet</rel>
          <href>//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600</href>
        </action>
        <action method="addItem">
          <type>skin_js</type>
          <name>js/minicart.js</name>
        </action>
        
        <!-- Add stylesheets with no media queries for use in IE 8 and below -->
        <action method="addItem">
          <type>skin_css</type>
          <name>css/styles-ie8.css</name>
          <params/>
          <if>
            <![CDATA[(lte IE 8) & (!IEMobile)]]>
          </if>
        </action>
        <action method="addItem">
          <type>skin_css</type>
          <name>css/htp-ie8.css</name>
          <params/>
          <if>
            <![CDATA[(lte IE 8) & (!IEMobile)]]>
          </if>
        </action>
        
        <!-- Add stylesheets with media queries for use by modern browsers -->
        <action method="addItem">
          <type>skin_css</type>
          <name>css/styles.css</name>
          <params/>
          <if>
            <![CDATA[<!--[if (gte IE 9) | (IEMobile)]><!-->]]>
          </if>
        </action>
        <action method="addItem">
          <type>skin_css</type>
          <name>css/htp.css</name>
          <params/>
          <if>
            <![CDATA[<!--[if (gte IE 9) | (IEMobile)]><!-->]]>
          </if>
        </action>
        
        <!-- Sets viewport meta tag using text block -->
        <block type="core/text" name="head.viewport">
          <action method="setText">
            <text>
              <![CDATA[<meta name="viewport" content="initial-scale=1.0, width=device-width" />]]>
              &#10;</text>
          </action>
        </block>
      </block>
      <block type="core/text_list" name="after_body_start" as="after_body_start" translate="label">
        <label>Page Top</label>
      </block>
      <block type="page/html_notices" name="global_notices" as="global_notices" template="page/html/notices.phtml" />
      <block type="page/html_header" name="header" as="header">
        <block type="page/template_links" name="top.links" as="topLinks"/>
        <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
        <block type="core/text_list" name="top.menu" as="topMenu" translate="label">
          <label>Navigation Bar</label>
          <block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml">
            <block type="page/html_topmenu_renderer" name="catalog.topnav.renderer" template="page/html/topmenu/renderer.phtml"/>
          </block>
        </block>
        <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">
          <label>Page Header</label>
          <action method="setElementClass">
            <value>top-container</value>
          </action>
        </block>
        <block type="page/html_welcome" name="welcome" as="welcome"/>
      </block>
      <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
      <block type="core/text_list" name="left_first" as="left_first" translate="label">
        <label>Left Column First (shows above main column on smaller screens)</label>
      </block>
      <block type="core/text_list" name="left" as="left" translate="label">
        <label>Left Column</label>
      </block>
      <block type="core/messages" name="global_messages" as="global_messages"/>
      <block type="core/messages" name="messages" as="messages"/>
      <block type="core/text_list" name="content" as="content" translate="label">
        <label>Main Content Area</label>
      </block>
      <block type="core/text_list" name="right" as="right" translate="label">
        <label>Right Column</label>
      </block>
      <block type="page/html_wrapper" name="footer.before" as="footer_before" translate="label">
        <label>Page Footer</label>
        <action method="setElementClass">
          <value>footer-before-container</value>
        </action>
      </block>
      <block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">
        <block type="page/html_wrapper" name="bottom.container" as="bottomContainer" translate="label">
          <label>Page Footer</label>
          <action method="setElementClass">
            <value>bottom-container</value>
          </action>
        </block>
        <block type="page/switch" name="store_switcher" as="store_switcher" after="*" template="page/switch/stores.phtml"/>
        <block type="page/template_links" name="footer_links" as="footer_links" template="page/template/links.phtml">
          <action method="setTitle">
            <title>Quick Links</title>
          </action>
        </block>
        <block type="page/template_links" name="footer_links2" as="footer_links2" template="page/template/links.phtml">
          <action method="setTitle">
            <title>Account</title>
          </action>
        </block>
        <!-- This static block can be created and populated in admin. The footer_links cms block can be used as a starting point. -->
        <block type="cms/block" name="footer_social_links">
          <action method="setBlockId">
            <block_id>footer_social_links</block_id>
          </action>
        </block>
      </block>
      <block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">
        <label>Page Bottom</label>
        <block type="page/html_cookieNotice" name="global_cookie_notice" as ="global_cookie_notice" template="page/html/cookienotice.phtml" before="-" />
      </block>
    </block>
    <block type="core/profiler" output="toHtml" name="core_profiler"/>
  </default>
  <print translate="label" module="page">
    <label>All Pages (Print Version)</label>
    <!-- Mage_Page -->
    <block type="page/html" name="root" output="toHtml" template="page/print.phtml">
      
      <!-- This block allows the print.phtml template to get the logo -->
      <block type="page/html_header" name="header" as="header"/>
      <block type="page/html_head" name="head" as="head">
        <action method="addJs">
          <script>prototype/prototype.js</script>
        </action>
        <action method="addJs">
          <script>mage/translate.js</script>
        </action>
        <action method="addJs">
          <script>lib/ccard.js</script>
        </action>
        <action method="addJs">
          <script>prototype/validation.js</script>
        </action>
        <action method="addJs">
          <script>varien/js.js</script>
        </action>
        <action method="addCss">
          <stylesheet>css/styles.css</stylesheet>
        </action>
        <action method="addItem">
          <type>skin_css</type>
          <name>css/styles-ie.css</name>
          <params/>
          <if>lt IE 8</if>
        </action>
        <action method="addCss">
          <stylesheet>css/widgets.css</stylesheet>
        </action>
        <action method="addCss">
          <stylesheet>css/print.css</stylesheet>
          <params>media="print"</params>
        </action>
        <action method="addItem">
          <type>js</type>
          <name>lib/ds-sleight.js</name>
          <params/>
          <if>lt IE 7</if>
        </action>
        <!--<action method="addItem"><type>skin_js</type><name>js/iehover-fix.js</name><params/><if>lt IE 7</if></action>-->
      </block>
      <block type="core/text_list" name="content" as="content" translate="label">
        <label>Main Content Area</label>
      </block>
    </block>
  </print>
  
  <!-- Custom page layout handles -->
  <page_empty translate="label">
    <label>All Empty Layout Pages</label>
    <reference name="root">
      <action method="setTemplate">
        <template>page/empty.phtml</template>
      </action>
      <!-- Mark root page block that template is applied -->
      <action method="setIsHandle">
        <applied>1</applied>
      </action>
      <action method="setLayoutCode">
        <name>empty</name>
      </action>
    </reference>
  </page_empty>
  <page_one_column translate="label">
    <label>All One-Column Layout Pages</label>
    <reference name="root">
      <action method="setTemplate">
        <template>page/1column.phtml</template>
      </action>
      <!-- Mark root page block that template is applied -->
      <action method="setIsHandle">
        <applied>1</applied>
      </action>
      <action method="setLayoutCode">
        <name>one_column</name>
      </action>
    </reference>
  </page_one_column>
  <page_two_columns_left translate="label">
    <label>All Two-Column Layout Pages (Left Column)</label>
    <reference name="root">
      <action method="setTemplate">
        <template>page/2columns-left.phtml</template>
      </action>
      <!-- Mark root page block that template is applied -->
      <action method="setIsHandle">
        <applied>1</applied>
      </action>
      <action method="setLayoutCode">
        <name>two_columns_left</name>
      </action>
    </reference>
  </page_two_columns_left>
  <page_two_columns_right translate="label">
    <label>All Two-Column Layout Pages (Right Column)</label>
    <reference name="root">
      <action method="setTemplate">
        <template>page/2columns-right.phtml</template>
      </action>
      <!-- Mark root page block that template is applied -->
      <action method="setIsHandle">
        <applied>1</applied>
      </action>
      <action method="setLayoutCode">
        <name>two_columns_right</name>
      </action>
    </reference>
  </page_two_columns_right>
  <page_three_columns translate="label">
    <label>All Three-Column Layout Pages</label>
    <reference name="root">
      <action method="setTemplate">
        <template>page/3columns.phtml</template>
      </action>
      <!-- Mark root page block that template is applied -->
      <action method="setIsHandle">
        <applied>1</applied>
      </action>
      <action method="setLayoutCode">
        <name>three_columns</name>
      </action>
    </reference>
  </page_three_columns>
</layout>

Let’s look at the following main html template file before converting to Magento:

<!DOCTYPE html>
<html lang="en" id="top" class=" js no-touch localstorage no-ios">
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Saint Martin Island</title>

<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
    var BLANK_URL = 'http://localhost/htp/js/blank.html';
    var BLANK_IMG = 'http://localhost/htp/js/spacer.gif';
//]]>
</script>
<![endif]-->
<script type="text/javascript" src="./js/prototype.js"></script><style type="text/css"></style>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./js/noconflict.js"></script>
<script type="text/javascript" src="./js/ccard.js"></script>
<script type="text/javascript" src="./js/validation.js"></script>
<script type="text/javascript" src="./js/builder.js"></script>
<script type="text/javascript" src="./js/effects.js"></script>
<script type="text/javascript" src="./js/dragdrop.js"></script>
<script type="text/javascript" src="./js/controls.js"></script>
<script type="text/javascript" src="./js/slider.js"></script>
<script type="text/javascript" src="./js/js.js"></script>
<script type="text/javascript" src="./js/form.js"></script>
<script type="text/javascript" src="./js/translate.js"></script>
<script type="text/javascript" src="./js/cookies.js"></script>
<script type="text/javascript" src="./js/modernizr.custom.min.js"></script>
<script type="text/javascript" src="./js/selectivizr.js"></script>
<script type="text/javascript" src="./js/matchMedia.js"></script>
<script type="text/javascript" src="./js/matchMedia.addListener.js"></script>
<script type="text/javascript" src="./js/enquire.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
<script type="text/javascript" src="./js/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="./js/jquery.cycle2.swipe.min.js"></script>
<script type="text/javascript" src="./js/slideshow.js"></script>
<script type="text/javascript" src="./js/imagesloaded.js"></script>
<script type="text/javascript" src="./js/minicart.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:300,400,500,700,600">
<!--[if  (lte IE 8) & (!IEMobile)]>
<link rel="stylesheet" type="text/css" href="./css/styles-ie8.css" media="all" />
<link rel="stylesheet" type="text/css" href="./css/htp-ie8.css" media="all" />
<![endif]-->
<!--[if (gte IE 9) | (IEMobile)]><!-->
<link rel="stylesheet" type="text/css" href="./css/styles.css" media="all">
<link rel="stylesheet" type="text/css" href="./css/htp.css" media="all">
<!--<![endif]-->

<meta name="viewport" content="initial-scale=1.0, width=device-width">
<link rel="stylesheet" type="text/css" href="./css/reset.css" class="ver2337061">
<link rel="stylesheet" type="text/css" href="./css/rightSlider.css" class="ver7178587">
</head>
<body class=" cms-index-index cms-home" jhjlijpomuhn_m="l" s4743801444386387421="1">
<div class="wrapper">
  <div class="page">
    <div class="header-language-background">
      <div class="header-language-container">
        <div class="store-language-container">
          <div class="form-language">
            <label for="select-language">Your Language:</label>
            <select id="select-language" title="Your Language" onchange="window.location.href=this.value">
              <option value="" selected="selected">English</option>
              <option value="">French</option>
              <option value="">German</option>
            </select>
          </div>
        </div>
        <p class="welcome-msg">Welcome </p>
      </div>
    </div>
    <header id="header" class="page-header">
      <div class="page-header-container"> <a class="logo" href="#"> <img src="./images/logo.png" alt="E-Shopper" class="large"> <img src="./images/logo_small.png" alt="E-Shopper" class="small"> </a>
        <div class="store-language-container"></div>
        
        <!-- Skip Links -->
        
        <div class="skip-links"> <a href="http://localhost/magento2/#header-nav" class="skip-link skip-nav"> <span class="icon"></span> <span class="label">Menu</span> </a> <a href="/#header-search" class="skip-link skip-search"> <span class="icon"></span> <span class="label">Search</span> </a>
          <div class="account-cart-wrapper"> <a href="#" data-target-element="#header-account" class="skip-link skip-account"> <span class="icon"></span> <span class="label">Account</span> </a> 
            
            <!-- Cart -->
            
            <div class="header-minicart"> <a href="#" data-target-element="#header-cart" class="skip-link skip-cart  no-count"> <span class="icon"></span> <span class="label">Cart</span> <span class="count">0</span> </a>
              <div id="header-cart" class="block block-cart skip-content">
                <div id="minicart-error-message" class="minicart-message"></div>
                <div id="minicart-success-message" class="minicart-message"></div>
                <div class="minicart-wrapper">
                  <p class="block-subtitle"> Recently added item(s) <a class="close skip-link-close" href="#" title="Close">×</a> </p>
                  <p class="empty">You have no items in your shopping cart.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Navigation -->
     <div id="header-nav" class="skip-content">
  <nav id="nav">
    <ol class="nav-primary">
      <li class="level0 nav-1 first parent"><a href="#" class="level0 has-children">Women</a>
        <ul class="level0">
          <li class="level1 view-all"><a class="level1" href="#">View All Women</a></li>
          <li class="level1 nav-1-1 first"><a href="#" class="level1 ">New Arrivals</a></li>
          <li class="level1 nav-1-2"><a href="#" class="level1 ">Tops &amp; Blouses</a></li>
          <li class="level1 nav-1-3"><a href="#" class="level1 ">Pants &amp; Denim</a></li>
          <li class="level1 nav-1-4 last"><a href="#" class="level1 ">Dresses &amp; Skirts</a></li>
        </ul>
      </li>
      <li class="level0 nav-2 parent"><a href="#" class="level0 has-children">Men</a>
        <ul class="level0">
          <li class="level1 view-all"><a class="level1" href="#">View All Men</a></li>
          <li class="level1 nav-2-1 first"><a href="#" class="level1 ">New Arrivals</a></li>
          <li class="level1 nav-2-2"><a href="#" class="level1 ">Shirts</a></li>
          <li class="level1 nav-2-3"><a href="#" class="level1 ">Tees, Knits and Polos</a></li>
          <li class="level1 nav-2-4"><a href="#" class="level1 ">Pants &amp; Denim</a></li>
          <li class="level1 nav-2-5 last"><a href="#" class="level1 ">Blazers</a></li>
        </ul>
      </li>
      <li class="level0 nav-3 parent"><a href="#" class="level0 has-children">Accessories</a>
        <ul class="level0">
          <li class="level1 view-all"><a class="level1" href="#">View All Accessories</a></li>
          <li class="level1 nav-3-1 first"><a href="#" class="level1 ">Eyewear</a></li>
          <li class="level1 nav-3-2"><a href="#" class="level1 ">Jewelry</a></li>
          <li class="level1 nav-3-3"><a href="#" class="level1 ">Shoes</a></li>
          <li class="level1 nav-3-4 last"><a href="#" class="level1 ">Bags &amp; Luggage</a></li>
        </ul>
      </li>
      <li class="level0 nav-4 parent"><a href="#" class="level0 has-children">Home &amp; Decor</a>
        <ul class="level0">
          <li class="level1 view-all"><a class="level1" href="#">View All Home &amp; Decor</a></li>
          <li class="level1 nav-4-1 first"><a href="#" class="level1 ">Books &amp; Music</a></li>
          <li class="level1 nav-4-2"><a href="#" class="level1 ">Bed &amp; Bath</a></li>
          <li class="level1 nav-4-3"><a href="#" class="level1 ">Electronics</a></li>
          <li class="level1 nav-4-4 last"><a href="#" class="level1 ">Decorative Accents</a></li>
        </ul>
      </li>
      <li class="level0 nav-5 parent"><a href="#" class="level0 has-children">Sale</a>
        <ul class="level0">
          <li class="level1 view-all"><a class="level1" href="#">View All Sale</a></li>
          <li class="level1 nav-5-1 first"><a href="#" class="level1 ">Women</a></li>
          <li class="level1 nav-5-2"><a href="#" class="level1 ">Men</a></li>
          <li class="level1 nav-5-3"><a href="#" class="level1 ">Accessories</a></li>
          <li class="level1 nav-5-4 last"><a href="#" class="level1 ">Home &amp; Decor</a></li>
        </ul>
      </li>
      <li class="level0 nav-6 last"><a href="#" class="level0 ">VIP</a></li>
    </ol>
  </nav>
</div>

        
        <!-- Search -->
        
      <div id="header-search" class="skip-content">
  <form id="search_mini_form" action="#" method="get">
    <div class="input-box">
      <label for="search">Search:</label>
      <input id="search" type="search" name="q" value="" class="input-text required-entry" maxlength="128" placeholder="Search entire store here..." autocomplete="off">
      <button type="submit" title="Search" class="button search-button"><span><span>Search</span></span></button>
    </div>
    <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
    <script type="text/javascript">
    //<![CDATA[
        var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
        searchForm.initAutocomplete('#', 'search_autocomplete');
    //]]>
    </script>
  </form>
</div>

        
        <!-- Account -->
        
        <div id="header-account" class="skip-content">
          <div class="links">
            <ul>
              <li class="first"><a href="#" title="My Account">My Account</a></li>
              <li><a href="#" title="My Wishlist">My Wishlist</a></li>
              <li><a href="#" title="My Cart" class="top-link-cart">My Cart</a></li>
              <li><a href="#" title="Checkout" class="top-link-checkout">Checkout</a></li>
              <li><a href="#" title="Register">Register</a></li>
              <li class=" last"><a href="#" title="Log In">Log In</a></li>
            </ul>
          </div>
        </div>
      </div>
    </header>
    <div class="main-container col1-layout">
      <div class="main">
        <div class="col-main">
          <div id="map-popup" class="map-popup" style="display:none;"> <a href="#" class="map-popup-close" id="map-popup-close">×</a>
            <div class="map-popup-heading">
              <h3 id="map-popup-heading"></h3>
            </div>
            <div class="map-popup-content" id="map-popup-content">
              <div class="map-popup-msrp" id="map-popup-msrp-box"> <span class="label">Price:</span> <span style="text-decoration:line-through;" id="map-popup-msrp"></span> </div>
              <div class="map-popup-price" id="map-popup-price-box"> <span class="label">Actual Price:</span> <span id="map-popup-price"></span> </div>
              <div class="map-popup-checkout">
                <form action="" method="POST" id="product_addtocart_form_from_popup">
                  <input type="hidden" name="product" class="product_id" value="" id="map-popup-product-id">
                  <div class="additional-addtocart-box"> </div>
                  <button type="button" title="Add to Cart" class="button btn-cart" id="map-popup-button"><span><span>Add to Cart</span></span></button>
                </form>
              </div>
              <script type="text/javascript">
        //<![CDATA[
            document.observe("dom:loaded", Catalog.Map.bindProductForm);
        //]]>
        </script> 
            </div>
            <div class="map-popup-text" id="map-popup-text">Our price is lower than the manufacturer's "minimum advertised price."  As a result, we cannot show you the price in catalog or the product page. <br>
              <br>
              You have no obligation to purchase the product once you know the price. You can simply remove the item from your cart.</div>
            <div class="map-popup-text" id="map-popup-text-what-this">Our price is lower than the manufacturer's "minimum advertised price."  As a result, we cannot show you the price in catalog or the product page. <br>
              <br>
              You have no obligation to purchase the product once you know the price. You can simply remove the item from your cart.</div>
          </div>
          <div class="std">
            <div class="slideshow-container">
              <ul class="slideshow cycle-paused" style="overflow: hidden;">
                <li class="cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block;"> <img src="./images/girl1.jpg" alt="An eye for detail - Click to Shop Eye Wear"> </li>
                <li class="cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; display: none; opacity: 1;"> <img src="./images/girl2.jpg" alt="Style solutions - covet-worthy styles in travel-friendly fabrics - Click to Shop Woman"> </li>
                <li class="cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 98; display: none; opacity: 1;"> <img src="./images/girl3.jpg" alt="Wing man - hit the runway in stylish separates and casuals - Click to Shop Man"> </li>
              </ul>
              <div class="slideshow-pager">&nbsp; </div>
            </div>
            <ul class="promos">
              <li> <a href="#"> <img src="./images/homepage-three-column-promo-01B.png" alt="Physical &amp; Virtual Gift Cards"> </a> </li>
              <li> <a href="#"> <img src="./images/homepage-three-column-promo-02.png" alt="Shop Private Sales - Members Only"> </a> </li>
              <li> <a href="#"> <img src="./images/homepage-three-column-promo-03.png" alt="Travel Gear for Every Occasion"> </a> </li>
            </ul>
          </div>
          <h2 class="subtitle">New Products</h2>
          <ul class="products-grid">
            <li class="item first"> <a href="#" title="Linen Blazer" class="product-image"><img src="./images/product1.jpg" width="135" height="135" alt="Linen Blazer"></a>
              <h3 class="product-name"><a href="#" title="Linen Blazer">Linen Blazer</a></h3>
              <div class="ratings">
                <div class="rating-box">
                  <div class="rating" style="width:100%"></div>
                </div>
                <span class="amount"><a href="#" onclick="var t = opener ? opener.window : window; t.location.href=&#39;#&#39;; return false;">1 Review(s)</a></span> </div>
              <div class="price-box"> <span class="regular-price" id="product-price-406-new"> <span class="price">$455.00</span> </span> </div>
              <div class="actions">
                <button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation(&#39;#&#39;)"><span><span>Add to Cart</span></span></button>
                <ul class="add-to-links">
                  <li><a href="#" class="link-wishlist">Add to Wishlist</a></li>
                  <li><span class="separator">|</span> <a href="#" class="link-compare">Add to Compare</a></li>
                </ul>
              </div>
            </li>
            <li class="item"> <a href="#" title="Elizabeth Knit Top" class="product-image"><img src="./images/product2.jpg" width="135" height="135" alt="Elizabeth Knit Top"></a>
              <h3 class="product-name"><a href="#" title="Elizabeth Knit Top">Elizabeth Knit Top</a></h3>
              <div class="price-box"> <span class="regular-price" id="product-price-421-new"> <span class="price">$210.00</span> </span> </div>
              <div class="actions">
                <button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation(&#39;#&#39;)"><span><span>Add to Cart</span></span></button>
                <ul class="add-to-links">
                  <li><a href="#" class="link-wishlist">Add to Wishlist</a></li>
                  <li><span class="separator">|</span> <a href="#" class="link-compare">Add to Compare</a></li>
                </ul>
              </div>
            </li>
            <li class="item"> <a href="#" title="Chelsea Tee" class="product-image"><img src="./images/product3.jpg" width="135" height="135" alt="Chelsea Tee"></a>
              <h3 class="product-name"><a href="#" title="Chelsea Tee">Chelsea Tee</a></h3>
              <div class="price-box"> <span class="regular-price" id="product-price-410-new"> <span class="price">$75.00</span> </span> </div>
              <div class="actions">
                <button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation(&#39;#&#39;)"><span><span>Add to Cart</span></span></button>
                <ul class="add-to-links">
                  <li><a href="#" class="link-wishlist">Add to Wishlist</a></li>
                  <li><span class="separator">|</span> <a href="#" class="link-compare">Add to Compare</a></li>
                </ul>
              </div>
            </li>
            <li class="item"> <a href="#" title="Lafayette Convertible Dress" class="product-image"><img src="./images/product4.jpg" width="135" height="135" alt="Lafayette Convertible Dress"></a>
              <h3 class="product-name"><a href="#" title="Lafayette Convertible Dress">Lafayette Convertible Dress</a></h3>
              <div class="ratings">
                <div class="rating-box">
                  <div class="rating" style="width:100%"></div>
                </div>
                <span class="amount"><a href="#" onclick="var t = opener ? opener.window : window; t.location.href=&#39;#&#39;; return false;">2 Review(s)</a></span> </div>
              <div class="price-box"> <span class="regular-price" id="product-price-425-new"> <span class="price">$340.00</span> </span> </div>
              <div class="actions">
                <button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation(&#39;#&#39;)"><span><span>Add to Cart</span></span></button>
                <ul class="add-to-links">
                  <li><a href="#" class="link-wishlist">Add to Wishlist</a></li>
                  <li><span class="separator">|</span> <a href="#" class="link-compare">Add to Compare</a></li>
                </ul>
              </div>
            </li>
            <li class="item"> <a href="#" title="Tori Tank" class="product-image"><img src="./images/product5.jpg" width="135" height="135" alt="Tori Tank"></a>
              <h3 class="product-name"><a href="#" title="Tori Tank">Tori Tank</a></h3>
              <div class="price-box"> <span class="regular-price" id="product-price-418-new"> <span class="price">$60.00</span> </span> </div>
              <div class="actions">
                <button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation(&#39;#&#39;)"><span><span>Add to Cart</span></span></button>
                <ul class="add-to-links">
                  <li><a href="#" class="link-wishlist">Add to Wishlist</a></li>
                  <li><span class="separator">|</span> <a href="#" class="link-compare">Add to Compare</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-container">
      <div class="footer">
        <div class="block block-subscribe">
          <div class="block-title"> <strong><span>Newsletter</span></strong> </div>
          <form action="#" method="post" id="newsletter-validate-detail">
            <div class="block-content">
              <div class="form-subscribe-header">
                <label for="newsletter">Sign Up for Our Newsletter:</label>
              </div>
              <div class="input-box">
                <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="newsletter" title="Sign up for our newsletter" class="input-text required-entry validate-email">
              </div>
              <div class="actions">
                <button type="submit" title="Subscribe" class="button"><span><span>Subscribe</span></span></button>
              </div>
            </div>
          </form>
          <script type="text/javascript">
    //<![CDATA[
        var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail');
    //]]>
    </script> 
        </div>
        <div class="links">
          <div class="block-title"> <strong><span>Company</span></strong> </div>
          <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Customer Service</a></li>
            <li><a href="#">Privacy Policy</a></li>
          </ul>
        </div>
        <div class="links">
          <div class="block-title"><strong><span>Quick Links</span></strong></div>
          <ul>
            <li class="first"><a href="#" title="Site Map">Site Map</a></li>
            <li><a href="#" title="Search Terms">Search Terms</a></li>
            <li class=" last"><a href="#" title="Advanced Search">Advanced Search</a></li>
          </ul>
        </div>
        <div class="links">
          <div class="block-title"><strong><span>Account</span></strong></div>
          <ul>
            <li class="first"><a href="#" title="My Account">My Account</a></li>
            <li class=" last"><a href="#" title="Orders and Returns">Orders and Returns</a></li>
          </ul>
        </div>
        <div class="links social-media">
          <div class="block-title"> <strong><span>Connect With Us</span></strong> </div>
          <ul>
            <li><a href="#"><em class="facebook"></em>Facebook</a></li>
            <li><a href="#"><em class="twitter"></em>Twitter</a></li>
            <li><a href="#"><em class="youtube"></em>YouTube</a></li>
            <li><a href="#"><em class="pinterest"></em>Pinterest</a></li>
            <li class="last"><a href="#"><em class="rss"></em>RSS</a></li>
          </ul>
        </div>
        <address class="copyright">
        © 2014 E-Shopper. All Rights Reserved.
        </address>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Creating the header.phtml file

Let’s Copy your html header section from line 60 to 190 and paste it you header.phtml

  <div class="header-language-background">
      <div class="header-language-container">
        <div class="store-language-container">
          <div class="form-language">
            <label for="select-language">Your Language:</label>
            <select id="select-language" title="Your Language" onchange="window.location.href=this.value">
              <option value="" selected="selected">English</option>
              <option value="">French</option>
              <option value="">German</option>
            </select>
          </div>
        </div>
        <p class="welcome-msg">Welcome </p>
      </div>
    </div>
    <header id="header" class="page-header">
      <div class="page-header-container"> <a class="logo" href="#"> <img src="./images/logo.png" alt="E-Shopper" class="large"> <img src="./images/logo_small.png" alt="E-Shopper" class="small"> </a>
        <div class="store-language-container"></div>
        
        <!-- Skip Links -->
        
        <div class="skip-links"> <a href="http://localhost/magento2/#header-nav" class="skip-link skip-nav"> <span class="icon"></span> <span class="label">Menu</span> </a> <a href="/#header-search" class="skip-link skip-search"> <span class="icon"></span> <span class="label">Search</span> </a>
          <div class="account-cart-wrapper"> <a href="#" data-target-element="#header-account" class="skip-link skip-account"> <span class="icon"></span> <span class="label">Account</span> </a> 
            
            <!-- Cart -->
            
            <div class="header-minicart"> <a href="#" data-target-element="#header-cart" class="skip-link skip-cart  no-count"> <span class="icon"></span> <span class="label">Cart</span> <span class="count">0</span> </a>
              <div id="header-cart" class="block block-cart skip-content">
                <div id="minicart-error-message" class="minicart-message"></div>
                <div id="minicart-success-message" class="minicart-message"></div>
                <div class="minicart-wrapper">
                  <p class="block-subtitle"> Recently added item(s) <a class="close skip-link-close" href="#" title="Close">×</a> </p>
                  <p class="empty">You have no items in your shopping cart.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Navigation -->
     <div id="header-nav" class="skip-content">
  <nav id="nav">
    <ol class="nav-primary">
      <li class="level0 nav-1 first parent"><a href="#" class="level0 has-children">Women</a>
        <ul class="level0">
          <li class="level1 view-all"><a class="level1" href="#">View All Women</a></li>
          <li class="level1 nav-1-1 first"><a href="#" class="level1 ">New Arrivals</a></li>
          <li class="level1 nav-1-2"><a href="#" class="level1 ">Tops &amp; Blouses</a></li>
          <li class="level1 nav-1-3"><a href="#" class="level1 ">Pants &amp; Denim</a></li>
          <li class="level1 nav-1-4 last"><a href="#" class="level1 ">Dresses &amp; Skirts</a></li>
        </ul>
      </li>
      <li class="level0 nav-2 parent"><a href="#" class="level0 has-children">Men</a>
        <ul class="level0">
          <li class="level1 view-all"><a class="level1" href="#">View All Men</a></li>
          <li class="level1 nav-2-1 first"><a href="#" class="level1 ">New Arrivals</a></li>
          <li class="level1 nav-2-2"><a href="#" class="level1 ">Shirts</a></li>
          <li class="level1 nav-2-3"><a href="#" class="level1 ">Tees, Knits and Polos</a></li>
          <li class="level1 nav-2-4"><a href="#" class="level1 ">Pants &amp; Denim</a></li>
          <li class="level1 nav-2-5 last"><a href="#" class="level1 ">Blazers</a></li>
        </ul>
      </li>
      <li class="level0 nav-3 parent"><a href="#" class="level0 has-children">Accessories</a>
        <ul class="level0">
          <li class="level1 view-all"><a class="level1" href="#">View All Accessories</a></li>
          <li class="level1 nav-3-1 first"><a href="#" class="level1 ">Eyewear</a></li>
          <li class="level1 nav-3-2"><a href="#" class="level1 ">Jewelry</a></li>
          <li class="level1 nav-3-3"><a href="#" class="level1 ">Shoes</a></li>
          <li class="level1 nav-3-4 last"><a href="#" class="level1 ">Bags &amp; Luggage</a></li>
        </ul>
      </li>
      <li class="level0 nav-4 parent"><a href="#" class="level0 has-children">Home &amp; Decor</a>
        <ul class="level0">
          <li class="level1 view-all"><a class="level1" href="#">View All Home &amp; Decor</a></li>
          <li class="level1 nav-4-1 first"><a href="#" class="level1 ">Books &amp; Music</a></li>
          <li class="level1 nav-4-2"><a href="#" class="level1 ">Bed &amp; Bath</a></li>
          <li class="level1 nav-4-3"><a href="#" class="level1 ">Electronics</a></li>
          <li class="level1 nav-4-4 last"><a href="#" class="level1 ">Decorative Accents</a></li>
        </ul>
      </li>
      <li class="level0 nav-5 parent"><a href="#" class="level0 has-children">Sale</a>
        <ul class="level0">
          <li class="level1 view-all"><a class="level1" href="#">View All Sale</a></li>
          <li class="level1 nav-5-1 first"><a href="#" class="level1 ">Women</a></li>
          <li class="level1 nav-5-2"><a href="#" class="level1 ">Men</a></li>
          <li class="level1 nav-5-3"><a href="#" class="level1 ">Accessories</a></li>
          <li class="level1 nav-5-4 last"><a href="#" class="level1 ">Home &amp; Decor</a></li>
        </ul>
      </li>
      <li class="level0 nav-6 last"><a href="#" class="level0 ">VIP</a></li>
    </ol>
  </nav>
</div>

        
        <!-- Search -->
        
      <div id="header-search" class="skip-content">
  <form id="search_mini_form" action="#" method="get">
    <div class="input-box">
      <label for="search">Search:</label>
      <input id="search" type="search" name="q" value="" class="input-text required-entry" maxlength="128" placeholder="Search entire store here..." autocomplete="off">
      <button type="submit" title="Search" class="button search-button"><span><span>Search</span></span></button>
    </div>
    <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
    <script type="text/javascript">
    //<![CDATA[
        var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
        searchForm.initAutocomplete('#', 'search_autocomplete');
    //]]>
    </script>
  </form>
</div>

        
        <!-- Account -->
        
        <div id="header-account" class="skip-content">
          <div class="links">
            <ul>
              <li class="first"><a href="#" title="My Account">My Account</a></li>
              <li><a href="#" title="My Wishlist">My Wishlist</a></li>
              <li><a href="#" title="My Cart" class="top-link-cart">My Cart</a></li>
              <li><a href="#" title="Checkout" class="top-link-checkout">Checkout</a></li>
              <li><a href="#" title="Register">Register</a></li>
              <li class=" last"><a href="#" title="Log In">Log In</a></li>
            </ul>
          </div>
        </div>
      </div>
    </header>

Creating the 1column.phtml file

Let’s Copy your html content section from line 191 to 360 and paste it you 1column.phtml file

<div class="main-container col1-layout">
      <div class="main">
        <div class="col-main">
          <div id="map-popup" class="map-popup" style="display:none;"> <a href="#" class="map-popup-close" id="map-popup-close">×</a>
            <div class="map-popup-heading">
              <h3 id="map-popup-heading"></h3>
            </div>
            <div class="map-popup-content" id="map-popup-content">
              <div class="map-popup-msrp" id="map-popup-msrp-box"> <span class="label">Price:</span> <span style="text-decoration:line-through;" id="map-popup-msrp"></span> </div>
              <div class="map-popup-price" id="map-popup-price-box"> <span class="label">Actual Price:</span> <span id="map-popup-price"></span> </div>
              <div class="map-popup-checkout">
                <form action="" method="POST" id="product_addtocart_form_from_popup">
                  <input type="hidden" name="product" class="product_id" value="" id="map-popup-product-id">
                  <div class="additional-addtocart-box"> </div>
                  <button type="button" title="Add to Cart" class="button btn-cart" id="map-popup-button"><span><span>Add to Cart</span></span></button>
                </form>
              </div>
              <script type="text/javascript">
        //<![CDATA[
            document.observe("dom:loaded", Catalog.Map.bindProductForm);
        //]]>
        </script> 
            </div>
            <div class="map-popup-text" id="map-popup-text">Our price is lower than the manufacturer's "minimum advertised price."  As a result, we cannot show you the price in catalog or the product page. <br>
              <br>
              You have no obligation to purchase the product once you know the price. You can simply remove the item from your cart.</div>
            <div class="map-popup-text" id="map-popup-text-what-this">Our price is lower than the manufacturer's "minimum advertised price."  As a result, we cannot show you the price in catalog or the product page. <br>
              <br>
              You have no obligation to purchase the product once you know the price. You can simply remove the item from your cart.</div>
          </div>
          <div class="std">
            <div class="slideshow-container">
              <ul class="slideshow cycle-paused" style="overflow: hidden;">
                <li class="cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block;"> <img src="./images/girl1.jpg" alt="An eye for detail - Click to Shop Eye Wear"> </li>
                <li class="cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; display: none; opacity: 1;"> <img src="./images/girl2.jpg" alt="Style solutions - covet-worthy styles in travel-friendly fabrics - Click to Shop Woman"> </li>
                <li class="cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 98; display: none; opacity: 1;"> <img src="./images/girl3.jpg" alt="Wing man - hit the runway in stylish separates and casuals - Click to Shop Man"> </li>
              </ul>
              <div class="slideshow-pager">&nbsp; </div>
            </div>
            <ul class="promos">
              <li> <a href="#"> <img src="./images/homepage-three-column-promo-01B.png" alt="Physical &amp; Virtual Gift Cards"> </a> </li>
              <li> <a href="#"> <img src="./images/homepage-three-column-promo-02.png" alt="Shop Private Sales - Members Only"> </a> </li>
              <li> <a href="#"> <img src="./images/homepage-three-column-promo-03.png" alt="Travel Gear for Every Occasion"> </a> </li>
            </ul>
          </div>
          <h2 class="subtitle">New Products</h2>
          <ul class="products-grid">
            <li class="item first"> <a href="#" title="Linen Blazer" class="product-image"><img src="./images/product1.jpg" width="135" height="135" alt="Linen Blazer"></a>
              <h3 class="product-name"><a href="#" title="Linen Blazer">Linen Blazer</a></h3>
              <div class="ratings">
                <div class="rating-box">
                  <div class="rating" style="width:100%"></div>
                </div>
                <span class="amount"><a href="#" onclick="var t = opener ? opener.window : window; t.location.href=&#39;#&#39;; return false;">1 Review(s)</a></span> </div>
              <div class="price-box"> <span class="regular-price" id="product-price-406-new"> <span class="price">$455.00</span> </span> </div>
              <div class="actions">
                <button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation(&#39;#&#39;)"><span><span>Add to Cart</span></span></button>
                <ul class="add-to-links">
                  <li><a href="#" class="link-wishlist">Add to Wishlist</a></li>
                  <li><span class="separator">|</span> <a href="#" class="link-compare">Add to Compare</a></li>
                </ul>
              </div>
            </li>
            <li class="item"> <a href="#" title="Elizabeth Knit Top" class="product-image"><img src="./images/product2.jpg" width="135" height="135" alt="Elizabeth Knit Top"></a>
              <h3 class="product-name"><a href="#" title="Elizabeth Knit Top">Elizabeth Knit Top</a></h3>
              <div class="price-box"> <span class="regular-price" id="product-price-421-new"> <span class="price">$210.00</span> </span> </div>
              <div class="actions">
                <button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation(&#39;#&#39;)"><span><span>Add to Cart</span></span></button>
                <ul class="add-to-links">
                  <li><a href="#" class="link-wishlist">Add to Wishlist</a></li>
                  <li><span class="separator">|</span> <a href="#" class="link-compare">Add to Compare</a></li>
                </ul>
              </div>
            </li>
            <li class="item"> <a href="#" title="Chelsea Tee" class="product-image"><img src="./images/product3.jpg" width="135" height="135" alt="Chelsea Tee"></a>
              <h3 class="product-name"><a href="#" title="Chelsea Tee">Chelsea Tee</a></h3>
              <div class="price-box"> <span class="regular-price" id="product-price-410-new"> <span class="price">$75.00</span> </span> </div>
              <div class="actions">
                <button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation(&#39;#&#39;)"><span><span>Add to Cart</span></span></button>
                <ul class="add-to-links">
                  <li><a href="#" class="link-wishlist">Add to Wishlist</a></li>
                  <li><span class="separator">|</span> <a href="#" class="link-compare">Add to Compare</a></li>
                </ul>
              </div>
            </li>
            <li class="item"> <a href="#" title="Lafayette Convertible Dress" class="product-image"><img src="./images/product4.jpg" width="135" height="135" alt="Lafayette Convertible Dress"></a>
              <h3 class="product-name"><a href="#" title="Lafayette Convertible Dress">Lafayette Convertible Dress</a></h3>
              <div class="ratings">
                <div class="rating-box">
                  <div class="rating" style="width:100%"></div>
                </div>
                <span class="amount"><a href="#" onclick="var t = opener ? opener.window : window; t.location.href=&#39;#&#39;; return false;">2 Review(s)</a></span> </div>
              <div class="price-box"> <span class="regular-price" id="product-price-425-new"> <span class="price">$340.00</span> </span> </div>
              <div class="actions">
                <button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation(&#39;#&#39;)"><span><span>Add to Cart</span></span></button>
                <ul class="add-to-links">
                  <li><a href="#" class="link-wishlist">Add to Wishlist</a></li>
                  <li><span class="separator">|</span> <a href="#" class="link-compare">Add to Compare</a></li>
                </ul>
              </div>
            </li>
            <li class="item"> <a href="#" title="Tori Tank" class="product-image"><img src="./images/product5.jpg" width="135" height="135" alt="Tori Tank"></a>
              <h3 class="product-name"><a href="#" title="Tori Tank">Tori Tank</a></h3>
              <div class="price-box"> <span class="regular-price" id="product-price-418-new"> <span class="price">$60.00</span> </span> </div>
              <div class="actions">
                <button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation(&#39;#&#39;)"><span><span>Add to Cart</span></span></button>
                <ul class="add-to-links">
                  <li><a href="#" class="link-wishlist">Add to Wishlist</a></li>
                  <li><span class="separator">|</span> <a href="#" class="link-compare">Add to Compare</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

Creating the footer.phtml file

Let’s Copy your html footer section from line 307 to 368 and paste it you footer.phtml

<div class="footer-container">
      <div class="footer">
        <div class="block block-subscribe">
          <div class="block-title"> <strong><span>Newsletter</span></strong> </div>
          <form action="#" method="post" id="newsletter-validate-detail">
            <div class="block-content">
              <div class="form-subscribe-header">
                <label for="newsletter">Sign Up for Our Newsletter:</label>
              </div>
              <div class="input-box">
                <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="newsletter" title="Sign up for our newsletter" class="input-text required-entry validate-email">
              </div>
              <div class="actions">
                <button type="submit" title="Subscribe" class="button"><span><span>Subscribe</span></span></button>
              </div>
            </div>
          </form>
          <script type="text/javascript">
    //<![CDATA[
        var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail');
    //]]>
    </script> 
        </div>
        <div class="links">
          <div class="block-title"> <strong><span>Company</span></strong> </div>
          <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Customer Service</a></li>
            <li><a href="#">Privacy Policy</a></li>
          </ul>
        </div>
        <div class="links">
          <div class="block-title"><strong><span>Quick Links</span></strong></div>
          <ul>
            <li class="first"><a href="#" title="Site Map">Site Map</a></li>
            <li><a href="#" title="Search Terms">Search Terms</a></li>
            <li class=" last"><a href="#" title="Advanced Search">Advanced Search</a></li>
          </ul>
        </div>
        <div class="links">
          <div class="block-title"><strong><span>Account</span></strong></div>
          <ul>
            <li class="first"><a href="#" title="My Account">My Account</a></li>
            <li class=" last"><a href="#" title="Orders and Returns">Orders and Returns</a></li>
          </ul>
        </div>
        <div class="links social-media">
          <div class="block-title"> <strong><span>Connect With Us</span></strong> </div>
          <ul>
            <li><a href="#"><em class="facebook"></em>Facebook</a></li>
            <li><a href="#"><em class="twitter"></em>Twitter</a></li>
            <li><a href="#"><em class="youtube"></em>YouTube</a></li>
            <li><a href="#"><em class="pinterest"></em>Pinterest</a></li>
            <li class="last"><a href="#"><em class="rss"></em>RSS</a></li>
          </ul>
        </div>
        <address class="copyright">
        © 2014 E-Shopper. All Rights Reserved.
        </address>
      </div>
    </div>

Convert to Magento Template

Now We’ll convert header.phtml,1column.phtml and footer.phtml files to our magenta template with following is as follows

Converting the header.phtml file with followings

<div class="header-language-background">
    <div class="header-language-container">
        <div class="store-language-container">
            <?php echo $this->getChildHtml('store_language') ?>
        </div>

        <?php echo $this->getChildHtml('currency_switcher') ?>

        <p class="welcome-msg"><?php echo $this->getChildHtml('welcome') ?> <?php echo $this->getAdditionalHtml() ?></p>
    </div>
</div>

<header id="header" class="page-header">
    <div class="page-header-container">
        <a class="logo" href="<?php echo $this->getUrl('') ?>">
            <img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="large" />
            <img src="<?php echo $this->getLogoSrcSmall() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="small" />
        </a>

        <?php // In order for the language switcher to display next to logo on smaller viewports, it will be moved here.
              // See app.js for details ?>
        <div class="store-language-container"></div>

        <!-- Skip Links -->

        <div class="skip-links">
            <a href="#header-nav" class="skip-link skip-nav">
                <span class="icon"></span>
                <span class="label"><?php echo $this->__('Menu'); ?></span>
            </a>

            <a href="#header-search" class="skip-link skip-search">
                <span class="icon"></span>
                <span class="label"><?php echo $this->__('Search'); ?></span>
            </a>

            <div class="account-cart-wrapper">
                <a href="<?php echo $this->helper('customer')->getAccountUrl(); ?>" data-target-element="#header-account" class="skip-link skip-account">
                    <span class="icon"></span>
                    <span class="label"><?php echo $this->__('Account'); ?></span>
                </a>

                <!-- Cart -->

                <div class="header-minicart">
                    <?php echo $this->getChildHtml('minicart_head'); ?>
                </div>
            </div>


        </div>

        <!-- Navigation -->

        <div id="header-nav" class="skip-content">
            <?php echo $this->getChildHtml('topMenu') ?>
        </div>

        <!-- Search -->

        <div id="header-search" class="skip-content">
            <?php echo $this->getChildHtml('topSearch') ?>
        </div>

        <!-- Account -->

        <div id="header-account" class="skip-content">
            <?php echo $this->getChildHtml('topLinks') ?>
        </div>
    </div>
</header>


<?php echo $this->getChildHtml('topContainer'); ?>

Converting the 1column.phtml file with followings


<!DOCTYPE html>

<!--[if lt IE 7 ]> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js"> <!--<![endif]-->

<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper">
    <?php echo $this->getChildHtml('global_notices') ?>
    <div class="page">
        <?php echo $this->getChildHtml('header') ?>
        <div class="main-container col1-layout">
            <div class="main">
                <?php echo $this->getChildHtml('breadcrumbs') ?>
                <div class="col-main">
                    <?php echo $this->getChildHtml('global_messages') ?>
                    <?php echo $this->getChildHtml('content') ?>
                </div>
            </div>
        </div>
        <?php echo $this->getChildHtml('footer_before') ?>
        <?php echo $this->getChildHtml('footer') ?>
        <?php echo $this->getChildHtml('global_cookie_notice') ?>
        <?php echo $this->getChildHtml('before_body_end') ?>
    </div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>


Converting the footer.phtml file with followings

<div class="footer-container">
    <div class="footer">
        <?php echo $this->getChildHtml() ?>
        <address class="copyright"><?php echo $this->getCopyright() ?></address>
    </div>
</div>

Activating the theme

Ok we are ready! Now that we have our theme and have disabled the cache, let’s
activate the theme. To activate the theme, go to System=>Configuration =>Design tab.
Inside the Package box, insert the name of the package you created before in the Current Package Name option. In this case, we insert bookstore, and then click on the Save Config button, as shown in the following screenshot:

theme_enable

In this way, we are telling Magento to use our bookstore package for the current configuration. Our theme is now ready and active. Let’s go to the frontend and see what happens.
If you have done everything right, you should see the following page:

Disabling the cache

Now that we have the basis of the theme ready, before activating it, we have to disable the caching system of Magento throughout the development phase to avoid any inconsistencies during the development process by performing the following steps:
1. Navigate to the Admin Panel=>System =>Cache Management; the following page opens:

In this way, we are telling Magento to use our eshopper package for the current configuration.
Our theme is now ready and active. Let’s go to the frontend and see what happens. If you have done everything right, you should see the following page:

output

Hi, My name is Masud Alam, love to work with Open Source Technologies, living in Dhaka, Bangladesh. I graduated in 2009 with a bachelor's degree in Engineering from State University Of Bangladesh, I'm also a Certified Engineer on ZEND PHP 5.3, I served my first five years a number of leadership positions at Winux Soft Ltd, SSL Wireless Ltd, CIDA and MAX Group where I worked on ERP software and web development., but now i'm a co-founder and Chief Executive Officer and Managing Director of TechBeeo Software Consultancy Services Ltd. I'm also a Course Instructor of ZCPE PHP 7 Certification and professional web development course at w3programmers Training Institute - a leading Training Institute in the country.
One comment on “Magento Theme Development From Scratch Part-3
  1. Thanks for the effort to create such a useful article but there are alot of errors in this article.
    It would have been better if you provided the final theme for download.

Leave a Reply

Your email address will not be published. Required fields are marked *