How to create Magento layout

How to create Magento layout 4.45/5 / 29

This post is wriiten for both developers and creators of Magento templates. For editors  useful because the knowledge contained herein is enough to create your own “package” (modifying  phtml and css files). For developers this is the absolute beginning of the adventure with Magento.

Start by creating a new directory for our template:

app/design/frontend/magentos/default/template/

Here you will find all of our new files. PHTML

The second step is to copy the files from the directory

skin/frontend/default/default/

to

skin/frontend/magentos/default/

The third step is to notify Magento, to use our template … We’re going to Admin …

System->Configuration->Design

Here we set in the “Current Package Name” our name (magentos).

magento_layout

So far, the effect of our work is invisible. What’s next?

Magento in its concept is written  in a way You don’t have  to overwrite the core files. If you know how the system works, it is enough to add a few files to achieve your goal and not be exposed to continuous amendments related to the update pracess. So it is in the case of templates.

Minimum already did.

Let’s say you want to add something to the page header :

app/design/frontend/base/default/template/page/html/header.phtml

Creating a new file, in its own directory  instead of edit core file:

app/design/frontend/magentos/default/template/page/html/header.phtml

and put modifications there:

<div>
    <div>
    	<a href="http://magentos.pl"><img src="http://magentos.pl/wp-content/uploads/2013/11/cropped-logo.gif"></a>
    </div>
    <div>
        <?php if ($this->getIsHomePage()):?>
        <h1><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>"><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() ?>"><strong><?php echo $this->getLogoAlt() ?></strong><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a>
        <?php endif?>
        <div>
            <?php echo $this->getChildHtml('topSearch') ?>
            <p><?php echo $this->getChildHtml('welcome') ?> <?php echo $this->getAdditionalHtml() ?></p>
            <?php echo $this->getChildHtml('topLinks') ?>
            <?php echo $this->getChildHtml('store_language') ?>
        </div>
        <?php echo $this->getChildHtml('topContainer'); ?>
    </div>
</div>
<?php echo $this->getChildHtml('topMenu') ?>

The result of our work should look something like this:


jak_stworzyc_layout_w_magento

https://github.com/magentos-pl/nauka.git