Custom Magento Theme – Part 2

Part 2 – Modifying the template header

In this part I will start the process of modifying the template by changing the header section. Below is a basic breakdown on how the default rwd theme header file is structured.

rwd header breakdownBelow is the breakdown on how the header file will be structured after I modify the template file.

rwd custom header breakdown

Magento header file: header.phtml

Original Code

For a starting point copy the header file from the rwd folder and place it into your own theme folder.

File location: \app\design\frontend\rwd\default\template\page\html\header.phtml

<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->getChildHtml('accountLinks') ?></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'); ?>

After code

File location: \app\design\frontend\rwd-custom\default\template\page\html\header.phtml

If you compare the original and code below you will be able to see the changes that I made, in which I rearranged certain elements.

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

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

        <p class="welcome-msg"><?php echo $this->getChildHtml('welcome') ?> <?php echo $this->getChildHtml('accountLinks') ?></p>
    </div><!-- .header-language-container -->
</div><!-- .header-language-background -->

<header id="header" class="page-header">
    <div class="page-header-container">
    
        <div class="col-3">
            <!-- Search -->
            <div id="header-search" class="skip-content">
                <?php echo $this->getChildHtml('topSearch') ?>
            </div><!-- #header-search -->
        </div><!-- col-3 -->
        <div class="col-3">
            <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>
            <div class="store-language-container"></div>        
        </div><!-- col-3 -->
        <div class="col-3">
            <!-- Skip Links -->
            <div class="skip-links">
                <a href="#header-nav" class="skip-link skip-nav">
                    <i class="fa fa-bars fa-2x fa-fw"></i>
                    <span class="label"><?php echo $this->__('Menu'); ?></span>
                </a>
    
                <a href="#header-search" class="skip-link skip-search">
                    <i class="fa fa-search fa-2x fa-fw"></i>
                    <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">
                        <i class="fa fa-user fa-2x fa-fw"></i>
                        <span class="label"><?php echo $this->__('Account'); ?></span>
                    </a>
    
                    <!-- Cart -->
                    <div class="header-minicart">
                        <?php echo $this->getChildHtml('minicart_head'); ?>
                    </div><!-- .header-minicart -->
                </div><!-- .account-cart-wrapper -->
            </div><!-- .skip-links -->        
            <!-- Account -->
            <div id="header-account" class="skip-content">
                <?php echo $this->getChildHtml('topLinks') ?>
            </div><!-- #header-account -->            
        </div><!-- col-3 -->
    
        <div class="clear"></div>

    </div><!-- .page-header-container -->

</header><!-- #header -->

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

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

Styling the header

Once the new header template has been saved and uploaded, if viewed it will still contain some styling information from the rwd theme, but the new elements that have been added (.col-3, .clear) are not styled.

To style these look in the scss folder within the skin frontend folder, the scss folder contains subfolders breaking down the elements, the header files are located within the layout folder.

SCSS file for the header: \skin\frontend\rwd-custom\default\scss\layout\_header.scss

The styling information I added is

@include bp(min-width, $bp-medium + 1) {

    .page-header 
	{
		background-color:$c-background-header;
        padding: 0 $trim;
		background-image:url("/skin/frontend/rwd-custom/default/images/layout/logo_banner_bg.jpg");
		background-position: center bottom;
    }

    .page-header-container {
		max-width: $max-container-width;
        margin: 0 auto;
        position: relative;
    }
	
	.col-3 {
		width:33.3%;
		display:inline-block;
		float:left;
	}
	.col-3:nth-child(1),
	.col-3:nth-child(3) {
		padding-top:60px
	}
	
	.clear {
		display:block;
		height:1px;
		clear:both;
		width:100%;
	}

}

@include bp(max-width, $bp-medium) {

    .header-language-background {
        display: none;
    }

}