Free PHP

Prefer to watch this video on Screenr?

#container p {
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;

	-moz-column-count: 3;
	-moz-column-gap: 10px;

	column-count: 3;
	column-gap: 10px;
}

<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Cirrus - Magento Theme</title>
<link rel="stylesheet" href="css/cirrus.css" />
</head>

<body>
<div id="wrapper" class="border">

<div id="header">
<div id="logo"><img src="images/logo.gif" /></div>
<div id="hud">
<h3>Welcome, Sid</h3>
<ul class="links">
            <li><a href="#" title="My Account">My Account</a></li>
            <li ><a href="#" title="My Wish list">My Wish list</a></li>
            <li ><a href="#" title="My Cart">My Cart</a></li>
            <li ><a href="#" title="Checkout">Checkout</a></li>
            <li><a href="#" title="Log Out" >Log Out</a></li>
    </ul>
</div>
</div>

<div id="utilities">
<div id="breadcrumbs">Home » State of Fear</div>
<div id="header-search"><input type="text" class="border" value="Search our store" /></div>
</div>

<div id="content" class="product">
<h1>Content here</h1>
</div>

<div id="footer" class="border">
Help Us to Keep Magento Healthy - Report All Bugs (ver. 1.4.0.1)
© 2008 Magento Demo Store. All Rights Reserved.
</div>

</div>
</body>
</html>

* {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	color: #333;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 14px;
	list-style: none;
	line-height: 1.3em;
}

a {
	color : #7db000;
}

h1, h2, h3, h4 {
	font-weight: normal;
}

h1 {
	font-size: 32px;
	margin-bottom: 10px;
}

h2 {
	font-size: 24px;
	margin: 10px 0 12px 0;
}

h3 {
	font-size: 20px;
	margin-bottom: 5px;
}

h4 {
	font-size: 20px;
}

.border {
	border: 1px solid #666;
}

/* Base Elements */

#wrapper {
	width: 920px;
	margin: 10px auto;
	padding: 20px;
}

#header {
	margin: 0 0 20px 0;
	overflow: auto;
}

#content {
	margin: 20px 0;
	overflow: auto;
}

#footer {
	padding: 10px;
	border: 1px solid #E1E1E1;
	background: #F3F3F3;
	text-align: center;
}

/* Header content */

#logo {
	float: left;
}

#hud {
	float: right;
	width: 320px;
	height: 50px;
	padding: 10px;
	border: 1px solid #E1E1E1;
	background: #F3F3F3;
}

#hud li a {
	float: left;
	font-size: 12px;
	margin: 0 10px 0 0;
}

#utilities {
	clear: both;
	margin: 20px 0;
	overflow: auto;
	padding: 7px 10px;
	border: 1px solid #E1E1E1;
	background: #F3F3F3;
}

#breadcrumbs {
	float: left;
}

#header-search {
	float: right;
}

<?xml version="1.0"?>
<layout version="0.1.0">
    <default translate="label" module="page">
        <label>All Pages</label>
        <block type="page/html" name="root" output="toHtml" template="page/1column.phtml">
		<block type="page/html_head" name="head" as="head">
                <action method="addCss"><stylesheet>css/cirrus.css</stylesheet></action>
            </block>

            <block type="page/html_header" name="header" as="header">
				<block type="page/template_links" name="top.links" as="topLinks"/>
				<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
                <block type="core/template" name="top.search" as="topSearch"/>
            </block>

            <block type="core/text_list" name="content" as="content"/>

            <block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml"/>
        </block>
    </default>
</layout>

<block type="page/html" name="root" output="toHtml" template="page/1column.phtml">

<block type="page/html_head" name="head" as="head">
       <action method="addCss"><stylesheet>css/cirrus.css</stylesheet></action>
</block>

<block type="page/html_header" name="header" as="header">
				<block type="page/template_links" name="top.links" as="topLinks"/>
				<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
                <block type="core/template" name="top.search" as="topSearch"/>
            </block>

<block type="core/text_list" name="content" as="content"/>

<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml"/>

<!DOCTYPE html>
<html lang="en-GB">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>

<body>
<div id="wrapper" class="border">

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

<div id="content" class="product">
<?php echo $this->getChildHtml('content') ?>
</div>

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

</div>
</body>
</html>

<title><?php echo $this->getTitle() ?></title>
<link rel="icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->getIncludes() ?>

<div id="header">
<div id="logo"><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></div>
<div id="hud">
<h3>Welcome</h3>
<?php echo $this->getChildHtml('topLinks') ?>
</div>
</div>

<div id="utilities">
<?php echo $this->getChildHtml('breadcrumbs') ?>
<?php echo $this->getChildHtml('topSearch') ?>
</div>

<div id="footer" class="border">
<?php echo $this->__('Help Us to Keep Magento Healthy') ?> - <a href="http://www.magentocommerce.com/bug-tracking"
onclick="this.target='_blank'"><strong><?php echo $this->__('Report All Bugs') ?></strong></a>
<?php echo $this->__('(ver. %s)', Mage::getVersion()) ?> <?php echo $this->getCopyright() ?></address>
</div>

<?php $_links = $this->getLinks(); ?>
<?php if(count($_links)>0): ?>
<ul class="links"<?php if($this->getName()): ?> id="<?php echo $this->getName() ?>"<?php endif;?>>
    <?php foreach($_links as $_link): ?>
        <li<?php if($_link->getIsFirst()||$_link->getIsLast()): ?> class="<?php if($_link->getIsFirst()): ?>first<?php endif; ?><?php if($_link->getIsLast()): ?> last<?php endif; ?>"<?php endif; ?> <?php echo $_link->getLiParams() ?>><?php echo $_link->getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a> <?php echo $_link->getAfterText() ?></li>
    <?php endforeach; ?>
</ul>
<?php endif; ?>

<?php if($crumbs && is_array($crumbs)): ?>
<div id="breadcrumbs">
        <?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
            <?php if($_crumbInfo['link']): ?>
                <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->htmlEscape($_crumbInfo['title']) ?>"><?php echo $this->htmlEscape($_crumbInfo['label']) ?></a>
            <?php elseif($_crumbInfo['last']): ?>
                <strong><?php echo $this->htmlEscape($_crumbInfo['label']) ?></strong>
            <?php else: ?>
                <?php echo $this->htmlEscape($_crumbInfo['label']) ?>
            <?php endif; ?>
            <?php if(!$_crumbInfo['last']): ?>
                <span>» </span>
            <?php endif; ?>
        <?php endforeach; ?>
</div>
<?php endif; ?>

<div id="header-search">
		<form id="search_mini_form" action="<?php echo $this->helper('catalogsearch')->getResultUrl() ?>" method="get">
        <input id="search" type="text" name="<?php echo $this->helper('catalogsearch')->getQueryParamName() ?>" value="<?php echo $this->helper('catalogsearch')->getEscapedQueryText() ?>" class="input-text border" />

</form>
</div>

Free PHP

Archive for May, 2010

uDebug

Bread crumb

Breadcrumb

Easy Weather

Quick Tip: The Multi-Column CSS3 Module

Magento for Designers: Part 4

The Full Series

A Quick Recap

Goals for our Theme

What are We Building Today?

The Basic Template

Step 1 – The HTML

Step 2 – The CSS

Step 3 – Creating our page.xml File

Step 4 – Creating our Skeleton Template

Step 5 – Creating the Templates for our Blocks

head Section

Page Header

Page Footer

Top Links

Breadcrumbs

Search

What We’ll be Building in the Next Part

The Last Word

Core class

Storage

WordPress 3.0 Release Candidate

Lucky Seven

Pages

Categories

Archives