Note that there are some explanatory texts on larger screens.

plurals
  1. PODeveloping a theme with magento
    text
    copied!<p>its my first attempt with magneto theme design. i have an HTML template (including css and image) which looks like this : </p> <p>![i want to create and select a magento theme like this][1]</p> <p>i have this code for this theme : HTML Code :</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt; &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt; &lt;title&gt;Plant Bulbs direct&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="main_div"&gt; &lt;div class="inner_div"&gt; &lt;div class="header"&gt; &lt;div class="logo"&gt;&lt;a href="#"&gt;&lt;img src="images/logo.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="logo_left"&gt; &lt;div class="top_link"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Sign in&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Sign up&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Cookies&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;T &amp; Cs&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="search_div"&gt; &lt;input name="" class="input" placeholder="search" type="text" /&gt; &lt;div class="cart_icon"&gt;&lt;a href="#"&gt;&lt;img src="images/cart_img.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Store News&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Panting&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Informationh&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;FAQS&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Conact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="banner"&gt; &lt;/div&gt; &lt;div class="main_div"&gt; &lt;div class="contant"&gt; &lt;div class="contant_left"&gt; &lt;div class="body_head"&gt;Welcome to plant Bulbs Direct&lt;/div&gt; &lt;p&gt;The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation . &lt;/p&gt; &lt;div class="product_part"&gt; &lt;div class="procuct_head"&gt;Specoal Offer:&lt;/div&gt; &lt;div class="product"&gt; &lt;img src="images/product1.jpg" align="" /&gt; &lt;div class="produ_name"&gt;&lt;strong&gt;Triumph Red/Yellow&lt;/strong&gt; from &lt;span style="color:#60b62a"&gt;&lt;strong&gt;$5.99&lt;/strong&gt;&lt;/span&gt;&lt;br /&gt; &lt;span style="color:#519371"&gt;in stock&lt;/span&gt;&lt;br /&gt; &lt;div class="font" style="float:left"&gt;Qty &amp;nbsp;&lt;/div&gt; &lt;div class="qtu"&gt;1&lt;/div&gt;&lt;div class="font" style="float:left"&gt;&amp;nbsp;&amp;nbsp;Add to basket&lt;/div&gt;&amp;nbsp;&lt;img src="images/add-cart.jpg" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="product"&gt; &lt;img src="images/product2.jpg" align="" /&gt; &lt;div class="produ_name"&gt;&lt;strong&gt;Triumph Red/Yellow&lt;/strong&gt; from &lt;span style="color:#60b62a"&gt;&lt;strong&gt;$5.99&lt;/strong&gt;&lt;/span&gt;&lt;br /&gt; &lt;span style="color:#519371"&gt;in stock&lt;/span&gt;&lt;br /&gt; &lt;div class="font" style="float:left"&gt;Qty &amp;nbsp;&lt;/div&gt; &lt;div class="qtu"&gt;1&lt;/div&gt;&lt;div class="font" style="float:left"&gt;&amp;nbsp;&amp;nbsp;Add to basket&lt;/div&gt;&amp;nbsp;&lt;img src="images/add-cart.jpg" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="product"&gt; &lt;img src="images/product3.jpg" align="" /&gt; &lt;div class="produ_name"&gt;&lt;strong&gt;Triumph Red/Yellow&lt;/strong&gt; from &lt;span style="color:#60b62a"&gt;&lt;strong&gt;$5.99&lt;/strong&gt;&lt;/span&gt;&lt;br /&gt; &lt;span style="color:#519371"&gt;in stock&lt;/span&gt;&lt;br /&gt; &lt;div class="font" style="float:left"&gt;Qty &amp;nbsp;&lt;/div&gt; &lt;div class="qtu"&gt;1&lt;/div&gt;&lt;div class="font" style="float:left"&gt;&amp;nbsp;&amp;nbsp;Add to basket&lt;/div&gt;&amp;nbsp;&lt;img src="images/add-cart.jpg" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="product" style="margin:0px"&gt; &lt;img src="images/product4.jpg" align="" /&gt; &lt;div class="produ_name"&gt;&lt;strong&gt;Triumph Red/Yellow&lt;/strong&gt; from &lt;span style="color:#60b62a"&gt;&lt;strong&gt;$5.99&lt;/strong&gt;&lt;/span&gt;&lt;br /&gt; &lt;span style="color:#519371"&gt;in stock&lt;/span&gt;&lt;br /&gt; &lt;div class="font" style="float:left"&gt;Qty &amp;nbsp;&lt;/div&gt; &lt;div class="qtu"&gt;1&lt;/div&gt;&lt;div class="font" style="float:left"&gt;&amp;nbsp;&amp;nbsp;Add to basket&lt;/div&gt;&amp;nbsp;&lt;img src="images/add-cart.jpg" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="procuct_head" style=" padding:0px 0 10px 0; border-top:1px solid #98d075; margin-top:10px"&gt;Top Sellers:&lt;/div&gt; &lt;div class="product"&gt; &lt;img src="images/product5.jpg" align="" /&gt; &lt;div class="produ_name"&gt;&lt;strong&gt;Triumph Red/Yellow&lt;/strong&gt; from &lt;span style="color:#60b62a"&gt;&lt;strong&gt;$5.99&lt;/strong&gt;&lt;/span&gt;&lt;br /&gt; &lt;span style="color:#519371"&gt;in stock&lt;/span&gt;&lt;br /&gt; &lt;div class="font" style="float:left"&gt;Qty &amp;nbsp;&lt;/div&gt; &lt;div class="qtu"&gt;1&lt;/div&gt;&lt;div class="font" style="float:left"&gt;&amp;nbsp;&amp;nbsp;Add to basket&lt;/div&gt;&amp;nbsp;&lt;img src="images/add-cart.jpg" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="product"&gt; &lt;img src="images/product6.jpg" /&gt; &lt;div class="produ_name"&gt;&lt;strong&gt;Triumph Red/Yellow&lt;/strong&gt; from &lt;span style="color:#60b62a"&gt;&lt;strong&gt;$5.99&lt;/strong&gt;&lt;/span&gt;&lt;br /&gt; &lt;span style="color:#519371"&gt;in stock&lt;/span&gt;&lt;br /&gt; &lt;div class="font" style="float:left"&gt;Qty &amp;nbsp;&lt;/div&gt; &lt;div class="qtu"&gt;1&lt;/div&gt;&lt;div class="font" style="float:left"&gt;&amp;nbsp;&amp;nbsp;Add to basket&lt;/div&gt;&amp;nbsp;&lt;img src="images/add-cart.jpg" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="product"&gt; &lt;img src="images/product7.jpg" align="" /&gt; &lt;div class="produ_name"&gt;&lt;strong&gt;Triumph Red/Yellow&lt;/strong&gt; from &lt;span style="color:#60b62a"&gt;&lt;strong&gt;$5.99&lt;/strong&gt;&lt;/span&gt;&lt;br /&gt; &lt;span style="color:#519371"&gt;in stock&lt;/span&gt;&lt;br /&gt; &lt;div class="font" style="float:left"&gt;Qty &amp;nbsp;&lt;/div&gt; &lt;div class="qtu"&gt;1&lt;/div&gt;&lt;div class="font" style="float:left"&gt;&amp;nbsp;&amp;nbsp;Add to basket&lt;/div&gt;&amp;nbsp;&lt;img src="images/add-cart.jpg" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="product" style="margin:0px"&gt; &lt;img src="images/product8.jpg" align="" /&gt; &lt;div class="produ_name"&gt;&lt;strong&gt;Triumph Red/Yellow&lt;/strong&gt; from &lt;span style="color:#60b62a"&gt;&lt;strong&gt;$5.99&lt;/strong&gt;&lt;/span&gt;&lt;br /&gt; &lt;span style="color:#519371"&gt;in stock&lt;/span&gt;&lt;br /&gt; &lt;div class="font" style="float:left"&gt;Qty &amp;nbsp;&lt;/div&gt; &lt;div class="qtu"&gt;1&lt;/div&gt;&lt;div class="font" style="float:left"&gt;&amp;nbsp;&amp;nbsp;Add to basket&lt;/div&gt;&amp;nbsp;&lt;img src="images/add-cart.jpg" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="right_visit"&gt; &lt;div class="procuct_head" style="margin-left:0px; width:249px"&gt;Show products by:&lt;/div&gt; &lt;div class="stelec_optio"&gt;Planting Month&lt;select class="select" name=""&gt; &lt;option&gt;1&lt;/option&gt;&lt;option&gt;2&lt;/option&gt;&lt;/select&gt;&lt;/div&gt; &lt;div class="stelec_optio"&gt;Flowering Month &lt;select class="select" name=""&gt; &lt;option&gt;1&lt;/option&gt;&lt;option&gt;2&lt;/option&gt;&lt;/select&gt;&lt;/div&gt; &lt;div class="stelec_optio"&gt;Flower Colour&lt;select class="select" name=""&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt;&lt;/select&gt;&lt;/div&gt; &lt;div class="stelec_optio"&gt;Bulb Height&lt;select class="select" name=""&gt;&lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt;&lt;/select&gt;&lt;/div&gt; &lt;div class="visit_img"&gt;&lt;img src="images/visit_img.jpg" alt="" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="footer"&gt; &lt;div class="main_div"&gt; csf f &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>So this is my html code(with one attached css and some images), now i want to make a theme for magento with name "FLOWER_BULB", and i want to know each and every step of this development along with how to select this theme which we made. i know this a very noob question, but it would be very helpful for me if anyone can describe it like a mentor to me, Thanks in advance. kindly help. </p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload