2013-03-07 62 views
-1

它是我第一次嘗試磁貼主題設計。我有一個看起來像這樣一個HTML模板(包括CSS和圖像):用magento開發主題

[我要創建和選擇Magento的主題,像這樣] [1]

我有這樣的代碼爲這個主題: HTML代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<title>Plant Bulbs direct</title> 
</head> 
<body> 
<div class="main_div"> 
<div class="inner_div"> 
<div class="header"> 
<div class="logo"><a href="#"><img src="images/logo.jpg" alt="" /></a></div> 
<div class="logo_left"> 
<div class="top_link"> 
<ul> 
<li><a href="#">Sign in</a></li> 
<li><a href="#">Sign up</a></li> 
<li><a href="#">Cookies</a></li> 
<li><a href="#">T & Cs</a></li> 
</ul> 
<div class="search_div"> 
<input name="" class="input" placeholder="search" type="text" /> 
<div class="cart_icon"><a href="#"><img src="images/cart_img.jpg" alt="" /></a></div>  
</div> 
<div class="nav"> 
<ul> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Store News</a></li> 
    <li><a href="#">Panting</a></li> 
    <li><a href="#">Informationh</a></li> 
    <li><a href="#">FAQS</a></li> 
    <li><a href="#">Conact</a></li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class="banner"> 
</div> 
<div class="main_div"> 
<div class="contant"> 
<div class="contant_left"> 
<div class="body_head">Welcome to plant Bulbs Direct</div> 
<p>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 . 
</p> 
<div class="product_part"> 
<div class="procuct_head">Specoal Offer:</div> 
<div class="product"> 
<img src="images/product1.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div 
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img 
src="images/add-cart.jpg" /> </div> 
</div> 
<div class="product"> 
<img src="images/product2.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div  
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img 
src="images/add-cart.jpg" /> 
</div> 
</div> 
<div class="product"> 
<img src="images/product3.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div 
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img  
src="images/add-cart.jpg" /> </div> 
</div> 
<div class="product" style="margin:0px"> 
<img src="images/product4.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div 
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img 
src="images/add-cart.jpg" /> </div> 
</div> 
<div class="procuct_head" style=" padding:0px 0 10px 0; border-top:1px solid #98d075; 
margin-top:10px">Top Sellers:</div> 
<div class="product"> 
<img src="images/product5.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div  
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img 
src="images/add-cart.jpg" /> </div> 
</div> 
<div class="product"> 
<img src="images/product6.jpg" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div  
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img 
src="images/add-cart.jpg" /> </div> 

</div> 
<div class="product"> 
<img src="images/product7.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div   
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img  
src="images/add-cart.jpg" /> </div> 

</div> 
<div class="product" style="margin:0px"> 
<img src="images/product8.jpg" align="" /> 
<div class="produ_name"><strong>Triumph Red/Yellow</strong> 
from <span style="color:#60b62a"><strong>$5.99</strong></span><br /> 
<span style="color:#519371">in stock</span><br /> 
<div class="font" style="float:left">Qty &nbsp;</div> <div class="qtu">1</div><div  
class="font" style="float:left">&nbsp;&nbsp;Add to basket</div>&nbsp;<img  
src="images/add-cart.jpg" /> </div> 
</div> 
</div> 
</div> 
<div class="right_visit"> 
<div class="procuct_head" style="margin-left:0px; width:249px">Show products by:</div> 
<div class="stelec_optio">Planting Month<select class="select" name="">  
<option>1</option><option>2</option></select></div> 
<div class="stelec_optio">Flowering Month <select class="select" name=""> 
<option>1</option><option>2</option></select></div> 
<div class="stelec_optio">Flower Colour<select class="select" name=""> 
<option>1</option> 
<option>2</option></select></div> 
<div class="stelec_optio">Bulb Height<select class="select" name=""><option>1</option> 
<option>2</option></select></div> 
<div class="visit_img"><img src="images/visit_img.jpg" alt="" /></div> 
</div> 
</div> 
</div> 
<div class="footer"> 
<div class="main_div"> 
csf f 
</div> 
</div> 

</body> 
</html> 

所以這是我的HTML代碼(有一個附加的CSS和一些圖片),現在我想爲名稱爲「FLOWER_BULB」 Magento的主題,我想知道的每一步以及如何選擇我們所做的這個主題。我知道這是一個很小的問題,但如果任何人都可以形容它像我的導師一樣,那對我來說會非常有幫助,提前致謝。善意幫助。

+0

此鏈接可能會幫助您http://fishpig.co.uk/blog/create-a-custom-theme-in-magento.html – mumair 2013-03-07 07:20:33

回答

1

你好pranshu,

要使用給定的主題首先你要了解的Magento的文件結構。 我可以在這裏給你一點知識。

  1. 在Magento的CSS的路徑是在/skin/frontend/default/default/css可以eithe修改現有的CSS或在這裏創建一個新的CSS文件。

  2. 可以包含在CSS中圖片的路徑是/skin/frontend/default/default/images

  3. 編輯,你必須使用路徑/app/design/frontend/base/default/template/

  4. 要在頭文件使用/app/design/frontend/base/default/template/page/html/head.phtml CSS或者JS的HTML

  5. 要知道你可以使用開發人員模式在文件的路徑系統 - > configration->開發技術>調試或模板設置

如果您還有任何疑問,請點擊此處。