How to Design Theme From Blank Html In magento

Question

I want to create theme from Blank Html in magento. like should i copy base theme and change its content to my custom html...

I add custom css and js in page.xml

<?xml version="1.0"?>
<!--
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magento.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magento.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2006-2015 X.commerce, Inc. (http://www.magento.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.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/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>varien/menu.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"/>

                <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/ie6.js</name><params/><if>lt IE 7</if></action>
            </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>
                <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" 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_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" template="page/switch/stores.phtml"/>
                <block type="page/template_links" name="footer_links" as="footer_links" template="page/template/links.phtml"/>
            </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">

            <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>
                <!--- custom css added here ------------------------------->
                <action method="addItem"><type>skin_css</type><name>css/bootstrap.min.css</name><params/></action>
                <action method="addItem"><type>skin_css</type><name>css/etalage.css</name><params/></action>
                <action method="addItem"><type>skin_css</type><name>css/style.css</name><params/></action>
                <action method="addJs"><script>gretong/jquery-1.11.1.min.js</script></action>
                <action method="addJs"><script>gretong/noConflict.js</script></action>
                <action method="addJs"><script>gretong/jquery-ui.min.js</script></action>
                <action method="addJs"><script>gretong/jquery.jscrollpane.min.js</script></action>
                <action method="addJs"><script>gretong/jquery.etalage.min.js</script></action>
                <!--- custom css added here ------------------------------->
                <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/ie6.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>
        </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>
        </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>
        </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>
        </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>
        </reference>
    </page_three_columns>
</layout>

I added my custom css after

 <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

in this block i added my css and js you can see in code ..i also mentioned comment

<block type="page/html_head" name="head" as="head">

but nothing is coming...I need a better guide line for creating theme from scratch.... And should I copy base theme and rename that for my theme and make changes in that is this good way for creating theme in magento.....

Answer 1

And should I copy base theme and rename that for my theme and make changes in that is this good way for creating theme in magento.....

No, Magento has a fallback system. Only copy the files that you want to change. I can't help you with this because i'm not a Designer but a Module Developer.

Did you read: Magento Designers Guide ? http://info2.magento.com/rs/magentoenterprise/images/MagentoDesignGuide.pdf

(QUICK GUIDE TO BUILDING A THEME FROM SCRATCH = Page 51)

Happy HaCkInG and good luck with developing your own theme !